Unable to use DragControls

问题

I am a beginner with three.js and I was trying to implement a feature where one must be able to drag a 3d model. I came across DragControl in this process and I am not able to use it in my code. when I use new DragControls(objects, camera, renderer.domElement) I get this error

capture.js:9 Uncaught ReferenceError: DragControls is not defined at capture.js:9

and when i use the new THREE.DragControls(objects, camera, renderer.domElement) I get This error

Uncaught TypeError: THREE.DragControls is not a constructor How can I solve this issue?

My complete code is as follows:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xff0000, .5 );

DragControls.install({THREE: THREE});
var controls = new DragControls( object, camera, renderer.domElement );
document.body.appendChild( renderer.domElement );




var light1 = new THREE.AmbientLight( 0xffffff );
light1.position.set(0, -70, 100).normalize();
scene.add(light1);
var light2 = new THREE.AmbientLight( 0xffffff );
light2.position.set(0, 70, 100).normalize();
scene.add(light2);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 25;
var object
controls.addEventListener( 'dragstart', function ( event ) {

	event.object.material.emissive.set( 0xaaaaaa );

} );

controls.addEventListener( 'dragend', function ( event ) {

	event.object.material.emissive.set( 0x000000 );

} );

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Locate the user</title>
    <meta name="viewport" content="width=device-width,
    user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


    <script src="js/three.min.js"></script>
    <script src="js/GLTFLoader.js"></script>

 
    <script src="js/drag-controls.js"></script>

    <style>
		body { margin: 0; }
		canvas { display: block; }
	</style>

</head>
<body>


<script src="js/capture.js"></script>
</body>
</html>

回答1:

Here is an updated version of your code. There were some conceptual issues in your code.

It seems you were mixing module vs non-module imports. The live example uses traditional global scripts (and not ES6 imports).
You did not render your scene once. The code has now an animation loop.
You added instances of AmbientLight and configured a position which is not necessary.
The lights have no effect anyway since you use MeshBasicMaterial which is an unlit material (meaning it does not react on lights).
You have created DragControls which object has first parameter which is an undefined variable in your code. Besides, the ctor only accepts an array and not single objects.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xff0000, .5 );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

var controls = new THREE.DragControls( [ cube ], camera, renderer.domElement );
document.body.appendChild( renderer.domElement );

controls.addEventListener( 'dragstart', function ( event ) {

	event.object.material.color.set( 0xaaaaaa );

} );

controls.addEventListener( 'dragend', function ( event ) {

	event.object.material.color.set( 0x000000 );

} );

animate();

function animate() {

  requestAnimationFrame( animate );
  renderer.render( scene, camera );

}

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/js/controls/DragControls.js"></script>

来源：https://stackoverflow.com/questions/60864787/unable-to-use-dragcontrols

标签

javascript

jquery

html

three.js

drag-and-drop