为THREEJS场景添加光影效果

浏览数：379 / 时间：2015年06月09日

添加光影效果主要用到的代码如下：

//使渲染器支持阴影贴图

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>