HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）

最新推荐文章于 2023-06-15 11:23:25 发布

太阳火神的美丽人生

最新推荐文章于 2023-06-15 11:23:25 发布

阅读量4k

点赞数

<=即时总结=> 同时被 3 个专栏收录

737 篇文章 2 订阅

订阅专栏

数据呈现-OpenGL ES

125 篇文章 2 订阅

订阅专栏

语言-JavaScript

78 篇文章 0 订阅

订阅专栏

HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

HTML5 画布上的 Three.js 环境灯光
HTML5 Canvas Three.js Ambient Lighting

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script defer="defer">
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cube.rotation.y += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }
 
      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;
 
      // scene
      var scene = new THREE.Scene();
                
      // cube
      var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshLambertMaterial({
        color: 'blue' 
      }));
      cube.overdraw = true;
      cube.rotation.x = Math.PI * 0.1;
      scene.add(cube);
      
      // add subtle blue ambient lighting
      var ambientLight = new THREE.AmbientLight(0x000044);
      scene.add(ambientLight);
      
      // directional lighting
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      scene.add(directionalLight);
 
      // start animation
      animate();
    </script>
  </body>
</html>

讨论
Discussion

要使用 Three.js 创建环境灯光，我们可以实例化一个 AmbientLight 对象，然后把它添加到场景中。环境灯光需要一个颜色来定义。环境灯光照亮整个场景，可用于柔化位置灯光，诸如 directional 灯光。

To create ambient lighting with Three.js, we can instantiate an AmbientLight object and then add it to the scene. AmbientLight requires is defined with a color. Ambient lights illuminate the entire scene and can be used to soften positional lights such as directional lights.

太阳火神的美丽人生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）

HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）
复制链接

扫一扫