logo标签列表

Three.js + OrbitControls - 报错：Uncaught TypeError: 无法读取未定义的属性 'addEventListener'

javascriptthree.jscomputer-visionrenderingrender
4

我正在尝试在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不是一个构造函数”的错误提示。

我尝试使用<script src=...></script>来导入OrbitControls.js，而不是使用import {OrbitControls} from ...;语句进行导入，但并未起作用。我还尝试将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>
1个回答
11

让我们创建一个新的OrbitControls相机控制器：

let cameraControl = new OrbitControls(camera)

请始终按照以下方式创建控制器：

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接