无法使用 DragControls

Question

我是 three.js 的初学者，我正在尝试实现一项必须能够拖动 3d 模型的功能。我在这个过程中遇到了 DragControl，但我无法在我的代码中使用它。当我使用 new DragControls(objects, camera, renderer.domElement) 时出现此错误

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

当我使用 new THREE.DragControls(objects, camera, renderer.domElement) 时，我得到了这个错误

Uncaught TypeError: THREE.DragControls is not a constructor 我该如何解决这个问题？

我的完整代码如下：

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>

Answer 1

这是您的代码的更新版本。您的代码中存在一些概念性问题。

您似乎将模块导入与非模块导入混为一谈。现场示例使用传统的全局脚本（而不是 ES6 导入）。
您一次都没有渲染场景。代码现在有一个动画循环。
您添加了 AmbientLight 的实例并配置了一个不必要的位置。
灯光无论如何都没有效果，因为您使用的是未点亮的 material MeshBasicMaterial（这意味着它对灯光没有反应）。
您已经创建了 DragControls，其中 object 的第一个参数是代码中未定义的变量。此外，ctor 只接受数组而不接受单个对象。

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>

无法使用 DragControls

Unable to use DragControls

html

javascript

jquery

drag-and-drop

three.js