在这里,我希望使用相机仅旋转对象,而不是围绕对象旋转整个相机。首先,对象的中心原点在可以正常工作的地方保持不变,但是一旦平移对象,原点的中心就会不同,并围绕该对象旋转相机。 https://jsfiddle.net/1ax8hf07/
var scene, renderer, camera;
var cube;
var controls;
var containerWidth = window.innerWidth,
containerHeight = window.innerHeight;
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
init();
animate();
function init() {
configureRenderer();
scene = new THREE.Scene();
configureCube();
configureCamera();
configureLight();
configureControls();
}
function configureRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function () {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
if (controls)
controls.handleResize();
}
}
function configureCube() {
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(50, 0, 0);
scene.add(cube);
cubeGeometry.center();
}
function configureCamera() {
camera = new THREE.PerspectiveCamera(45, containerWidth / containerHeight, 1, 1000);
camera.position.set(0, 160, 400);
camera.lookAt(scene);
}
function configureLight() {
pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
}
function configureControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
// controls.enabled = false;
controls.update();
controls.object.up.set(0, 0, 1);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
答案 0 :(得分:0)
我不知道是否有一种更简单的方法,但就我个人而言,当我需要移动或旋转某些东西时,我会自己完成。 在您的情况下,我建议跟踪鼠标的移动并将旋转量添加到变换矩阵中。 这就是代码上的样子
var scene, renderer, camera;
var cube;
var controls;
var containerWidth = window.innerWidth,
containerHeight = window.innerHeight;
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
init();
animate();
function init() {
configureRenderer();
scene = new THREE.Scene();
configureCube();
configureCamera();
configureLight();
configureControls();
}
function configureRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
if (controls) controls.handleResize();
};
}
function configureCube() {
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(50, 0, 0);
scene.add(cube);
cubeGeometry.center();
}
function configureCamera() {
camera = new THREE.PerspectiveCamera(
45,
containerWidth / containerHeight,
1,
1000
);
camera.position.set(0, 160, 400);
camera.lookAt(scene);
}
function configureLight() {
pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
}
function configureControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.enabled = false;
controls.update();
document.addEventListener("mousedown", onMouseDown, false);
document.addEventListener("mouseup", onMouseUp, false);
}
function onMouseDown() {
previousMousePosition.x = event.clientX;
previousMousePosition.y = event.clientY;
document.addEventListener("mousemove", onMouseMove, false);
}
function onMouseMove(event) {
var rotationX = event.clientX - previousMousePosition.x;
var rotationY = event.clientY - previousMousePosition.y;
previousMousePosition.x = event.clientX;
previousMousePosition.y = event.clientY;
if (rotationX || rotationY) {
rotateAroundWorldAxis(cube, new THREE.Vector3(0, 1, 0), rotationX * 0.01);
rotateAroundWorldAxis(cube, new THREE.Vector3(1, 0, 0), rotationY * 0.01);
}
}
function onMouseUp() {
document.removeEventListener("mousemove", onMouseMove, false);
}
function rotateAroundWorldAxis(object, axis, radians) {
var rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationAxis(axis.normalize(), radians);
rotationMatrix.multiply(object.matrix);
object.matrix = rotationMatrix;
object.rotation.setFromRotationMatrix(object.matrix);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}