Three.js + OrbitControls - 未捕获的类型错误：无法读取未定义的属性“addEventListener”
[英]Three.js + OrbitControls - Uncaught TypeError: Cannot read property 'addEventListener' of undefined
问题描述
I am tryint to use OrbitControls in THREE.js.
我正在尝试在 THREE.js 中使用OrbitControls 。 If I removed the line let cameraControl = new OrbitControls(camera) from below, there will be no error.如果我从下面删除了let cameraControl = new OrbitControls(camera)行，就不会出现错误。 But now, I have "Uncaught TypeError: Cannot read property 'addEventListener' of undefined"但是现在，我有“未捕获的 TypeError：无法读取未定义的属性 'addEventListener'”
I tried to change OrbitControls(camera) to THREE.OrbitControls(camera) , and then I had "Uncaught TypeError: THREE.OrbitControls is not a constructor".我试图将OrbitControls(camera)更改为THREE.OrbitControls(camera) ，然后出现“Uncaught TypeError: THREE.OrbitControls is not a constructor”。
I tried to import OrbitControls.js by using <script src=...></script> outside "module" , instead of import {OrbitControls} from...;我尝试通过在"module"之外使用<script src=...></script>来导入OrbitControls.js ，而不是import {OrbitControls} from...; , but it doesn't work, I also tried to move let cameraControl = new OrbitControls(camera) to other lines, but also doesn't work. ，但它不起作用，我也尝试将let cameraControl = new OrbitControls(camera)移动到其他行，但也不起作用。
Any ideas how to fix?任何想法如何解决？
<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 个解决方案
解决方案1
5 已采纳 2020-08-05 20:52:57
let cameraControl = new OrbitControls(camera)
Always create the controls like so:始终像这样创建控件：
let cameraControl = new OrbitControls(camera, renderer.domElement);
The second parameter is mandatory now.第二个参数现在是必需的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.