ThreeJS Play code.io 中的 3d 模型定位：

Question

如何制作模型，以便用户单击并拖动时可以从不同位置看到模型？ （就像编辑 3D 模型时一样）。我是 ThreeJS 的新手。模型和场景也正确渲染。这是我的 ThreeJS 代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000000000 );
camera.position.set(0, 2, 5);
const light = new THREE.AmbientLight( 0xffffff ); // White light
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
scene.add( light );
renderer.setClearColor(0x000000);
camera.position.z = 110; // Make some experiments with position
camera.position.y = 20; // Make some experiments with position
camera.position.x = 15; // Make some experiments with position
document.body.appendChild( renderer.domElement );

loader.load( 'plane.gltf', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );

function animate() {
    renderer.render( scene, camera );
}
renderer.setAnimationLoop(animate);

Answer 1

你可以使用 OrbitControls 那么你可以

• 旋转（设置为目标的圆点）
• 缩放（将透视相机移得更近或更远）
• 移动你所看到的（轨道控制移动相机而不是场景）

文档：https://thirdjs.org/docs/index.html?q=controls#examples/en/controls/OrbitControls
使用示例：https://thirdjs.org/examples/?q=orbit#misc_controls_orbit