Recently delving into the world of three.js, I decided to experiment with importing models using the gltf loader. Upon loading a specific 3D model, my scene transformed to showcase a mesmerizing view, as depicted https://i.sstatic.net/l4jNy.png.
However, without the model in place, the background took on a whole new appearance after enabling alpha true and adjusting the canvas background to display a gradient, as seen https://i.sstatic.net/E3c7s.jpg.
The object I'm attempting to load appears like this https://i.sstatic.net/SHeEh.png.
I believe the discrepancy in the scene might be related to the camera angle or object scale. Below is the complete JavaScript code I am working with.
const loader = new GLTFLoader();
const gui = new dat.GUI()
loader.load('orange.glb', (gltf) => {
browserscene.add(gltf.scene)
gltf.scene.position.x = 10
gltf.scene.position.y = 20
gltf.scene.rotation.x = 0.2
gltf.scene.rotation.z = 0.8
gltf.scene.scale.x = 3
gltf.scene.scale.y = 3
});
// Debug
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const browserscene = new THREE.Scene()
// Materials
const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color(0xFFFE00)
// Lights
var light = new THREE.HemisphereLight(0x404040, 0xFFFFFF, 10);
browserscene.add(light);
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () => {
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
browserscene.add(camera)
const renderer = new THREE.WebGLRenderer({
canvas: canvas, antialias: true, alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const animate = () => {
// Render
requestAnimationFrame(animate)
renderer.render(browserscene, camera)
}
animate()