threejs中添加新的材质和灯光以及设置阴影属性
首先，threejs的初始化，需要创建场景、相机、渲染器
function init() {
// 创建场景、相机、渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
}
创建一个平面
// 创建平面
var planeGeometry = new THREE.PlaneGeometry(60, 20); // 平面的几何维度(给定宽、高)
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); // 平面的材质设
var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 将平面加入到网格对象中去
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
容器中需要设置相机的视角
// 设置相机视角
camera.position.x = 30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
初始化操作完成，需要将场景、相机加入到渲染器中去
// 加入到dom中去
document.getElementById('WebGL-output').appendChild(renderer.domElement);
renderer.render(scene, camera);
平面中添加一个方块物体对象，物体对象可以去设置它的宽高属性以及去设置它的材质属性，然后加入到网格对象中，也可以去设置方块的坐标位置。
// 平面中加入方块
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = -5;
cube.position.y = 2.5; // 0的位置，方块卡在坐标轴中间，需要设置半个高度
cube.position.z = 0;
scene.add(cube);
通过SpotLight()方法创建一个光源，并从spotLight.position.set(40, 40, 40)位置处照射我们的场景scene，不同的材质对于光源的反应各不相同(如果设置的网格线材质(MeshBasicMaterial()方法)不会对场景中的光源产生任何反应)
Three.js中有两种材质可以对于光源产生反应：MeshLambertMaterial和MeshPhongMaterial
同时需要注意的是Three.js在设置了光源后，并不会生成阴影，因为渲染阴影会消耗大量的性能。
renderer.shadowMapEnabled = true; // 这样是允许阴影映射的
这样设置之后我们还需要告知是哪个物体对象需要接受投影，因此，我们需要在方块物体对象中加入属性：
plane.receiveShadow = true;
cube.castShadow = true;
最后，在定义场景的时候，需要明确哪个光源能产生阴影，并不是所有物体对象能接受所有的光源生成阴影，因此，在点光源中加入一个属性设置：
spotLight.castShadow = true;
// 加入点光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(40, 40, 40);
spotLight.castShadow = true;
scene.add(spotLight);
image.png
