• 在three.js项目里，创建一个场景，添加一些需要渲染的场景（带有材质的图形）。
    • 材质定义了物体的样子，每种材质对光源的反应不一样。
    • 渲染阴影开销非常大，并且需要渲染器、每一个物体，以及每一个光源上打开。
    • 通过修改场景中物体的position、rotation属性，可以轻松实现动画。
    • 通过辅助库，可以轻松的统计控件（Stats）和定制控件（dat.GUI）。

    点击查看【codepen】

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <title>My New Pen!</title>
    6.     <!--   <script src="https://cdn.bootcss.com/stats.js/r17/Stats.js"></script> -->
    7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
    8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    9.     <script src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
    10.   </head>
    11.   <body>
    12.     <div id="webgl-output"></div>
    13.     <div id="stats-output"></div>
    15.     <script>
    16.       $(function() {
    17.         init();
    19.         var gui = new dat.GUI();
    20.         gui.add(controls, 'rotationSpeed', 0, 0.5);
    21.         gui.add(controls, 'bouncingSpeed', 0, 0.5);
    22.       });
    24.       // 增加界面控制
    25.       var controls = new function() {
    26.         this.rotationSpeed = 0.02;
    27.         this.bouncingSpeed = 0.03;
    28.       }
    30.       function init() {
    31.         var scene = new THREE.Scene();
    32.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    34.         var renderer = new THREE.WebGLRenderer();
    35.         renderer.setClearColor(new THREE.Color(0xeeeeee), 1);
    36.         renderer.setSize(window.innerWidth, window.innerHeight);
    37.         renderer.shadowMap.enabled = true;
    39.         var axes = new THREE.AxesHelper(20);
    40.         scene.add(axes);
    42.         // 地板
    43.         var planeGeometry = new THREE.PlaneGeometry(60, 20, 1);
    44.         var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
    45.         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    46.         plane.rotation.x = -0.5 * Math.PI;
    47.         plane.position.x = 15;
    48.         plane.position.y = 0;
    49.         plane.position.z = 0;
    50.         plane.receiveShadow = true;
    52.         scene.add(plane);
    54.         // 球体
    55.         var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    56.         var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff, wireframe: true });
    57.         var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    58.         sphere.position.x = 20;
    59.         sphere.position.y = 4;
    60.         sphere.position.z = 2;
    61.         sphere.castShadow = true;
    63.         scene.add(sphere);
    65.         //创建一个立方体
    66.         var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    67.         //将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体
    68.         var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
    69.         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    70.         cube.castShadow = true;
    72.         //设置立方体的位置
    73.         cube.position.x = -4;
    74.         cube.position.y = 3;
    75.         cube.position.z = 0;
    77.         //将立方体添加到场景中
    78.         scene.add(cube);
    80.         // 添加光源
    81.         var spotLight = new THREE.SpotLight(0xffffff);
    82.         spotLight.position.set(-40, 60, -10);
    83.         spotLight.castShadow = true;
    84.         scene.add(spotLight);
    86.         camera.position.x = -30;
    87.         camera.position.y = 40;
    88.         camera.position.z = 30;
    89.         camera.lookAt(scene.position);
    91.         $('#webgl-output').append(renderer.domElement);
    92.         renderScene();
    94.         var step = 0;
    95.         function renderScene() {
    96.           cube.rotation.x += controls.rotationSpeed;
    97.           cube.rotation.y += controls.rotationSpeed;
    98.           cube.rotation.z += controls.rotationSpeed;
    100.           // 定义球弹的速度
    101.           step += controls.bouncingSpeed;
    102.           // sphere.position.x = 20 + (10 * (Math.cos(step)));
    103.           sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));
    105.           // 通过requestAnimationFrame在特定时间间隔重新渲染场景
    106.           requestAnimationFrame(renderScene);
    107.           // 渲染场景
    108.           renderer.render(scene, camera);
    109.         }
    110.       }
    111.     </script>
    112.   </body>
    113. </html>