【Threejs】关于物体在场景中的阴影问题

最新推荐文章于 2024-05-14 07:41:13 发布

哲siegel

最新推荐文章于 2024-05-14 07:41:13 发布

阅读量919

点赞数

分类专栏：三维仿真文章标签： javascript 前端开发语言 three.js

本文链接：https://blog.csdn.net/qq_43470484/article/details/128547044

版权

三维仿真专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、基础知识

1、摄像机的属性结构

先了解一下摄像机THREE.Camera的四个基本参数

2、渲染器设置

render需要开启阴影渲染，这一点是大前提：

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.setClearColor(0x274F80, 1);
        renderer.shadowMap.enabled = true;//开启渲染
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        document.body.appendChild(renderer.domElement);

3、光源选择

只有DirectionalLight（平行光）、PointLight（点光源）、RectAreaLight（平面光源）、SpotLight（聚光灯）这4种光源才能投谁阴影。
如若不知道几种光的特性，可以在场景中添加辅助线来查看（这里以聚光源为例）：

        //添加一个聚光源
        var spotLight = new THREE.SpotLight(SpotColor);
        ......//一些参数设置（位置、角度、阴影等...后面再提）
        scene.add(spotLight);
        //光源辅助线
        var SpotLightHelper = new THREE.SpotLightHelper(spotLight);
        scene.add(SpotLightHelper);

接下来还需要开启光源的阴影投射属性（切记这必须在添加辅助线之前完成）：

        spotLight .castShadow = true;
        spotLight .shadow.camera.near = 10;
        spotLight .shadow.camera.far = 1400;
        spotLight .shadow.camera.fov = 60;

如果阴影投射范围不够大还可以通过改变distance属性延长，比如：

        point1.distance=1700;

这时我们还可以添加查看阴影范围的辅助线：

        var point1CameraHelper = new THREE.CameraHelper(point1.shadow.camera);
        scene.add(point1CameraHelper);

4、物体属性

要制造阴影需要接收面和投影面，这时要将物体的属性castShadow和receiveShadow设置为true，因为场景中光源下的物体要接受阴影也要朝其他接收面制造阴影。
这时需要注意，物体通常都是网格模型mesh，而一个组group不能通过设置属性使物体接收或投影。
示例：

        var downmesh1 = new THREE.Mesh(downgeom1, material);
        downmesh1.position.set(-150,-20,0);
        downmesh1.receiveShadow = true;
        downmesh1.castShadow=true;