【three.js学习笔记】光

YancyYe 发布于2019-08-22 16:21 / 3009人阅读

摘要：环境光的位置对呈现的效果无任何效果环境光的构造函数只有一个参数进制的颜色值。半球光点光源点光源的光线来自同一点，并向外发射。点光源的构造函数有三个参数，比平行光多了一个距离参数，光会从光源经过的距离一路衰减为。

Lightapi

光源的基类。

Light( color, intensity )

color 光源颜色的RGB数值

intensity 光源强度的数值。

看到的颜色

使用反光材料的物体，看到的颜色是由光的颜色和物体本身的颜色所决定（物理光）。

绿色光照在红色物体上，看到为黑色。

显示真正颜色使用白色光：0xffffff;

AmbientLight（环境光）

环境光是一种无处不在的光，就好像现实世界中的空气。环境光的光线来自任何方向，因此，当你仅为场景指定环境光时，所有的物体无论向量如何，都将表现为同样的明暗程度。

环境光的位置对呈现的效果无任何效果

环境光的构造函数THREE.AmbientLight只有一个参数——16进制的颜色值。

AmbientLight( hex )

var light = new THREE.AmbientLight(0xff0000);

scene.add( light );

给场景添加红色的环境光后，立方体和地面都显示为红色：

AreaLight（区域光） DirectionalLight（平行光）

平行光是一组具有方向的没有衰减的平行光线，它类似太阳光：虽然遥远但打在物体上的光都来自同一个方向。

环境光的构造函数THREE.DirectionalLight有两个参数——16进制的颜色值和光线的强度（默认为1）。

DirectionalLight(hex, intensity)

var light = new THREE.DirectionalLight(0xffffff, 0.5);

light.position.set(100, 150, 50);

scene.add(light);

HemisphereLight（半球光）

PointLight（点光源）

点光源的光线来自同一点，并向外发射。就好像蜡烛发出的光和萤火虫发出的光。

点光源的构造函数THREE. PointLight有三个参数，比平行光多了一个距离参数，光会从光源经过distance的距离一路衰减为0。

PointLight(hex, intensity, distance)

var light = new THREE.PointLight(0xffffff, 1, 300);

light.position.set(50, 50, 50);

scene.add(light);

SpotLight（聚光灯） 投影

Three.js的光源默认不会导致物体间的投影，打开投影需要执行以下几步：

打开渲染器的地图阴影: renderer.shadowMapEnabled = true;

启用光线的投影：light.castShadow = true;

把模型设置为生成投影：mesh.castShadow = true;

把模型设置为接收阴影：mesh.receiveShadow= true;







    

    我的第一个WebGL程序

GPU云服务器云服务器 three.js three.js极客 three.js教程 three.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94271.html

WebGL three.js学习笔记阴影与实现物体的动画

摘要：另外如果想要在程序中开启阴影的话首先需要把设置为，默认是关闭的，因为实现阴影的效果是比较消耗性能的。此时的阴影效果是这样的至此，我们的场景还有物体的动画效果就已经实现。实现物体的旋转、跳动以及场景阴影的开启与优化本程序将创建一个场景，并实现物体的动画效果运行的结果如图： showImg(https://img-blog.csdnimg.cn/20190413170812704.pn...

刘永祥 2019-08-23 17:06 评论0 收藏0
three.js 入门详解(二)

摘要：首先，下载并在的中使用然后，我们需要准备一个模型，在函数中，创建变量，用于导入模型导入模型的时候，接受两个参数，第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中。 9. 动画在本章之前，所有画面都是静止的，本章将介绍如果使用Three.js进行动态画面的渲染。此外，将会介绍一个Three.js作者写的另外一个库，用来观测每秒帧数...

G9YH 2019-08-21 17:51 评论0 收藏0
【Three.js】Three.js学习记录

摘要：上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。接下来预先恭喜你，你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中，从摄像机的位置向场景中鼠标的点击位置发射光线。先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释：上帝说，要有场景！于是就有了场景，场景去纳这万事万物。上帝说，要有光！于是就有了光...

chanthuang 2019-08-23 14:46 评论0 收藏0