如何在 three.js 中使用鼠标移动球体？ （未捕获的 ReferenceError：未定义 OrbitControls）
[英]How to move the Sphere using mouse in three.js? (Uncaught ReferenceError: OrbitControls is not defined)
问题描述
I was making a sphere that can be moved by a mouse using three.js but the output is just a black screen as shown.
我正在制作一个可以使用 three.js 鼠标移动的球体，但 output 只是一个黑屏，如图所示。
The code I used is:我使用的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 50 );
camera.lookAt( 0, 0, 0 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/kFoWvzw.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
const sphere = new THREE.Mesh( geometry, material );
const controls = new OrbitControls( camera, renderer.domElement );
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
controls.update();
scene.add( sphere );
function animate()
{
requestAnimationFrame( animate );
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
I couldn't explain why the code was unable to render the sphere.我无法解释为什么代码无法渲染球体。 What went wrong?什么地方出了错？
Thank you!谢谢！
2 个解决方案
解决方案1
0 2022-08-09 09:47:01
Like the error message indicates, you are trying to use OrbitControls but it cannot be found.如错误消息所示，您正在尝试使用OrbitControls但找不到它。 This is because it is not part of the core THREE.js library, but it is in the THREE.js examples directory so you need to import it separately.这是因为它不是核心 THREE.js 库的一部分，但它位于 THREE.js 示例目录中，因此您需要单独导入它。
See the docs or the source .请参阅文档或源代码。
解决方案2
0 2022-08-10 13:07:34
This is the code that fixed the error "Uncaught ReferenceError: OrbitControls is not defined"这是修复错误“Uncaught ReferenceError: OrbitControls is not defined”的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.min.js"></script>
<script type="module" src=".\three.js-master\three.js-master\examples\js\controls\OrbitControls.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 50 );
camera.lookAt( 0, 0, 0 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/kFoWvzw.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
const sphere = new THREE.Mesh( geometry, material );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.update();
scene.add( sphere );
function animate()
{
requestAnimationFrame( animate );
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
Just write the command as const controls = new THREE.OrbitControls( camera, renderer.domElement );只需将命令编写为const controls = new THREE.OrbitControls( camera, renderer.domElement ); instead of const controls = new OrbitControls( camera, renderer.domElement );而不是const controls = new OrbitControls( camera, renderer.domElement );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.