Threejs：点光源没有照亮我的几何体

Question

我正在尝试使用 Threejs 从一组三角形创建一个场景。为了获得所有三角形的形状，我使用了

BufferGeometry

，它似乎可以正确创建形状。但是，它对光照没有反应。我尝试过几种不同的材料，包括标准材料、phong 材料和兰伯特材料。运气好的话。我知道可能需要计算网格的法线，所以我尝试将

computeVertexNormals

添加到代码中，但没有成功。我也尝试过使用平面阴影，但这似乎也没有任何效果。

然后我想这可能是几何体而不是材质，所以我尝试使用 phong 材质在我的场景中添加一个旋转圆环，但它也没有被照亮。

到目前为止我的代码是这样的：

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

const canvas = document.querySelector('#c')
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000);
const renderer = new THREE.WebGLRenderer({antialias: true,castShadow:true, canvas});
const controls = new OrbitControls(camera, canvas)

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement)

const topoGeometry = new THREE.BufferGeometry();
// Fetching triangles from static file
await fetch('http://{localserver}/topography.json')
    .then((response) => response.json())
        .then((json) => {
            const vertices = new Float32Array(json.geometry.vertices.map((coord) => {
                return [coord[0], coord[1], coord[2]]
            }).flat())
            const indices = json.geometry.triangles.flat()
            topoGeometry.setIndex( indices )
            topoGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
            topoGeometry.computeVertexNormals()
        });
const  topoMaterial = new THREE.MeshStandardMaterial({
    wireframe: false,
    color: 0x00ff00,
});
const topo = new THREE.Mesh( topoGeometry, topoMaterial )
scene.add(topo)

camera.position.z = 2000;
camera.position.x = 0;
camera.position.y = 0;

const torusGeometry = new THREE.TorusGeometry(50,50)
const torusMaterial = new THREE.MeshPhongMaterial()
const torus = new THREE.Mesh(boxGeometry, boxMaterial)
torus.position.setZ(400)
scene.add(torus)


//Adding pointlight to scene
const light = new THREE.PointLight( 0xffffff, 1, 1000 );
light.position.set( 0, 0, 600 );
light.castShadow = true;
scene.add( light );

const lighthelper = new THREE.PointLightHelper(light,30, 0xffffff)
const gridHelper = new THREE.GridHelper(3000,50)
gridHelper.rotateX(Math.PI / 2)
scene.add(lighthelper, gridHelper)

function animate(){
    requestAnimationFrame(animate)
    camera.updateProjectionMatrix()
    controls.update(0.01)
    box.rotateX(0.01)
    box.rotateY(0.01)
    renderer.render(scene, camera)
}
animate()

这是生成场景的一个小 gif：

Answer 1

我看到强度非常流畅，尝试更改 1 -> 100 或靠近网格的灯光设置位置