如何在点击按钮时以编程方式将网格集中在三个js中

Question

我有一个三js网格。点击一个按钮，网格需要基于按钮进行聚焦例如，点击视图时，顶部相机需要从three.js中的网格顶部聚焦
是否有任何内置的方法来聚焦网格，或者如何计算网格的左上角？

var scene, camera, renderer, controls;
var ROTATE = true;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 450 / 450, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.userPan = false;
controls.userPanSpeed = 0.0;
controls.maxDistance = 5000.0;
controls.maxPolarAngle = Math.PI * 0.495;
//  controls.rotateUp(Math.PI * 0.1);
// controls.autoRotate = ROTATE; //true:自動回転する,false:自動回転しない
controls.autoRotateSpeed = 4.0; //自動回転する時の速度
renderer.setSize(465, 465);
renderer.shadowMapEnabled = true;
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 150;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(100, 100, -100);
scene.add(spotLight);
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(100, 100, 100).normalize();
scene.add(light);
var light2 = new THREE.DirectionalLight(0xffffff);
light2.position.set(-100, -100, -100).normalize();
scene.add(light2);
document.body.appendChild(renderer.domElement);
var parser = new vox.Parser();
// yuusha.vox
parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/b2d06e45f6b64c3e342b724a4ec5a0c427a4ce0a/vox/hiyoko.vox").then(function(voxelData) {
var builder = new vox.MeshBuilder(voxelData, {
voxelSize: 7.0,
vertexColor: true,
optimizeFaces: false,
});
var v0 = builder.createMesh();
v0.position.y -= 50;
scene.add(v0);
});
render();
}
function render() {
controls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
init();
function topView(){
alert("topView view") 
}
function sideView(){
alert("sideview view") 
}
function frontiew(){
alert("front view") 
}

* {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
body {
background: #000;
font: 30px sans-serif;
}
button{
padding:5px 10px
}

<!-- three.min.js r87 -->
<button onClick={topView()}>top view</button>
<button onClick={frontiew()}>front view</button>
<button onClick={sideView()}>side view</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<!-- vox.js v1.0.1 -->
<script src="https://cdn.jsdelivr.net/gh/daishihmr/vox.js@1.0.1/build/vox.min.js"></script>
<!-- Old OrbitControls.js -->
<script src="https://codepen.io/siouxcitizen/pen/XWWXZZN.js"></script>

以上是演示代码。我试图强行更新相机位置，但无法工作

Answer 1

您可以使用新的THREE.Box3((.setFromObject(网格(获得轴对齐的bbox然后把相机安装到这个盒子里。这是我的代码(打字脚本((与PerspetiveCamera和OrbitControls配合使用效果很好(。

fitCameraTo(boundingBox: THREE.Box3) {
const camera = this._camera;
const objPosition = boundingBox.getCenter(new THREE.Vector3());
const objSize = boundingBox.getSize(new THREE.Vector3());
boundingBox.min.y = 0;
boundingBox.max.y = 0;
const boundingSphere = boundingBox.getBoundingSphere(new THREE.Sphere());
let dim = boundingSphere.radius * 2;
if (dim < camera.near) {
dim = camera.near;
}
const direction = THREE.Object3D.DefaultUp.clone(); // view direction
// object angular size
const fov = THREE.Math.degToRad(camera.fov);
let distance = dim / (2.0 * Math.tan(fov / 2.0));
if (camera.aspect <= 1) {
distance = distance / camera.aspect;            
}
if (distance < camera.near) {
distance = objSize.y;
}
if (distance < camera.near) {
distance = camera.near;
}
camera.position.copy(objPosition.clone().add(direction.multiplyScalar(distance)));
if (this.this._orbitControls) {
this._orbitControls.target.copy(objPosition); 
this._orbitControls.rotateLeft(Math.PI);                        
} else {
camera.lookAt(objPosition);
}
camera.updateProjectionMatrix();
}