Three.js--关于立体图像的阴影

最新推荐文章于 2024-08-28 09:25:49 发布

三知之灵

最新推荐文章于 2024-08-28 09:25:49 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tjj3027/article/details/82108512

版权

前端专栏收录该内容

53 篇文章 4 订阅

订阅专栏

大部分资料显示当满足以下三个条件，就可以展示阴影：

渲染器开启阴影渲染：

renderer.shadowMapEnabled = true;

灯光需要开启“引起阴影”：

light.castShadow = true;

物体需要开启“引起阴影”和“接收阴影”：

mesh.castShadow = mesh.receiveShadow = true;

但是当满足以上条件时发现任然无法看到阴影，最终通过查找资料与测试发现，想要页面展示出物体的阴影还需要注意以下事项：

1.光源

能形成阴影的光源只有THREE.DirectionalLight 与 THREE.SpotLight；
2.材料
能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial
3.展示阴影的物体
阴影的展示，需要有平面接受到阴影，否则无法展示阴影，必须存在阴影投放所在的平面

示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="/****/js/3d/three.js"></script>
        <style>
            body {
                margin: 0;
            }

            canvas {
                width: 100%;
                height: 100%
            }
        </style>
    </head>

    <body>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(5, 5, 2);
            camera.position.multiplyScalar( 2 )
            camera.lookAt(new THREE.Vector3(0, 0, 0))

            var renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xcecece, 1); // 设置默认背景色
            //阴影图 接收阴影必须设置
            renderer.shadowMap.enabled = true;
            renderer.shadowMapType=THREE.PCFSoftShadowMap;
            document.body.appendChild(renderer.domElement);
            //光的颜色被应用到全局范围内的所有对象。
            scene.add( new THREE.AmbientLight( 0x505050, 0.5 ) );

            //物体
            var geometry = new THREE.BoxBufferGeometry(2, 2,2);
            //由于 角度层（ANGLE layer）的限制，在Windows平台上使用 WebGL，线宽将总是为1而不管设置的值。
            var material = new THREE.MeshPhongMaterial({
                color: 0x00ff00
            });

            var cube = new THREE.Mesh(geometry, material);
            cube.position.set(0, 0,0)
            cube.castShadow = true;
            cube.receiveShadow  = true;
            scene.add(cube);

            //阴影的投射平面
            var geometryp = new THREE.PlaneBufferGeometry( 10, 30 );
            var materialp = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
            var background = new THREE.Mesh( geometryp, materialp );
            background.rotation.x = -0.5*Math.PI;    // 绕x轴旋转90度
            background.receiveShadow = true;
            background.position.set( -4, -4, -10 );
            scene.add( background );

            //立体化 灯光使得物体不同面产生明暗，使物体立体化 也使物体产生阴影
            var light = new THREE.SpotLight( 0xffff00, 0.35 );
            light.position.set( 3, 4, 7 );
            light.castShadow = true;
            //灯光阴影
            light.shadow.camera.near=1
            light.shadow.camera.far=-4
            light.shadow.camera.left=-2
            light.shadow.camera.right= 2
            light.shadow.camera.top=2
            light.shadow.camera.bottom=-2
            //是阴影边界更加清晰
            light.shadow.camera.zoom = 4; // tighter shadow map
            scene.add( light );

            var interval = 10;
            var animate = function() {
                requestAnimationFrame(animate);
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                renderer.render(scene, camera);
            };
            animate();
        </script>
    </body>

</html>