I'm currently immersed in an academic undertaking involving the use of THREE.js and Blender.
Within my main.js file, I've crafted the necessary code to set up a scene, establish a renderer, position a camera, implement orbit controls, and more. However, there's a recurring issue where upon each webpage load, the camera is consistently fixated on a specific point designated by camera.lookAt(0,0,90). Yet, whenever I attempt to manipulate the object, the camera's focus shifts elsewhere.
Provided below is an animated gif showcasing the problem at hand: https://i.sstatic.net/luAOG.gif
The following snippet encompasses the code I am working with:
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xFFFFFF );
// Create a camera
var camera = new THREE.PerspectiveCamera(70, 600/530, 0.1, 500);
var canvas = document.getElementById('myCanvas');
// Set up a WebGL renderer with an 800x600 viewport and append it to the page
var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
renderer.setSize(600, 530); // Canvas size (black area)
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;
renderer.setPixelRatio(window.devicePixelRatio);
camera.position.x = 0;
camera.position.y = -5;
camera.position.z = -15;
// OrbitControls.js
var controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.lookAt(0, 0, 90);
// GLTFLoader (BLENDER TO THREE.JS)
var loader = new THREE.GLTFLoader();
loader.load(
'blender/backpack.glb', // File name .gltf
function(gltf){ // Add the file to the scene for rendering
scene.add(gltf.scene);
}
);
// Add light sources
var lightPoint1 = new THREE.PointLight("white");
lightPoint1.position.set(5, -5, -5);
scene.add(lightPoint1);
// Additional light sources
var lightPoint2 = new THREE.PointLight("white");
lightPoint2.position.set(-5, -5, 5);
scene.add(lightPoint2);
// Another set of light sources
var lightPoint3 = new THREE.PointLight("white");
lightPoint3.position.set(1, 1, 1);
scene.add(lightPoint3);
// Further light sources
var lightPoint4 = new THREE.PointLight("white");
lightPoint4.position.set(5, 5, 5);
scene.add(lightPoint4);
// More light sources
var lightPoint5 = new THREE.PointLight("white");
lightPoint5.position.set(-5, -5, -5);
scene.add(lightPoint5);
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Is there a way for me to maintain the initial viewpoint while manipulating the object?