vue3.0+three.js 光源的设置不生效的问题

最新推荐文章于 2024-08-14 10:57:04 发布

努力再努力奋斗再奋斗

最新推荐文章于 2024-08-14 10:57:04 发布

阅读量3.1k

点赞数 2

分类专栏： threejs+vue3.0 文章标签：开发语言 ecmascript vue.js typescript 前端

本文链接：https://blog.csdn.net/zlguaizhang/article/details/127547848

版权

threejs+vue3.0 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在做开发时，遇到了设置光源但是不生效的问题。

经过查资料发现我设置的材质为MeshBasicMaterial基本材质，不接收光源。

解决办法：需要设置为MeshLambertMaterial，并将mesh设置为可接受光和阴影。

代码如下：

1、设置光源

    // 环境光   
    light = new THREE.AmbientLight(0xffffff);
    light.position.set(0, 0, 0);
    scene.add(light);

    // 点光源
    light2 = new THREE.PointLight(0xffffff, 1);
    light2.position.set(0, 350, 100);
    light2.castShadow = true;//表示这个光是可以产生阴影的
    light2.shadow.camera.near = 1;
    light2.shadow.camera.far = 5000;
    scene.add(light2);

2、设置模型

    let geometry = new THREE.BoxGeometry(2000, 30, 1600);
    // const material1 = new THREE.MeshBasicMaterial({ color: 0x64B5D6 });
    // 将MeshBasicMaterial修改为MeshLambertMaterial
    const material1 = new THREE.MeshLambertMaterial({ color: 0x64B5D6 });
    const material2 = new THREE.MeshLambertMaterial({ map: texture1, side: THREE.DoubleSide, color: 0xCED0D1 });
    //                    左           右        上           下        前         后
    let materialArry = [material1, material1, material2, material1, material1, material1];
    const mesh = new THREE.Mesh(geometry, materialArry);
    mesh.castShadow = true; // cast投射，方块投射阴影 
    mesh.receiveShadow = true; // 物体接收阴影
    scene.add(mesh);

这样设置以后，设置的模型就会有阴影效果和光源了。