在Three.js 里添加新的材质和灯光非常简单,
首先需要在场景中添加一个光源;
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
如果我们现在渲染场景呢,跟之前是没有什么区别的,原因是不同的材质对光源的反应并不是相同的;
我们前一天示例中用的是基础材质,MeshBasicMaterial是不会对场景中的光源产生反应,而只会以指定
的颜色来渲染物体;所以我们需要更改场景中物体的材质。
Three.js 里有两种材质可以对光源产生反应:MeshLambertMaterial 和 MeshPongMaterial(后期对材质和灯光都会
有详细的介绍的哈),这里我们用第一种;
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xcccccc
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
wireframe: false
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff,
wireframe: false
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
添加和替换之后,我们快要完成了,球体和方块看起来好多了,不过还没有添加阴影;
渲染阴影需要花费大量的计算资源,因此默认情况下是不会生成阴影的,不过需要生成的话还是很简单的;
首先,要告诉renderer我们需要阴影
renderer.shadowMapEnabled=true;
然后呢,我们需要明确哪个物体投射阴影,哪个物体接受阴影,在我们的例子中,球体和方块将阴影投射到
地面上的,所以我们这样设置就好了
plane.receiveShadow = true;
cube.castShadow = true;
sphere.castShadow = true;
最后最后,我们要定义场景中的哪个光源可以产生阴影,不是所有的光源都可以产生阴影,示例中SpotLight
生成的光源可以产生阴影,同样设置下属性就好了
spotLight.castShadow = true;
over,看看效果吧