TML5画布Three.js定向照明

最新推荐文章于 2024-02-01 16:24:54 发布

风靡不是一时间

最新推荐文章于 2024-02-01 16:24:54 发布

阅读量517

点赞数

分类专栏： TML5画布Three.js定向照明文章标签： TML5画布Three.js定向照明

本文链接：https://blog.csdn.net/fengmibushiss/article/details/17924823

版权

本文通过实例代码介绍了如何在Three.js中实现HTML5画布的定向照明。首先创建一个AmbientLight对象以提供全局照明，然后创建一个DirectionalLight对象，设置其位置并将其添加到场景中，以实现从特定方向照射的光线效果。

摘要由CSDN通过智能技术生成

创建环境照明 Three.js,我们可以实例化一个AmbientLight对象,然后将其添加到场景。AmbientLight需要定义一个颜色。周围的灯光照亮整个场景,可以用于软化位置灯等方向灯。

<!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
        ren