Ad

DragControls With Three.js Module Is Not Working On Node.js And React

I'm trying to drag and drop objects to change their positions with Three.js in React. I tried to use three-dragcontrols and drag-controls Node modules but the dragging functionality that's brought by those modules are not working. Here's my implementation:

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;
});

The result is like, everything is working well but can't drag any draggable objects.

I'm also using import { CSS3DRenderer } from 'three-css3drenderer' that has its own DOM element and import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' but I don't think they're hindering the drag functionality because the THREE.Raycaster() that I've implemented to change a mesh color upon hovering is working well. Here's my 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

Does anybody know how can I implement DragControls on Node.js, specially in React v16.8.4 (or higher) with three 0.102.1 (or higher)? What did you do to make them work? Any alternative?

Ad

Answer

Inputing a THREE.Scene instead of a THREE.Camera on the second argument of DragControls is a wrap, with the help of @jbyte: https://github.com/jbyte/three-dragcontrols/issues/2#issuecomment-480594826

And I've figure out that there's a problem when you use DragControls and CSS3DRenderer at the same time:

Ad
source: stackoverflow.com
Ad