Javascript three.js pointLight从r.67更改为r.68

点光源和平面之间的相互作用似乎从r.67变为r.68

我正在努力学习three.js，阅读一本一年前的书。 我已经将教程示例简化为一个平面、一个立方体和一个点光源，当我使用r.68时，平面上光源的“反光”效果消失，这是灯光效果教程的点。 我猜这一定和飞机的材料反射率有关吧

通过three.js github修订说明、函数源代码的历史记录或类似的three.js示例，我并没有得到任何线索，但我的three.js新手身份可能让我不知道该寻找什么

如果有人能解释是什么改变了，为什么它不起作用，我会很乐意把这个破碎的教程变成一个学习经验

编辑以添加小提琴示例，而不是源

这是r.68：

http://jsfiddle.net/nnu3qnq8/5/

这是r.67：

http://jsfiddle.net/nnu3qnq8/4/

代码：

$（函数（）{
var stats=initStats（）；
//创建一个场景，该场景将包含所有元素，例如对象、摄影机和灯光。
var scene=new THREE.scene（）；
//创建一个摄像头，它定义了我们要看的地方。
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
//创建渲染并设置大小
var renderer=new THREE.WebGLRenderer（）；
setClearColorHex（0xEEEE，1.0）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//创建地平面
var planeGeometry=新的三个平面几何体（60,20,1,1）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0xffffff}）；
var plane=新的三个网格（平面几何体、平面材质）；
//旋转并定位平面
plane.rotation.x=-0.5*Math.PI；
平面位置x=15
平面位置y=0
平面位置z=0
//将平面添加到场景中
场景。添加（平面）；
//创建一个立方体
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff7777}）；
var cube=新的三网格（立方计量法、立方材料）；
cube.castShadow=true；
//定位立方体
cube.position.x=-4；
立方体位置y=3；
立方体位置z=0；
//将立方体添加到场景中
场景.添加（立方体）；
//将摄影机定位并指向场景的中心
camera.position.x=-25；
摄像机位置y=30；
摄像机位置z=25；
摄影机。注视（新的三个向量3（10，0，0））；
//添加微妙的环境照明
var ambiColor=“#0c”；
var ambientLight=新的三个。ambientLight（ambiColor）；
场景。添加（环境光）；
//为阴影添加聚光灯
//为阴影添加聚光灯
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（-40,60，-10）；
spotLight.castShadow=true；
//场景。添加（聚光灯）；
var pointColor=“#ccffcc”；
var pointLight=新的三个点光源（pointColor）；
pointLight.distance=100；
pointLight.position=新的三个向量3（3,5,3）；
场景。添加（点光源）；
//将渲染器的输出添加到html元素
$（“#WebGL输出”）.append（renderer.doElement）；
//调用render函数
var阶跃=0；
//用于确定灯光动画的切换点
var倒置=1；
var相位=0；
变量控制=新函数（）{
该转速=0.03；
this.ambientColor=ambiColor；
this.pointColor=pointColor；
这个强度=1；
这个距离=100；
}
var gui=new dat.gui（）；
addColor（控件“ambientColor”）.onChange（函数（e）{
ambientLight.color=新的三种颜色（e）；
});
addColor（控件，'pointColor'）.onChange（函数（e）{
pointLight.color=新的三种颜色（e）；
});
添加（控制“强度”，0，3）.onChange（函数（e）{
点光源强度=e；
});
添加（控制“距离”，0，100）.onChange（函数（e）{
pointLight.distance=e；
});
render（）；
函数render（）{
stats.update（）；
//移动灯光模拟
如果（相位>2*Math.PI）{
反转=反转*-1；
相位-=2*Math.PI；
}否则{
相位+=控制。旋转速度；
}
pointLight.position.z=+（7*（数学sin（相位））；
pointLight.position.x=+（14*（数学cos（相位））；
如果（反转<0）{
var=14；
pointLight.position.x=（invert*（pointLight.position.x-pivot））+pivot；
}
//使用requestAnimationFrame渲染
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
函数initStats（）{
var stats=newstats（）；
stats.setMode（0）；//0:fps，1:ms
//左上对齐
stats.domElement.style.position='绝对'；
stats.domeElement.style.left='0px'；
stats.domElement.style.top='0px'；
$（“#Stats output”）.append（Stats.domeElement）；
返回统计；
}
});

您使用的模式不再受支持

pointLight.position = new THREE.Vector3( 3, 5, 3 );

不要创建新对象。而是这样做：

pointLight.position.set( 3, 5, 3 );

---

three.js r.68

可能存在多个问题，但如果您像这样细分平面几何体，问题是否会消失：

new three.PlaneGeometry（60,20,10,10）或将
MeshLambertMaterial
替换为
MeshPhongMaterial
？一个JSFIDLE在这方面可能很方便。MeshPhongMaterial似乎没有这样做，更改段大小也没有。可以说，这架飞机仍呈哑光黑色
pointLight.position.set( 3, 5, 3 );