lesson2 简单的Animation

Technorati 标签: Three.js

1、旋转物体与相机

objectName.rotation.set( theta_x, theta_y, theta_z );

或

Object.name.rotation.x = theta_x;
Object.name.rotation.y = theta_y;
Object.name.rotation.z = theta_z;

theta_x，theta_y，theta_z分别表示x轴、y轴、z轴的的旋转角，单位弧度。

将上节设置物体改为

var  cube = [];
function  initObject () {
    cube[0] = new THREE.Mesh (
        new THREE.CubeGeometry  (20,20,20),               //configuration / shape 
         new THREE.MeshLambertMaterial({color:0xff0000}) ////材质设定
    );
    cube[1] = new THREE.Mesh (
         new THREE.CubeGeometry  (20,20,20),               //configuration / shape 
         new THREE.MeshLambertMaterial({color:0xff0000}) ////材质设定
    );
    cube[0].position.set (0, 30, 0);
    cube[1].position.set (0, 0, 0);
    scene.add (cube[0]);
    scene.add (cube[1]);
}

加入循环函数

 

var  t = 0;
function  loop () {
    t++;
    cube[0].rotation.set(0, t/100, 0);    //y轴旋转
    cube[1].rotation.set(t/100, 0, 0);    //x轴旋转
    //移动相机
    camera.position.set (100 * Math.cos (t/100), 100* Math.sin (t/200), 50 * Math.cos (t/50));
    camera.lookAt ({x: 0, y: 0, z: 0}); //need
    renderer.render (scene, camera); //need
    window.requestAnimationFrame (loop);
}
在执行块执行loop方法
 
2、阴影的设置

(1) 呈现器
(2) 源
(3) 为阴影生成的对象

唉，惭愧啊，我实现不了，把鬼子的代码贴出来吧

<!DOCTYPE html>
<!-- saved from url=(0055)http://www.natural-science.or.jp/WebGL/tutorial2_4.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Three.js チュートリアル２：アニメーション</title>
<script src="Three.js"></script>
<style>
div#canvas-frame{
    border: none;
    cursor: pointer;
    width: 400px;
    height: 400px;
    background-color: #FFFFFF;
}
</style>
<script>
    var width, height;
    var renderer;
    function initThree() {
        width = document.getElementById('canvas-frame').clientWidth;
        height = document.getElementById('canvas-frame').clientHeight;        
        try {renderer = new THREE.WebGLRenderer({antialias: true});} catch (e) {}    
        if(!renderer) document.getElementById("errer").innerHTML = '<p style="text-align:center;font-size:small; color:red">お使いの環境ではWebGLはご利用いただけません。<br />WebGLに対応していない方のためにGIFファイルを以下に用意しました。<br /><br /><img src="http://www.natural-science.or.jp/images/20120217-4.gif" alt="WEBGLデモ" /></p>';
        renderer.setSize(width, height);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);
        renderer.setClearColorHex(0xFFFFFF, 1.0);
        renderer.shadowMapEnabled = true;//影をつける（１）
    }
    
    var camera;
    function initCamera() {    
        camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 1;
    }
    var scene;
    function initScene() {        
        scene = new THREE.Scene();
    }
    var light, light2;
    function initLight() {    
        light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
        light.position.set( 50, 50, 200 );
        light.castShadow = true;//影をつける（2）
        scene.add(light);
        
        light2 = new THREE.AmbientLight(0x555555);
        scene.add(light2);        
    }
    var cube = Array();
    var plane;
    function initObject(){
        for(var i=0; i<3; i++){
            cube[i] = new THREE.Mesh(
                   new THREE.CubeGeometry(50,50,50),
                   new THREE.MeshLambertMaterial({color: 0xff0000, ambient:0xFF0000})
            );
            scene.add(cube[i]);
            cube[i].castShadow = true;//影をつける（2）            
            cube[i].position.set(0,-100+100*i,0);
        }
        plane = new THREE.Mesh(
            new THREE.PlaneGeometry(500, 500),               
            new THREE.MeshLambertMaterial({color: 0x999999, ambient:0x999999})
        );
        plane.receiveShadow = true; //影をつける（3）
        scene.add(plane);
        plane.position.set(0,0,-100);
    }
    var t=0;
    function loop() {
        t++;
        renderer.clear();
        cube[0].rotation.set( t/100, 0, 0 );
        cube[1].rotation.set( 0, t/100, 0 );
        cube[2].rotation.set( 0, 0, t/100 );
        camera.position.set( 400*Math.cos(t/100), 400*Math.sin(t/200), 50*Math.cos(t/50));
        camera.lookAt( {x:0, y:0, z:0 } );        
        renderer.render(scene, camera);
        window.requestAnimationFrame(loop);
    }    
    function threeStart() {
        initThree();
        initCamera();
        initScene();        
        initLight();
        initObject();
        loop();
    }
</script>
</head>

<body onload="threeStart();">
<div id="errer"></div>
<div id="canvas-frame"><canvas width="400" height="400"></canvas></div>

</body></html>
posted @ 2013-01-11 16:05  inseptember  阅读(184)  评论(0)  编辑  收藏  举报