Ad

THREE.DragControls Is Not A Constructor Error

- 1 answer

I am trying to use Three.DragControls constructor for my application in three.js. I run npm install and npm install three-dragcontrols, receiving the message the dependency was added to the package. When i am trying to use new Three.DragControls i receive the error: "THREE.DragControls is not a constructor"

The code:

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();
Ad

Answer

Possible answer (can't post this as a comment because of SO's stupid rules):

Please share the part of your code in which you import/require the module. In many cases with these modules for Three.js you have to attach them to the THREE object.

For example:

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

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

This is because the module is in fact a function which returns the constructor for the controls. If you don't run the function first with THREE as an argument, you get "THREE.DragControls is not a constructor".

Ad
source: stackoverflow.com
Ad