Requirejs 和 Threejs OrbitControls 如何让它工作？

Question

我正在努力让 OrbitControls 与 requirejs 一起工作。

我的配置如下：

我试图在这个 post 的帮助下让它工作 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 post https://github.com/mrdoob/three.js/issues/9602

的帮助

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

然后我在场景中调用 Orbit 控件

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

并得到一个错误：

Uncaught TypeError: THREE.OrbitControls is not a constructor

我不确定是否需要在 class

的定义部分调用 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 */
});

然后在class中使用的控件必须定义'orbitControls'

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

然后addEventListener需要修改为：

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

Requirejs 和 Threejs OrbitControls 如何让它工作？

Requirejs and Threejs OrbitControls how to get it working?

javascript

requirejs

three.js