Hi
I have a problem when resizing the viewport and my imported 3D model doesn’t “save” the original proportion. I tried a lot of things but the same results.
This is the website where u can see the problem: https://suarezdesignstest.netlify.app/
I have to say that I involved with this project without knowing javascript (Only the very basic), so maybe there are an error or mistake in my code. Even though I didn’t know much about javascript I managed to get that result. Thanks in advance for the help. Appreciate it
This is my code:
// Scene
const scene = new THREE.Scene()
// Camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight)
camera.position.z = 5
scene.add(camera)
//Lights
const light = new THREE.SpotLight( "white", 5)
light.position.set(0,0,5)
scene.add(light)
const uplight = new THREE.SpotLight( "white", 5)
uplight.position.set(0,10,5)
scene.add(uplight)
const dolight = new THREE.SpotLight( "white", 5)
dolight.position.set(0,-10,5)
scene.add(dolight)
const backlight = new THREE.PointLight( "white", 100)
dolight.position.set(0,0,-50)
scene.add(backlight)
//Blue
const aLight = new THREE.PointLight( 0x1386fb, 10)
aLight.position.set(5,5,3)
scene.add(aLight)
const bLight = new THREE.PointLight( 0x1386fb, 10 )
bLight.position.set(-5,-5,3)
scene.add(bLight)
//Pink
const arLight = new THREE.PointLight( 0xbd86fb, 10 )
arLight.position.set(-1,5,3)
scene.add(arLight)
const brLight = new THREE.PointLight( 0xbd86fb, 10 )
brLight.position.set(1,-5,3)
scene.add(brLight)
//Cursor_follow
const cursor = { x: 0, y:0 }
window.addEventListener("mousemove", (event) =>{
cursor.x = event.clientX / window.innerWidth - 0.5
cursor.y = event.clientY / window.innerHeight - 0.5
})
//3D_Logo_Model
const loader = new THREE.GLTFLoader();
loader.load( '/images/3D_logo.glb', function ( gltf ) {
gltf.scene.scale.x = 1
gltf.scene.scale.y = 1
gltf.scene.scale.z= 1.5
gltf.scene.position.z = 0
const y = () => {
window.requestAnimationFrame(y)
const rotatex = cursor.x
const rotatey = cursor.y
gltf.scene.rotation.x = rotatey / 4
gltf.scene.rotation.y = rotatex / 4
}
y()
scene.add(gltf.scene)
})
//Resize_canvas
window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth , window.innerHeight )
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectMatrix
})
//Renderer
const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true})
renderer.setSize( window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio * 2)
document.body.append(renderer.domElement)
const constrender = () =>{
window.requestAnimationFrame(constrender)
renderer.render(scene, camera)
}
constrender()