写一个会旋转的立方体 

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="../three.js"></script>
    
</head>
<body> 
    <script>
        var scene = new THREE.Scene(); //初始化场景
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);//初始化相机,角度，纵横比，最近，最远
        var renderer = new THREE.WebGLRenderer(); //初始化渲染器
        renderer.setSize(window.innerWidth,window.innerHeight);//设置渲染器的大小
        document.body.appendChild(renderer.domElement);//将渲染器渲染到网页里面

        var geometry = new THREE.CubeGeometry(1,1,1);//新建一个立方体
        var material = new THREE.MeshBasicMaterial({color:0xffffff});//设置立方体到材质
        var cube = new THREE.Mesh(geometry,material);
        scene.add(cube);//将立方体加入到场景里面
        camera.position.z=3;//设置相机的位置坐标,没有相机的位置就不知道以什么唯独渲染

        function render(){
            requestAnimationFrame(render);//循环渲染
            cube.rotation.x+=0.01;//应该是旋转方向的速率
            cube.rotation.y+=0.01;
            renderer.render(scene,camera);
        }

        render();
    </script>
</body>
</html>

 

posted @ 2017-08-05 18:11  wzndkj  阅读(277)  评论(0)    收藏  举报