three.js 3D动画效果

古城微笑少年丶 2021-09-10 11:36 487阅读 0赞

> three.js

<!DOCTYPE html>
    <html>
    <head>         
    <meta charset="UTF-8">
    <title>地球自转</title>         
    <style>
    #canvas-frame {
          width: 100%;
          height: 600px;
    }
    </style>
    </head>
    <body onload="render()">
    <div id="canvas-frame" ></div>
    </body>
    <script type="text/javascript" src="three.min.js"></script> 
    <script type="text/javascript">
    var width = document.getElementById('canvas-frame').clientWidth; //画布宽
    var height = document.getElementById('canvas-frame').clientHeight; //画布高
    
    var renderer = new THREE.WebGLRenderer({
             antialias : true
             //canvas: document.getElementById('canvas-frame')
        });
    renderer.setSize(width, height);
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.getElementById('canvas-frame').appendChild(renderer.domElement);
    
            //初始化场景
    var scene = new THREE.Scene();
    
    var camera = new THREE.PerspectiveCamera(45,  width/height , 1, 10000);
    camera.position.set(300,300,500); 
    camera.up.x = 0;
    camera.up.y = 1; //相机朝向--相机上方为y轴
    camera.up.z = 0;
    camera.lookAt({ x : 0,y : 0,z : 0 });//相机的中心点
    scene.add(camera);             
    
    var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
    light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
    scene.add(light);
    
    //导入材质
    var texture = THREE.ImageUtils.loadTexture('images/box.jpg', {}, function() {
        renderer.render(scene, camera);
    });
    
    var texture1 = THREE.ImageUtils.loadTexture('images/bg.jpg', {}, function() {
        renderer.render(scene, camera);
    });
    /**
     * 关于material材料注意点说明 
    * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
    * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
    * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
    */
    var material = new THREE.MeshLambertMaterial({
        map: texture
    });
    
    var material1 = new THREE.MeshLambertMaterial({
        map: texture1
    }); 
           
    //创建一个立方体
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    //将material材料添加到几何体geometry
    var geom1 = new THREE.SphereGeometry(100,100,100);//第一个参数是半径，第二个是经度分段数，第三个是纬度分段数，第二第三个参数越大，物体越接近球体
    var mesh1 = new THREE.Mesh(geom1,material1);
    mesh1.position.set(0,100,0);
    var mesh = new THREE.Mesh(geometry, material);
    var mesh2 = new THREE.Mesh(geometry, material);
    var mesh3 = new THREE.Mesh(geometry, material);
    mesh.position.set(-400,100,0)
    mesh2.position.set(-200,0,200)
    mesh3.position.set(300,100,0)
    scene.add(mesh);
    scene.add(mesh1);
    scene.add(mesh2);
    scene.add(mesh3);
    
    var helper = new THREE.GridHelper( 1000, 50 );
        helper.setColors( 0x0000ff, 0x808080 );
        //scene.add( helper );
    
    function render(){
      requestAnimationFrame(render);
       //mesh1.rotation.x += 0.02;
       mesh1.rotation.y += 0.02;
       mesh2.rotation.x += 0.02;
       mesh3.rotation.z += 0.02;
       mesh.rotation.y += 0.03;
      //mesh1.rotation.z += 0.03;
      renderer.render(scene, camera);
    }     
    </script>
     </html>