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

简介: 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)

太阳火神的美丽人生 (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.



目录
相关文章
|
9天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
22 6
|
1天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
4天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
15 4
|
9天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
9 0
|
9天前
|
JavaScript 前端开发
一个基于HTML与JavaScript的Wizard演示
一个基于HTML与JavaScript的Wizard演示
8 0
|
9天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
12 1
|
前端开发 JavaScript 测试技术
JavaScript语言基础-环境搭建
<span style="font-size:14px;">我们要想编写和运行JavaScript脚本,则需要:JavaScript编辑工具和JavaScript运行测试环境。下面我们分别介绍一下。<br>JavaScript编辑工具<br>JavaScript编辑工具最简单的可以使用一些文本编辑工具,但是它们往往缺少语法提示,有的语法关键字还没有高亮显示,最重要的是它们大部分不支持调试。考虑
1792 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
148 63