Hello everyone, this is my first time posting on stackoverflow. For the past few days, I've been struggling to use the Three.js library (specifically version number r99). I managed to load a 3D model successfully, but it appears behind and not centered on the viewport. Can anyone help me fix this issue?
Here is the code snippet I'm using:
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 15;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var loader = new THREE.ObjectLoader();
loader.load("/models/skull.json", function(obj){
scene.add(obj);
});
var animate = function(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>Here is a screenshot of the current wireframe for reference: view wireframe
Thank you in advance for any help or suggestions.