案例：three.js 自动旋转的立方体     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html>
2
    <head>
3
        <title>three.js自动旋转的立方体</title>
4
<script src="/js/threejs/three.js"></script>
5
        <style>
6
            body { margin: 0; }
7
            canvas { width: 100%; height: 100% }
8
        </style>
9
    </head>
10
    <body>
11
12
        <script>
13
            var scene = new THREE.Scene();
14
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
15
​
16
            var renderer = new THREE.WebGLRenderer();
17
            renderer.setSize( window.innerWidth, window.innerHeight );
18
            document.body.appendChild( renderer.domElement );
19
​
20
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
21
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
22
            var cube = new THREE.Mesh( geometry, material );
23
            scene.add( cube );
24
​
25
            camera.position.z = 5;
26
​
27
            var animate = function () {
28
                requestAnimationFrame( animate );
29
​
30
                cube.rotation.x += 0.01;
31
                cube.rotation.y += 0.01;
32
​
33
                renderer.render( scene, camera );
34
            };
35
​
36
            animate();
37
        </script>
38
    </body>
39
</html>