Невозможно использовать DragControls - PullRequest
Новая
       10

Невозможно использовать DragControls

1 голос
/ 26 марта 2020

Я новичок с тремя. 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>

1 Ответ

2 голосов
/ 26 марта 2020

Вот обновленная версия вашего кода. В вашем коде были некоторые концептуальные проблемы.

  • Кажется, вы смешивали модуль с немодульным импортом. Живой пример использует традиционные глобальные сценарии (а не импорт ES6).
  • Вы не рендерили свою сцену ни разу. Теперь в коде есть анимация l oop.
  • Вы добавили экземпляры AmbientLight и настроили положение, в котором нет необходимости.
  • В любом случае источники света не действуют, поскольку вы используете 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>
...