gpt4 book ai didi

JavaScript/two.js : THREE. BufferGeometry 未接收到任何光线或阴影

转载 作者:行者123 更新时间:2023-12-01 01:40:34 24 4
gpt4 key购买 nike

我正在尝试使用噪声函数生成地形,但在让 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

为了让你的方 block 出现。

关于JavaScript/two.js : THREE. BufferGeometry 未接收到任何光线或阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52454583/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com