javascript - Requirejs 和 Threejs OrbitControls 如何让它工作？

Question

我正在努力让 OrbitControls 与 requirejs 一起使用。

我的配置如下:

我试图在这篇文章的帮助下让它工作 RequireJS and THREE.js Orbit Controls ，但事实并非如此。

requirejs.config({
    baseUrl: './js',
    deps: ['main'],
    paths: {
        threejs: 'three/three.min',
        orbitControls: 'three/controls/OrbitControls',
    },
    shim: {
       'threejs': {
            exports: 'THREE'
        },
        'orbitControls': {
            deps: ['threejs']
        }
    }
});

然后我在 main.js 中定义了三个 再次查看 github 帖子 https://github.com/mrdoob/three.js/issues/9602 的帮助

define('threejs', function ( THREE ) {
    window.THREE = THREE;
    return THREE;
});

然后我在场景中调用轨道控件

var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

并出现错误:

Uncaught TypeError: THREE.OrbitControls is not a constructor

我不确定是否需要在类的定义部分中调用 OrbitControls

define(['orbitControls'], function() {
    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
})

但是如果我这样做，我会收到错误

Uncaught ReferenceError: THREE is not defined

我确实知道定义了“三个”，因为场景的其余部分正在按其应有的方式渲染。

我希望有人已经配置了这个并可以帮助我。

Answer 1

弄清楚如何让它发挥作用并希望帮助其他人。

首先，我需要用基本的 require Define 函数包装 OrbitControls.js

define(['threejs'], function(THREE) {
    /* OrbitControls.js */
});

然后在类中使用控件的必须定义“orbitControls”

define(['orbitControls'], function() {
    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
});

然后需要修改addEventListener，如下所示:

controls.addEventListener('change', function() {
                render();
                return false;
            });