example/template2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="./js/threejs/three.js"></script>
    <script src="./js/stats.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="./js/controls/OrbitControls.js"></script>
</head>

<body id="body">
    <script>
        var /*场景*/ scene, /*相机*/ camera, /*渲染器*/ renderer, /*手势控制*/ controls;
        var /*环境光*/ ambient;
        var stats; //绘画帧率监测
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比

        /**创建场景对象Scene*/
        function initScene() {
            scene = new THREE.Scene();
        }
        /**光源设置 - 初始化场景之后*/
        function initLights() {
            //点光源
            var point = new THREE.PointLight(0xffffff);
            point.position.set(400, 200, 300); //点光源位置
            scene.add(point); //点光源添加到场景中
            //环境光
            ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient);
        }
        /**相机设置*/
        function initCamera() {
            var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
            //创建相机对象
            camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
            camera.position.set(300, 30, 30); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        }
        /**创建控件对象 - 手势*/
        function initOrbitControls() {
            controls = new THREE.OrbitControls(camera); //创建控件对象
            // controls.addEventListener('change', render);//监听鼠标事件，触发渲染函数
            // 使用requestAnimationFrame实时刷新，就不用再监听THREE.OrbitControls的change事件了
        }
        /**创建渲染器对象*/
        function initRenderer() {
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height); //设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        }

        //添加新的div到body
        //divId - 要创建的DIV id 
        function addElementDiv(divId) {
            var parent = document.getElementById("body");
            console.log(parent)
            //添加 div
            var div = document.createElement("div");
            //设置 div 属性，如 id
            div.setAttribute("id", divId);
            parent.appendChild(div);
        }
        //实时监测绘画帧率状态 - 开启动画时
        function initStats() {
            // <div id="Stats-output"></div>
            addElementDiv("Stats-output");

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

        /** 渲染函数*/
        function render() {
            if (null != stats) stats.update();
            renderer.render(scene, camera); //执行渲染操作
            requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
        }

        var mesh;
        /**创建网格模型*/
        function initObjects() {
            var geometry = new THREE.BoxGeometry(50, 50, 50); //创建一个立方体几何对象Geometry
            var material = new THREE.MeshLambertMaterial({
                color: 0x0000ff,
                side:THREE.DoubleSide,//	双面
            }); //材质对象Material
            mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            scene.add(mesh); //网格模型添加到场景中
        }


        //辅助对象 Helper
        function helpers() {
            //AxesHelper  - 坐标轴辅助
            scene.add(new THREE.AxesHelper(200));
        }

        function main() {
            //实时监测绘画帧率状态 - 调试时用
            stats = initStats();
            //创建场景对象Scene
            initScene();
            //相机设置
            initCamera();
            //启用手势控制
            initOrbitControls();
            //光源设置 - 初始化场景之后
            initLights();
            //创建渲染器对象
            initRenderer()

            //创建网格模型
            initObjects();

            helpers();
            //渲染
            render();
        }
        main();
    </script>
</body>

</html>