webgl 让场景动起来

　　在前两章简单的讲过场景这个组建，这一章我们就更深入的去了解如何让场景动起来，下面来实现一个多边形（场景）的移动

　　效果图：

　　从上图就可以看到让一个多边形往左移动的效果图，实现这个很简单。

　　

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/three.js"></script>
        <style>
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }
        </style>

        <script>
            //渲染器
            var renderer;

            function initThree() {
                    width = document.getElementById('canvas-frame').clientWidth;
                    height = document.getElementById('canvas-frame').clientHeight;
                    renderer = new THREE.WebGLRenderer({
                        antialias: true
                    })
                    renderer.setSize(width, height);
                    document.getElementById('canvas-frame').appendChild(renderer.domElement);
                    renderer.setClearColorHex(0xFFFFFF, 1.0);
                }
                //相机
            var camera;

            function initCamera() {
                    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); //透视相机：透视的也大物体就越小，相反
                    //camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 10, 1000);
                    camera.position.x = 0;
                    camera.position.y = 0;
                    camera.position.z = 600;
                    camera.up.x = 0;
                    camera.up.y = 1;
                    camera.up.z = 0;
                    camera.lookAt({
                        x: 0,
                        y: 0,
                        z: 0
                    })
                }
                //场景
            var scene;
            function initScene() {
                    scene = new THREE.Scene();
                }
                //光源基类
            var light;
            function initLinght() {
                    //light = new THREE.PointLight(0xFFFFFF);//光的颜色
                    light = new THREE.AmbientLight("0xFF0000") //环境的光：可以影响物体的本身的颜色
                    light.position.set(0, 0, 300);
                    scene.add(light); //给场景添加光线
                }
                //初始化对象
            var mesh;

            function initObject() {
                var geometry = new THREE.CylinderGeometry(60, 100, 200); //圆柱几何
                var material = new THREE.MeshLambertMaterial({
                    color: 0xFF00 //兰伯特材料网
                });
                mesh = new THREE.Mesh(geometry, material); //网格
                mesh.position = new THREE.Vector3(0, 0, 0);
                scene.add(mesh);
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLinght();
                initObject();
                animation();
            }

            function animation() {
                mesh.position.x -= 1;//向左：-=1，向右：+=1
                
                renderer.render(scene, camera);
                requestAnimationFrame(animation)
            }
        </script>

    </head>

    <body onload="threeStart()">
        <div id="canvas-frame"></div>
    </body>

</html>

 

　　

posted @ 2015-10-29 15:46  Alvin-fan  阅读(289)  评论(0)    收藏  举报