带有三个.js 模块的 DragControls 不适用于 Node.js 和 React答案

【问题标题】：DragControls with three.js module is not working on Node.js and React带有三个.js 模块的 DragControls 不适用于 Node.js 和 React
【发布时间】：2019-08-28 16:56:26
【问题描述】：

我正在尝试在 React 中使用 Three.js 拖放对象以更改其位置。我尝试使用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

有人知道我如何在 Node.js 上实现 DragControls，特别是在 React v16.8.4 （或更高版本） 中，三个 0.102.1 （或更高版本）?你做了什么让他们工作？有什么选择吗？

【问题讨论】：

标签： node.js reactjs ecmascript-6 three.js drag-and-drop

【解决方案1】：

在DragControls 的第二个参数上输入THREE.Scene 而不是THREE.Camera 是一个换行，在@jbyte 的帮助下：https://github.com/jbyte/three-dragcontrols/issues/2#issuecomment-480594826

我发现同时使用DragControls 和CSS3DRenderer 时会出现问题：

【讨论】：