<style>

        canvas {

            width: 100%;

            height: 100%

        }

    </style>

    <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>

    <script>

        var scene = new THREE.Scene();//场景

        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机

        var renderer = new THREE.WebGLRenderer();//渲染器

        renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度

        //renderer画布,所有的渲染都是画在renderer.domElement元素上，将元素挂接到body上

        document.body.appendChild(renderer.domElement);

        //创建几何体CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

        //width：立方体x轴的长度

        //height：立方体y轴的长度

        //depth：立方体z轴的深度，也就是长度

        var geometry = new THREE.CubeGeometry(1, 1, 1);//几何体()

        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

        var cube = new THREE.Mesh(geometry, material); scene.add(cube);

        camera.position.z = 5;

        function render() {

            requestAnimationFrame(render); //渲染循环

            cube.rotation.x += 0.1;

            cube.rotation.y += 0.1;

            /* 渲染，使用渲染器，结合相机和场景来得到结果画面

             * render( scene, camera, renderTarget, forceClear )

             * 各个参数的意义是：

             * scene：前面定义的场景

             * camera：前面定义的相机

             * renderTarget：渲染的目标，默认是渲染到前面定义的render变量中

             * forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

             */

            renderer.render(scene, camera);

        }

        render();

    </script>