码迷,mamicode.com
首页 > 其他好文 > 详细

写一个会旋转的立方体

时间:2017-08-05 18:53:18      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:mesh   document   height   inner   code   anim   span   pre   basic   

<!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>

 

写一个会旋转的立方体

标签:mesh   document   height   inner   code   anim   span   pre   basic   

原文地址:http://www.cnblogs.com/wzndkj/p/7290989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!