代码之家 › 专栏 › 技术社区 › Sebi95

三DragControl不是构造函数错误

drag-and-drop javascript

Sebi95 · 技术社区 · 7 年前

我试着用三个。我的应用程序的DragControls构造函数分为三个部分。js。我运行了npm install和npm install三个dragcontrols,接收到一条消息,即依赖项已添加到包中。当我尝试使用新的三。DragControls i收到错误: “THREE.DragControl不是构造函数”

代码:

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
var objects = [];

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 1000;

var startColor;

function init() {
    scene.add( new THREE.AmbientLight( 0x0f0f0f ) );

    var light = new THREE.SpotLight( 0xffffff, 1.5 );
    light.position.set( 0, 500, 2000 );

    scene.add(light);

    var geometry = new THREE.BoxGeometry( 40, 40, 40 );
    var geometry = new THREE.SphereGeometry( 40, 40, 40 );

    for (var i = 0; i < 100; i++) {
        var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { 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.castShadow = true;
        object.receiveShadow = true;

        scene.add( object );

        objects.push( object );
    }

    var controls = new THREE.DragControls( objects, camera, renderer.domElement );
    controls.addEventListener( 'dragstart', dragStartCallback );
    controls.addEventListener( 'dragend', dragendCallback );
}

function dragStartCallback(event) {
    startColor = event.object.material.color.getHex();
    event.object.material.color.setHex(0x000000);
}

function dragendCallback(event) {
    event.object.material.color.setHex(startColor);
}

function animate() {
    requestAnimationFrame( animate );

    renderer.render(scene, camera);
};

init();
animate();

2 回复 | 直到 7 年前

Ian Paschal 7 年前

可能的答案(由于SO的愚蠢规则,无法将此作为评论发布):

请共享您导入/需要模块的代码部分。在许多情况下,这些模块为三个。js您必须将它们连接到 THREE 对象

例如:

// Doesn't work:
THREE.DragControls = require("three-drag-controls");

// Does work:
THREE.DragControls = require("three-drag-controls")(THREE);

这是因为模块实际上是一个返回控件构造函数的函数。如果不首先使用 三 作为一个参数,您会得到“THREE.DragControl不是构造函数”。

Jonathan Bareket 5 年前

对于那些试图跟随“三”的人来说。js Drag and Drop Tutorial’如果遇到上述错误消息,解决方案是安装拖拽控制模块并遵循repo上的使用说明( https://www.npmjs.com/package/drag-controls ),即将导入更改为:

import * as THREE from 'three';
import DragControls from 'drag-controls'
DragControls.install({THREE: THREE})

然后通过以下方式创建DragControl实例:

var controls = new DragControls( objects, camera, renderer.domElement );

之后一切都会好起来的。希望这能为你们节省一些时间!