我正在尝试使用噪声函数生成地形，但是在使BufferGeometry网格接收来自PointLight的任何光时遇到了问题。设置AmbientLight时，我可以看到BufferGeometry，但仅使用PointLight不能使用。旁边的CubeGeometry可同时使用两种类型的光源。我也希望地形接收阴影。我是否需要在网格上运行一些额外的方法？我在这里想念什么？
https://jsfiddle.net/cbo8fx1s/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://threejs.org/build/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
const renderer = new THREE.WebGLRenderer({antialias: true});
// scene.add(new THREE.AmbientLight(0xffffff));
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
window.addEventListener('load', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
createScene();
});
function createScene() {
(() => {
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array([
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
]);
// itemSize = 3 because there are 3 values (components) per vertex
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshStandardMaterial({color: 0xffffff});
const mesh = new THREE.Mesh(geometry, material);
mesh.receiveShadow = false;
scene.add(mesh);
})();
(() => {
const geometry = new THREE.CubeGeometry(10, 8, 3);
const material = new THREE.MeshStandardMaterial({color: 0xffffff});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = false;
mesh.position.y = 10;
scene.add(mesh);
})();
(() => {
const light = new THREE.PointLight(0x00ff00);
light.position.z = 500;
light.position.y = 500;
scene.add(light);
const light2 = new THREE.PointLight(0xff0000);
light2.position.z = 500;
light2.position.x = 500;
scene.add(light2);
})();
}
</script>
<style>
body {
background: #000;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>
最佳答案
您的几何没有法线。没有法线，灯光就没有要遮挡的表面信息。
加：
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.computeVertexNormals() //<-- this
为了让您的广场露面。
关于javascript - JavaScript/three.js:THREE.BufferGeometry不接收任何光或阴影，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52454583/