Three.js + OrbitControls - 未捕获的类型错误：无法读取未定义的属性“addEventListener”答案

【问题标题】：Three.js + OrbitControls - Uncaught TypeError: Cannot read property 'addEventListener' of undefinedThree.js + OrbitControls - 未捕获的类型错误：无法读取未定义的属性“addEventListener”
【发布时间】：2020-11-26 01:13:34
【问题描述】：

我正在尝试在 THREE.js 中使用 OrbitControls。如果我从下面删除let cameraControl = new OrbitControls(camera) 行，就不会出现错误。但是现在，我有“Uncaught TypeError: Cannot read property 'addEventListener' of undefined”

我尝试将OrbitControls(camera) 更改为THREE.OrbitControls(camera)，然后出现“Uncaught TypeError: THREE.OrbitControls is not a constructor”。

我尝试通过在"module"之外使用<script src=...></script>而不是import {OrbitControls} from ...;来导入OrbitControls.js，但它不起作用，我也尝试将let cameraControl = new OrbitControls(camera)移动到其他行，但也没有工作。

任何想法如何解决？


<body>

<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/controls/OrbitControls.js';


let scene, renderer, camera
let cube

function init() {

  scene = new THREE.Scene()
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100)

  let cameraControl = new OrbitControls(camera)

  camera.position.set(10, 10, 10)
  camera.lookAt(scene.position)

  // cube
  cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1))
  scene.add(cube)

}

function render() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

init()
render()

</script>
</body>

【问题讨论】：

标签： javascript three.js computer-vision rendering render

【解决方案1】：

让 cameraControl = new OrbitControls(camera)

始终像这样创建控件：

let cameraControl = new OrbitControls(camera, renderer.domElement);

现在第二个参数是强制的。

【讨论】：