I'm currently using TrackballControls within THREE.js. The issue I am facing is that the center of rotation always remains in the center of the canvas. Is there a way to adjust this and move the center of rotation upwards? Here are my failed attempts:
Attempting to move the scene up (scene.translateY(1)) - unfortunately, the center of rotation remains in the center of the canvas
Trying to move the camera up (camera.position.y = 1) - although I seem to be looking "up", the center of rotation is still fixed at the center of the canvas
Modifying the controls target (controls.target.y = 1) - this caused the entire scene to rotate so that the target was back in the center of the canvas.
window.addEventListener("DOMContentLoaded", function () {
var scene, camera, renderer, controls, sphere, red, blue, black;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
geometry = new THREE.SphereGeometry(0.1);
material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
sphere1 = new THREE.Mesh(geometry, material);
scene.add(sphere1);
geometry = new THREE.SphereGeometry(0.1);
material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
sphere2 = new THREE.Mesh(geometry, material);
scene.add(sphere2);
sphere2.position.x = 1;
geometry = new THREE.SphereGeometry(0.1);
material = new THREE.MeshBasicMaterial({
color: 0x0000ff
});
sphere3 = new THREE.Mesh(geometry, material);
scene.add(sphere3);
sphere3.position.y = 1;
controls = new THREE.TrackballControls(camera, renderer.domElement);
function loop() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(loop);
}
// camera.position.y = 1;
// controls.target.y = 1;
// scene.position.y = 1;
loop();
})canvas {
box-sizing: border-box;
border: 1px solid red;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>I'm aiming to achieve rotation around the red sphere with the sphere positioned in the upper third of the canvas instead of the center.