threejs pointLight无效问题

Question

thrrejs引用PointLight,却没有效果，求帮忙看下，用的mesh材质也没问题，页面也能渲染模型，移动点光源的坐标也没用

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const init = () => {
    console.log('three', THREE.Scene);
    const scene = new THREE.Scene();

    // box接收6个参数，x,y,z,
    const geometry = new THREE.BoxGeometry(50, 50, 50);

    // 创建材质对象，加16进制颜色
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.receiveShadow = true;
    scene.add(mesh)
    
    // 实例化相机，PerspectiveCamera\OrthographicCamera   透视相机加正交相机 
    // param: fav-上下角,aspect宽高比,near,far
    const camera = new THREE.PerspectiveCamera(50,800/600,1,3500);
    camera.position.set(200, 200, 200)
    // 相机对着物体
    camera.lookAt(mesh.position);


    // 辅助线
    const axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper)
    
    const light = new THREE.PointLight(0xffffff,1,3500)
    light.position.set(110,50,0)
    scene.add(light)
    const lightHelp = new THREE.PointLightHelper(light,10)
    scene.add(lightHelp)
    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(800, 600);
    renderer.render(scene, camera);

    // html插入canvas渲染3d
    let containers = document.getElementById('containers');
    containers.appendChild(renderer.domElement)
    
    // controls 相机控件
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change',()=>{
        renderer.render(scene, camera);
    })
}
setTimeout(()=>{
    init()
},500)

Answer 1

【以下回答由 GPT 生成】

问题标题: threejs的PointLight无效问题 问题标签: ecmascript

解决方案

在你的代码中，你已经正确地创建了一个点光源，并将其添加到了场景中。然而，点光源并没有产生预期的效果。可能有以下几个原因导致这个问题：

1. 渲染器设置错误：你需要确保渲染器能够在场景中使用阴影效果。在创建了渲染器之后，你需要设置renderer.shadowMap.enabled为true，并且根据需要将renderer.shadowMap.type设置为合适的值，如THREE.PCFSoftShadowMap。这样渲染器就可以正确地渲染阴影效果了。

javascript const renderer = new THREE.WebGLRenderer(); renderer.setSize(800, 600); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap;

1. 几何体未设置接受阴影：你需要确保几何体能够接受阴影。在创建几何体之后，设置mesh.receiveShadow为true。

javascript mesh.receiveShadow = true;

1. 材质未设置投射阴影：你需要确保材质能够投射阴影。在创建材质之后，设置material.needsUpdate为true。

javascript material.needsUpdate = true;

以上是一些常见的可能导致点光源无效的原因和对应的解决方案。你可以尝试应用这些解决方案来解决你的问题。如果问题仍然存在，请提供更多的细节或代码片段，以便我们能够更好地帮助你解决问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^