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.



目录
相关文章
|
1月前
|
移动开发 JavaScript 前端开发
封装HTML5中canvas画布操作的第三方库
封装HTML5中canvas画布操作的第三方库
129 0
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 —— 初识 Canvas 画布
HTML5 —— 初识 Canvas 画布
|
3月前
|
前端开发 JavaScript API
html画布绘制图形
html画布绘制图形
|
8月前
|
移动开发 前端开发 HTML5
HTML5的学习之canvas画布(五)
HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象,
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制&quot;被填充的&quot;文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: &lt;canvas id=&quot;my_canvas&quot;&
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(三)
HTML5的学习之canvas画布 上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。 1.矩形 方法 描述 rect() 创建矩形。 fillRect() 绘制&quot;被填充&quot;的矩形。 strokeRect() 绘制矩形(无填充)。 clearRect() 在给定的矩形内清除指定的像素。 2.圆形 方法 描述 arc() 创建弧/曲线(用于创建圆形或部分圆)。 arcTo() 创建两切线之间的弧/曲线。 ellipse() 创建椭圆。 3.路径 方法 描述 fill() 填充当前绘图(路径)。 stroke() 绘制已定
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(二)
HTML5的学习之canvas画布 这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色,渐变,阴影等属性和方法。 属性 1.颜色属性 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 2.阴影属性 属性 描述 shadowColor 设置或返回用于阴影的颜色。 shadowBlur 设置或返回用于阴影的模糊级别。 shadowOffsetX 设置或返回阴影与形状的水平距离。 shadowOffsetY 设置或返回阴影与形状的垂直距离。 3.线条样式属性 属性 描述 lineC
|
8月前
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(一)
HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码: &lt;
|
10月前
|
移动开发 前端开发 HTML5
8、HTML5新增标签(布局、媒体、画布、矢量)
8、HTML5新增标签(布局、媒体、画布、矢量)
64 0
|
编解码 移动开发 缓存
HTML5网页3D场景制作之Three.js初体验-制作3D字体
WebGL(图形库是一个JavaScript API)在任何连接的WebGL中渲染图形的API,Web3D和Web3D的图形应用程序,可以单独使用一个WebGL通过引入与OpenGL 2.0一致的浏览器来使用WebGL 2.0 WebGL完美地解决了现有的Web交互式三维动画的两个问题: 第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件的支持; 第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。
460 1
相关产品
云迁移中心
推荐文章
更多