在这里，我试图捕获边界框的顶视图顶点，并将其推到viewcube模块的相机位置。因此，如何捕获多维数据集边界框的顶视图点，并通过单击按钮将其传递给相机。这是我尝试过的小提琴 https://jsfiddle.net/97mqhLf8/
var cube = document.querySelector('.cube');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
// scene.add(new THREE.GridHelper(10, 10));
// scene.add(new THREE.AxesHelper(5));
var geom = new THREE.BoxBufferGeometry(4, 4, 4);
var mats = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }),
new THREE.MeshBasicMaterial({ color: 0xff00ff }),
new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
new THREE.MeshBasicMaterial({ color: 0xffff00 }),
new THREE.MeshBasicMaterial({ color: 0x0000ff }),
new THREE.MeshBasicMaterial({ color: 0x00ffff })
];
var box = new THREE.Mesh(geom, mats);
scene.add(box);
scene.background = new THREE.Color(0xffffff);
var mat = new THREE.Matrix4();
var bbox = new THREE.Box3().setFromObject(box, 0xff0000);
scene.add(bbox);
console.log(bbox.min);
console.log(bbox.max);
$('#rotateRight').on('click', function (e) {
RotateBuilding('rotateRight');
});
function turn(angle) {
box.rotation.y += angle;
}
var angle = 0;
var radius = 10;
function animate() {
// Use Math.cos and Math.sin to set camera X and Z values based on angle.
camera.position.x = radius * Math.cos(angle);
camera.position.z = radius * Math.sin(angle);
angle += 1;
}
document.querySelector('#cube__face--front').addEventListener('click', () => {
alert("leftcube__face--left view");
// camera.position.set(0, 0, 12);
turn(Math.PI * 0.5);
camera.position.x = radius * Math.cos(angle);
camera.position.z = radius * Math.sin(angle);
angle += 0.01;
// roates the box and camera is not updated
console.log(box.rotation.y);
controls.update();
render();
});
document.querySelector('#cube__face--left').addEventListener('click', () => {
alert("leftcube__face--left view");
// camera.position.set(0, 0, 12);
turn(Math.PI * 0.5);
camera.position.x = radius * Math.cos(angle);
camera.position.z = radius * Math.sin(angle);
angle += 0.01;
// roates the box and camera is not updated
console.log(box.rotation.y);
controls.update();
render();
});
document.querySelector('#cube__face--bottom').addEventListener('click', () => {
alert("bottom view");
// transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
// box.rotateX(THREE.Math.degToRad(90));
// box.rotateY(THREE.Math.degToRad(180));
// box.translateZ(-50);
// camera.position.x = camera.position.y + 90*Math.PI/180;
// camera.position.set(0, -10, 0);
// distance = -25;
// camera.translateY(distance);
// controls.update();
camera.position.x = 1.1239808601379084;
camera.position.y = -9.999999999994992;
camera.position.z = 0.000009999368316182553;
// x:
// 1.1239808601379084
// e - 7
// y: -9.999999999994992
// z: 0.000009999368316182553
render();
});
document.querySelector('#cube__face--top').addEventListener('click', () => {
alert("Top view");
var distance;
camera.position.z = distance;
// rotation.x += 0.01;
distance2 = new THREE.Vector3(0, 0, 0);
distance2.copy(camera.position);
camera.position.x = distance * Math.sin(distance2.x) * Math.cos(distance2.y);
camera.position.y = distance * Math.sin(distance2.y);
camera.position.z = distance * Math.cos(distance2.z) * Math.cos(distance2.y);
});
$('#rotateRight').on('click', function (e) {
RotateBuilding('rotateRight');
});
function RotateBuilding(toShowSide) {
var selectedFace;
$.each(geom.faces, function (i, fc) {
if (fc.side == toShowSide) {
selectedFace = fc;
return false;
}
});
var vector = selectedFace.normal.clone();
var center = myMesh.geometry.boundingSphere.center.clone();
var camPos = new THREE.Vector3().addVectors(center, vector.setLength(50));
camera.position.copy(camPos);
controls.target.copy(center);
}
document.querySelector('#cube__face--top').addEventListener('click', () => {
alert("top view");
box.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI / 180));
controls.update();
render();
});
renderer.setAnimationLoop(() => {
mat.extractRotation(camera.matrixWorldInverse);
cube.style.transform = `translateZ(-300px) ${getCameraCSSMatrix(mat)}`;
renderer.render(scene, camera);
// console.log(box.rotation);
});
function getCameraCSSMatrix(matrix) {
var elements = matrix.elements;
return 'matrix3d(' +
epsilon(elements[0]) + ',' +
epsilon(-elements[1]) + ',' +
epsilon(elements[2]) + ',' +
epsilon(elements[3]) + ',' +
epsilon(elements[4]) + ',' +
epsilon(-elements[5]) + ',' +
epsilon(elements[6]) + ',' +
epsilon(elements[7]) + ',' +
epsilon(elements[8]) + ',' +
epsilon(-elements[9]) + ',' +
epsilon(elements[10]) + ',' +
epsilon(elements[11]) + ',' +
epsilon(elements[12]) + ',' +
epsilon(-elements[13]) + ',' +
epsilon(elements[14]) + ',' +
epsilon(elements[15]) +
')';
}
function render() {
camera.updateProjectionMatrix();
renderer.render(scene, camera);
controls.update();
}
function epsilon(value) {
return Math.abs(value) < 1e-10 ? 0 : value;
}