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中定义了THREE 再看看github帖子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

我不确定是否需要在班级的define部分调用orbitControls

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

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

Uncaught ReferenceError: THREE is not defined

我知道THREE是定义的，因为场景的其余部分正在渲染。

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

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;
            });

Requirejs和Threejs OrbitControls如何让它工作？

1 个答案: