使用 THREE.js、THREE.OrbitControls 和 typescript 实例化 THREE.OrbitControls 类时，未定义获取 THREE.EventDispatcher答案

【问题标题】：Getting THREE.EventDispatcher is undefined when instantiating a THREE.OrbitControls class with THREE.js, THREE.OrbitControls and typescript使用 THREE.js、THREE.OrbitControls 和 typescript 实例化 THREE.OrbitControls 类时，未定义获取 THREE.EventDispatcher
【发布时间】：2017-09-19 08:41:54
【问题描述】：

我正在尝试使用three.js 学习打字稿，但不知道为什么会出现此错误。在 init 函数中，我正在创建一个新的 THREE.OrbitControls 控制器。使用https://github.com/pinqy520/three-typescript-starter 作为设置。

收到错误：未捕获的类型错误：无法读取未定义的属性“原型”

    // three.
    import * as THREE from 'three';
    import * as ColladaLoader from 'three-collada-loader';
    import * as OrbitControls from 'three-orbit-controls';

// Set the scene size
const WIDTH: number = window.innerWidth;
const HEIGHT: number = window.innerHeight;

// Set camera attributes
const VIEW_ANGLE: number = 45;
const ASPECT: number = WIDTH / HEIGHT;
const NEAR: number = 0.1;
const FAR: number = 10000;



// Create a WebGL renderer, camera
// and a scene
const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
const scene: THREE.Scene = new THREE.Scene();

// Load a model into the scene
let monster: any;
const loader: ColladaLoader = new ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(
    '/src/monster.dae',
    (collada: THREE.ColladaModel): void => {
        monster = collada.scene;
        monster.scale.set(0.001, 0.001, 0.001);
        monster.position.set(0, 0.1, 0);

        scene.add(monster);

        init();
        animate()
    });

const init = (): void => {
    // Get the DOM element to attach to
    const container = document.querySelector('#canvas');

    // Set the position of the camera
    // and add it to the scene
    camera.position.set(0, 2, 10)
    scene.add(camera);

    //
    const gridHelper: THREE.GridHelper = new THREE.GridHelper(10, 20);
    scene.add(gridHelper);

    //
    const ambientLight: THREE.AmbientLight = new THREE.AmbientLight(0xcccccc)
    scene.add(ambientLight);

    const directionalLight: THREE.DirectionalLight = new THREE.DirectionalLight((0xffffff));
    directionalLight.position.set(0, 1, -1).normalize;
    scene.add(directionalLight);

    // Start the renderer
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WIDTH, HEIGHT);

    // Attach the renderer-supplied
    // DOM element.
    container.appendChild(renderer.domElement);

    // Create a controll class around
    // the camera
    debugger
    let controls: THREE.OrbitControls = new OrbitControls(camera, renderer.domElement);
}

// Recursive function
let animate = (): void => {

    requestAnimationFrame(animate);

    render();

}

// Recursive rendering function
let render = (): void => {
    renderer.render(scene, camera);

}

【问题讨论】：

是完全错误吗，可以显示完整的错误显示吗？
未捕获类型错误：无法读取未定义的属性“原型”。在新的 module.exports (index.js:891) 在 init (main.ts:103) 在 loader.load (main.ts:51) 在 parse (index.js:198) 在 XMLHttpRequest.request.onreadystatechange (index. js:78)
在尝试将threejs版本从76更新到86时遇到同样的问题。协调系统似乎也从76版本更改为77版本，但找不到任何提及。跨度>

标签： javascript typescript three.js webpack

【解决方案1】：

据此 post on GITHUB 该语法不再有效。所以像这样改变 OrbitControls：

	THREE.EventDispatcher.apply( this );

【讨论】：

【解决方案2】：

threejs 的最新版本对您使用模块默认导出的方式进行了更改。

所以，不要使用：

import THREE from 'three';

你应该使用：

import * as THREE from 'three';

【讨论】：

解决不了，'three-orbit-controls'是自己的包。

【解决方案3】：

我最终使用了这个： https://www.npmjs.com/package/orbit-controls-es6

需要注意的一个细微差别：

使用new OrbitControls 而不是new THREE.OrbitControls

import OrbitControls from 'orbit-controls-es6';

const controls = new OrbitControls(camera, renderer.domElement);

【讨论】：