添加光影效果主要用到的代碼如下：
//使渲染器支持陰影貼圖 THREE.Render.shadowMapEnabled= true; //設置燈光陰影屬性 //設置燈光生成陰影 THREE.Light.castShadow= true; //如果是調試狀態，還可以把燈光的調試幫助框顯示出來 THREE.Light.shadowCameraVisible= true; //設置陰影貼圖質量 THREE.Light.shadowMapWidth = THREE.Light.shadowMapHeight = 1024*4; //設置模型屬性 //設置物體生成陰影 THREE.Mesh.castShadow = true; //設置物體接收陰影，即其它物體的陰影可以顯示在該物體上 THREE.Mesh.receiveShadow= true;
完整的測試代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="ThreeJS/build/three.js"></script>
<script src="ThreeJS/examples/js/controls/OrbitControls.js"></script>
<script src="ThreeJS/examples/js/loaders/OBJMTLLoader.js"></script>
<script src="ThreeJS/examples/js/loaders/MTLLoader.js"></script>
<script>
var _scene,_camera,_control,_render,_ambient,_spotLight;
Init();
Animate();
function Init()
{
_scene = new THREE.Scene();
_camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000);
_camera.position.z = 50;
_render = new THREE.WebGLRenderer();
//設置渲染器大小
_render.setSize(window.innerWidth,window.innerHeight);
//設置渲染器陰影可用
_render.shadowMapEnabled = true;
document.body.appendChild(_render.domElement);
//場景控制器，用以控制場景中的攝相機，方便觀察場景
_control = new THREE.OrbitControls(_camera,_render.domElement);
//添加環境光
_ambient = new THREE.AmbientLight(0xffffff);
_scene.add(_ambient);
//燈光屬性
_spotLight = new THREE.SpotLight(0xffffff);
_spotLight.castShadow = true;
_spotLight.shadowCameraVisible = true;
_spotLight.position.set(100,100,100);
//設置陰影貼圖精度
_spotLight.shadowMapWidth = _spotLight.shadowMapHeight = 1024*4;
_scene.add(_spotLight);
//加載模型
LoadModel();
}
function Animate()
{
requestAnimationFrame(Animate);
Render();
}
function Render()
{
//更新攝相機角度
_control.update();
_render.render(_scene,_camera);
}
function LoadModel()
{
//調用OBJMTLLoader加載模型
var loader = new THREE.OBJMTLLoader();
loader.load('Model/tc_tm/tc.obj','Model/tc_tm/tc.mtl',
function(obj)
{
//traverse：回調，該模型以及所有子模型均執行該函數
//相當於遍歷obj的children數組
obj.traverse(function(child)
{
if (child instanceof THREE.Mesh)
{
//設置模型生成陰影並接收陰影
child.castShadow = true;
child.receiveShadow = true;
}
});
_scene.add(obj);
});
}
</script>
</body>
</html>
效果如下圖所示：
遠觀：
近看：
