Recently diving into threejs, I've encountered an issue with moving both an imported gltf model and navigating the camera around said model. My objective is to position the model at the exact center of the canvas, but currently it appears to be cut off at the top.
When I set camera.up.set(0,0,0), I achieve the desired result but at the cost of the orbit controls not functioning as intended.
Adjusting the camera.position.y only seems to cause rotation around a point, eventually leading to a top-down view of the model.
Here is the current display using the code below:
https://i.sstatic.net/BAUC8.png
This is the desired look without having to set camera.up.set(0, 0, 0)
https://i.sstatic.net/Lpzgv.png
import React, { useEffect } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import {useSelector} from 'react-redux'
import * as THREE from 'three';
const GarlicSan = () => {
useEffect(() => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
45,
266 / 400,
45,
4000
);
camera.position.set(
0, 300, 1000
)
//camera.up.set( 0, 0, 0 );
const canvas = document.getElementById('garlic');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
const updateCanvas = () => {
renderer.setSize( 266, 400);
document.body.appendChild(renderer.domElement);
};
updateCanvas();
// controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = true;
//model loader
const loader = new GLTFLoader();
loader.load('/chibi_garlic/scene.gltf', (gltf) => {
scene.add(gltf.scene)
renderer.render(scene, camera)
});
renderer.setClearColor( 0xffffff, 0);
const animate = () => {
controls.update();
renderer.render(scene, camera);
window.requestAnimationFrame(animate);
};
animate();
}, []);
const type = useSelector((state) => state.content)
return(
<>
{ type.content === 'lobby' ? (
<canvas className=' absolute z-50 left-0 right-0 mx-auto top-[20%]' id='garlic'></canvas>
) : ( <canvas className=' absolute z-50 left-1 transition-all' id='garlic'></canvas>
)}
</>
)
};<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>