three.js智慧园区数字孪生(全能大师版),移动互联网高级开发 ...

carolw

three.js智慧园区数字孪生(全能大师版)

threejs光源

为了更好的渲染场景，threejs提供了生活中常见的一些光源的API。
你可以测试前面几节课案例中的光源代码，比如全部删除所有的光源代码，你会发现场景中的物体是黑色的，就像生活中一样没有光，物体是黑色的。
常见光源类型

本节课不会对threejs各类光源进行深入介绍，主要是简单展示下，对于初学者有一个印象就可以。

光源	简介
AmbientLight	环境光
PointLight	点光源
DirectionalLight	平行光，比如太阳光
SpotLight	聚光源

环境光创建
//环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
点光源创建
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
// 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
scene.add(point); //点光源添加到场景中
光源通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
立体效果

仅仅使用环境光的情况下，你会发现整个立方体没有任何棱角感，这是因为环境光只是设置整个空间的明暗效果。如果需要立方体渲染要想有立体效果，需要使用具有方向性的点光源、平行光源等。
光源光照强度

通过光源构造函数的参数可以设置光源的颜色，一般设置明暗程度不同的白光RGB三个分量值是一样的。如果把THREE.AmbientLight(0x444444);的光照参数0x444444改为0xffffff,你会发现场景中的立方体渲染效果更明亮。
光源位置

//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
你可以把点光源的位置设置为(0,0,0)，然后不使用其它任何光源，这时候你会发现场景中立方体渲染效果是黑色。其实原因很简单，立方体是有大小占，用一定空间的，如果光源位于立方体里面，而不是外部，自然无法照射到立方体外表面。
point.position.set(0, 0, 0);
如果只设置一个点光源的情况下，你通过鼠标旋转操作整个三维场景，你会发现立方体点光源无法照射的地方相对其他位置会比较暗，你可以通过下面的代码在新的位置插入一个新的光源对象。点光源设置的位置是(-400, -200, -300)，相当于把立方体夹在两个点光源之间。
// 点光源2  位置和point关于原点对称
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300); //点光源位置
scene.add(point2); //点光源添加到场景中
1、更新开课吧高薪webGL工程师(opens new window)
2、完结 Three.js可视化企业实战WEBGL课(opens new window)
3、完结 Threejs风能可视化(全能大师)(opens new window)
4、完结 Three.js+Cesium智慧机场数字孪生(全能版)(opens new window)
5、新课three.js智慧园区数字孪生(全能大师版)
Three.js获得世界坐标.getWorldPosition()

通过前两节课的学习，想必你已经对Threejs的层级模型有了一定认识，那么本节课就在层级模型概念的基础上，继续给家讲解两个新的概念，即本地坐标系和世界坐标系。
如果你对本地坐标系和世界坐标系已经有了一定概念，那么可以直接访问模型的位置属性.position获得模型在本地坐标系或者说模型坐标系下的三维坐标，通过模型的.getWorldPosition()方法获得该模型在世界坐标下的三维坐标。
.getWorldPosition()方法

模型对象的方法.getWorldPosition()方法和位置属性.position一样继承自基类Object3D。
// 声明一个三维向量用来保存世界坐标
var worldPosition = new THREE.Vector3();
// 执行getWorldPosition方法把模型的世界坐标保存到参数worldPosition中
mesh.getWorldPosition(worldPosition);
it你要的都有
链接：https://pan.baidu.com/s/10WgMr1n69fHr04OJcsvkPA?pwd=2lle
提取码：2lle