Parallax | Three.js | Page 1

#

Hard to understand what the behavior is supposed to be

#

but.. like.. moving/orbiting the camera can be done with orbitcontrols...

or you can do it manually by adding to camera.position.. then using camera.lookAt to make it point at sometihng

#

ok right.. so.. you need to constrain the camera?

#

somehow?

#

yeah the mouse is 2d. 🙂

#

but.. there's a couple approaches.. one is to read the mouse position in mousemove then convert it to like -1 to 1.. and then plug those values into camera.rotation...

#

but it won't neccesarily be smooth.. so you might have to apply some easing..

#

are you trying to build like.. a portfolio site? or is this for something else?

#

u using any LLM?

#

k. well.. in your mousemove you read the mouse x/y divide by the window width/height...

that gets you a coordinate in 0 to 1 space..

you (subtract .5 ) * 2 to get it in -1 to 1 space...

then multiply by the number of degrees you want the camera to rotate, in radians...

#

then plug that x and y into the camera.rotation.x = y value (pitch)
and camera.rotation.y = x (yaw)

#

📎 camtest.html

#

you can use LLMs. I've been programming for ~40 years without them, and now I program almost exclusively with them.

#

took me about 5 seconds to spit that out from google gemini ^

#

nice! well you have good taste coming to threejs 😄

#

in that html i sent.. its not perfect.. there is some weirdness in the corners.. I think that can be fixed by changing the "Euler order" of the camera.rotation

#

so instead of doing pitch before yaw it does it after... so...

camera.rotation.order = "YXZ"

#

yeah that works better... i just tried it

#

📎 camtest.html

#

im sorry 🙁

#

but.. you picked a good time to learn this stuff because LLMs can teach it to you

#

Add this to make mousewheel move the camera up and down:

        window.addEventListener('wheel', (event) => 
            camera.position.add(new THREE.Vector3(0,event.deltaY *-.01,0).applyQuaternion(camera.quaternion))
    )

#

ugh formatting

#

and ya.. adding easing is what makes it nice. 🙂

#

this is very chunky/literal

#

feel free to hmu if you have any other questions.. but also.. LLMs know threejs way better than like 90% of the people here. 😄

#

myself probably included.

#

yeah well.. i don't know how to grow/spell brocolli but i love it 😄

#

in 40 years of programming.. LLMs are the most magical thing I've seen since 3d graphics started.

#

you useta have to buy books to learn this stuff

#

😄

#Parallax