threejs中添加新的材質(zhì)和燈光以及設(shè)置陰影屬性
首先，threejs的初始化蒲稳，需要?jiǎng)?chuàng)建場景、相機(jī)江耀、渲染器
function init() {
// 創(chuàng)建場景、相機(jī)摧冀、渲染器
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;
}
創(chuàng)建一個(gè)平面
// 創(chuàng)建平面
var planeGeometry = new THREE.PlaneGeometry(60, 20); // 平面的幾何維度(給定寬系宫、高)
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); // 平面的材質(zhì)設(shè)
var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 將平面加入到網(wǎng)格對象中去
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);
容器中需要設(shè)置相機(jī)的視角
// 設(shè)置相機(jī)視角
camera.position.x = 30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
初始化操作完成建车，需要將場景、相機(jī)加入到渲染器中去
// 加入到dom中去
document.getElementById('WebGL-output').appendChild(renderer.domElement);
renderer.render(scene, camera);
平面中添加一個(gè)方塊物體對象潮罪，物體對象可以去設(shè)置它的寬高屬性以及去設(shè)置它的材質(zhì)屬性领斥，然后加入到網(wǎng)格對象中，也可以去設(shè)置方塊的坐標(biāo)位置月洛。
// 平面中加入方塊
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的位置，方塊卡在坐標(biāo)軸中間细层，需要設(shè)置半個(gè)高度
cube.position.z = 0;
scene.add(cube);
通過SpotLight()方法創(chuàng)建一個(gè)光源，并從spotLight.position.set(40, 40, 40)位置處照射我們的場景scene疫赎，不同的材質(zhì)對于光源的反應(yīng)各不相同(如果設(shè)置的網(wǎng)格線材質(zhì)(MeshBasicMaterial()方法)不會(huì)對場景中的光源產(chǎn)生任何反應(yīng))
Three.js中有兩種材質(zhì)可以對于光源產(chǎn)生反應(yīng)：MeshLambertMaterial和MeshPhongMaterial
同時(shí)需要注意的是Three.js在設(shè)置了光源后，并不會(huì)生成陰影抵卫，因?yàn)殇秩娟幱皶?huì)消耗大量的性能胎撇。
renderer.shadowMapEnabled = true; // 這樣是允許陰影映射的
這樣設(shè)置之后我們還需要告知是哪個(gè)物體對象需要接受投影，因此创坞，我們需要在方塊物體對象中加入屬性：
plane.receiveShadow = true;
cube.castShadow = true;
最后，在定義場景的時(shí)候题涨，需要明確哪個(gè)光源能產(chǎn)生陰影，并不是所有物體對象能接受所有的光源生成陰影巡雨，因此席函，在點(diǎn)光源中加入一個(gè)屬性設(shè)置：
spotLight.castShadow = true;
// 加入點(diǎn)光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(40, 40, 40);
spotLight.castShadow = true;
scene.add(spotLight);
