Я пытаюсь перетаскивать объекты, чтобы изменить их положение с помощью Three.js в React. Я пытался использовать модули three-dragcontrols
и drag-controls
Node, но функция перетаскивания, предоставляемая этими модулями, не работает. Вот моя реализация:
import * as THREE from 'three';
// DragControls.install({ THREE: THREE }); // for 'drag-controls' module only
const rendererGl = buildRendererGl();
const objects = [];
function buildRendererGl() {
const rendererGl = new THREE.WebGLRenderer({
canvas // canvas is an appended child HTML element of a DOM element
});
rendererGl.setPixelRatio(window.devicePixelRatio);
rendererGl.domElement.style.position = 'absolute';
rendererGl.domElement.style.top = 0;
return rendererGl;
}
// ... a lot more including rendererGl.setSize(width, height) upon window.onresize
// and rendererGl.render(sceneGl, camera) upon update
const geometry = new THREE.BoxGeometry(40, 40, 40);
for (let i = 0; i < 10; i++) {
const object = new THREE.Mesh(
geometry,
new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })
);
object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 600 - 300;
object.position.z = Math.random() * 800 - 400;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
sceneGl.add(object);
objects.push(object);
}
const dragControls = new DragControls( objects, sceneGl, rendererGl.domElement );
dragControls.addEventListener('dragstart', function() {
controls.enabled = false;
});
dragControls.addEventListener('dragend', function() {
controls.enabled = true;
});
В результате все работает хорошо, но перетаскивать объекты нельзя.
Я также использую import { CSS3DRenderer } from 'three-css3drenderer'
, у которого есть собственный элемент DOM, и import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
, но я не думаю, что они мешают функциональности перетаскивания, потому что THREE.Raycaster()
, который я реализовал для изменения цвета сетки при наведении, работает хорошо. Вот мой rendererCss
:
const rendererCss = buildRendererCss(containerElement);
function buildRendererCss(domElement) {
const rendererCss = new CSS3DRenderer();
rendererCss.domElement.style.position = 'absolute';
rendererCss.domElement.style.top = 0;
domElement.appendChild(rendererCss.domElement);
return rendererCss;
}
// ... and rendererCss.render(sceneCss, camera) upon update
Кто-нибудь знает, как мне реализовать DragControls
на Node.js, особенно в React v16.8.4 (или выше) с тремя 0.102.1 (или выше)? Что вы сделали, чтобы заставить их работать? Любая альтернатива?
Ввод THREE.Scene
вместо THREE.Camera
во второй аргумент DragControls
— это перенос с помощью @jbyte: https://github.com/jbyte/three-dragcontrols/issues/2#issuecomment-480594826
И я понял, что есть проблема, когда вы используете DragControls
и CSS3DRenderer
одновременно: