【three.js 第一课】创建场景，显示几何体 

<!DOCTYPE html>
<html>
<head>
    <title>demo1</title>
</head>
<style type="text/css">
   body{
        margin:0;
   }
   canvas{
        width:100%;
        height:100%;
   }
</style>
<body>
    <script src="jquery.min.js"></script>
    <script src="../build/three.js"></script>
    <script type="text/javascript"> 
        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);
       
        document.body.appendChild(renderer.domElement);//渲染到浏览器
 
        //创建形状BoxGeometry
        var geometry = new THREE.BoxGeometry(1,1,1);
 
        //创建材料   wireframe是否使用线条
        var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:false});
        
        //将材料和形状结合
        var cube = new THREE.Mesh(geometry,material);
        
        //加入场景中
        scene.add(cube);
 
        camera.position.z=3;//设置相机的位置
 
 
        //逻辑
        var update=function(){
            //物体随着XY轴旋转
            cube.rotation.x +=0.01;
            cube.rotation.y += 0.005;
        }
 
        //绘画渲染
        var render=function() {
            renderer.render(scene,camera);
        }
 
        //循环运行update，render
        var loop=function() {
             requestAnimationFrame(loop);
             update();
             render();
        }
 
        loop();//循环开始
    </script>
</body>
</html>

 

posted on 2020-03-10 15:26  dawn888  阅读(590)  评论(0)  编辑  收藏  举报

导航