Я хотел бы сделать что-то довольно простое с three.js. Я хотел бы создать куб на «земле»: куб будет излучать синий свет, и я хотел бы видеть отражение на земле.
Я искал и нашел meshLambertMaterial в документации Three.js, и он включает в себя свойства излучательной и отражательной способности.
Итак, я сделал свой код следующим образом:
import * as THREE from '../lib/three.module.js';
// Set up
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, -7, 4);
camera.rotation.x = Math.PI / 2;
// Ground
const ground = new THREE.PlaneGeometry(5, 5, 5);
const material = new THREE.MeshLambertMaterial({
color: 'white',
reflectivity: 1,
});
const mesh = new THREE.Mesh(ground, material);
scene.add(mesh);
// Modelling
const geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(1, 1, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(1, 0, 1),
new THREE.Vector3(1, 1, 1),
new THREE.Vector3(0, 1, 1),
);
console.log(geometry.vertices);
geometry.faces.push(
// front
new THREE.Face3(0, 1, 5),
new THREE.Face3(0, 5, 4),
// right
new THREE.Face3(1, 2, 6),
new THREE.Face3(1, 6, 5),
// back
new THREE.Face3(2, 3, 7),
new THREE.Face3(2, 7, 6),
// left
new THREE.Face3(0, 4, 7),
new THREE.Face3(0, 7, 3),
// top
new THREE.Face3(4, 5, 6),
new THREE.Face3(4, 6, 7),
// bottom
new THREE.Face3(0, 3, 2),
new THREE.Face3(0, 2, 1),
);
const material2 = new THREE.MeshLambertMaterial({
emissive: new THREE.Color(0.2, 0.3, 0.3),
emissiveIntensity: 1,
});
const cube = new THREE.Mesh(geometry, material2);
cube.position.x = -0.5;
cube.position.z = 0;
// Add the cube to the scene
scene.add(cube);
renderer.render(scene, camera);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Куб излучает синий свет, как и планировалось, но земля ничего не отражает, даже если его коэффициент отражения равен 1, и он даже не появился на экране.
Может кто-нибудь, пожалуйста, помогите мне понять, что я могу сделать, чтобы моя идея сработала? Я искал в сети, но все «решения», которые я нашел, заключались в использовании трюков с зеркалом камеры, и я не хочу этого.
Спасибо.
1 ответ
Эффект, которого вы пытаетесь достичь, требует гораздо больше работы. Атрибут reflectivity
материала работает только для отражения карт окружения. Если вы хотите отразить динамические объекты, которые вы добавили в сцену, вам нужно сначала визуализировать то, как они выглядят в отражении, а ЗАТЕМ вы можете визуализировать то, как сцена выглядит с точки зрения камеры. В разделе примеров есть два подхода, которые вы можете использовать:
- пример зеркала требует использования
Reflector
и добавьте его на сцену. Затем он автоматически позаботится о рендеринге для вас. - В динамическая кубическая карта пример использует
CubeCamera
к- Визуализируйте сцену с точки зрения зеркала.
- Примените результат рендеринга к отражающим объектам.
- Визуализация сцены с точки зрения камеры.
Судя по вашему описанию, вы должны использовать пример № 1, к тому же его проще реализовать. Но решать вам.
Похожие вопросы
Новые вопросы
three.js
Three.js - это легкая кросс-браузерная библиотека JavaScript / API, используемая для создания и отображения трехмерной компьютерной графики в веб-браузере. Скрипты Three.js могут использоваться вместе с элементом HTML5 canvas, SVG или WebGL.