Я экспериментирую с созданием ландшафта с шумовыми функциями, но у меня возникают проблемы с получением сетки 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>