DragControls с модулем three.js не работает на Node.js и React

Question

Я пытаюсь перетащить объекты, чтобы изменить их положение с помощью 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 (или выше) ? Что вы сделали, чтобы заставить их работать? Любая альтернатива?

Answer 1

Ввод THREE.Scene вместо THREE.Camera для второго аргумента DragControls является переносом с помощью @jbyte: https://github.com/jbyte/three-dragcontrols/issues/2#issuecomment-480594826

И я понял, что естьпроблема при одновременном использовании DragControls и CSS3DRenderer:

• https://github.com/jbyte/three-dragcontrols/issues/2#issuecomment-480602491
• https://discourse.threejs.org/t/dragcontrols-with-css3drenderer/783?u=5ervant