时间戳

首页 > 解决方案 > 在threejs中获取相机导航的问题

javascript - 在threejs中获取相机导航的问题

问题描述

在此处输入图像描述我正在尝试使用 THREE.OrbitControls 在threejs 中开发相机导航功能。即使我遵循指南，我似乎也无法让它工作。

我的小提琴代码的链接是：https ://jsfiddle.net/Matty1/uc671jbL/18/

它在 javascript 的第 18/19 行：

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

任何意见，将不胜感激。

标签： javascriptthree.js

解决方案

You have included OrbitControls from a relative path in your fiddle. Try it like so:

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x19d7f8);

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,5);

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

window.addEventListener('resize', function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width/height;
    camera.updateProjectionMatrix;
} )

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

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();
body {
   margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.124/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124/examples/js/controls/OrbitControls.js"></script>

推荐阅读