Raycasting Failing After Moving Objects? | Three.js | Page 1

thick timber Jul 29, 2024, 11:37 PM

#

Hey guys, I am having issues with my raycasting intersecting with the correct object when I move the object up by 5 units on the y-axis. It seems like the bounding box is left behind and the box moves.

When I hover over the object, it is supposed to highlight the object red. Otherwise, it reverts back to its original color.

Gif 1: Shows how the bounding box and boxes are not synchronized.
https://gyazo.com/159021279e237b386281e0e6abd41a57

I thought this was due to the bounding boxes not calculating correctly, so I traversed through each child every render and made sure to calculate the bounding box/sphere – still did not fix the problem.

Here is my code: (please forgive the spaghatti, this is all for practice and it's been a messy because of this raycast failing... I started learning Three.js last week.)

📎 main.js

Gyazo

Gyazo Screen Video

▶ Play video

sonic scroll Jul 30, 2024, 12:28 AM

#

Your code looks correct. This should be working.
Definitely remove the stuff where you're recomputing bounding boxes every frame. 🙂 I suggest putting this into a glitch or a codepen to reproduce it.. but..

#

the way you're code is set up looks correct to me so, maybe porting it to a codepen or glitch will help you find the issue, and if it persists in codepen or glitch, then we can help you with it.

Make sure you're runninng latest threejs and not mixing library versions..
check for errors/warnings in the console blablabla

thick timber Jul 30, 2024, 12:41 AM

#

sonic scroll the way you're code is set up looks correct to me so, maybe porting it to a code...

Okay, thanks for looking at it. I'll try to make it in CodePen tomorrow and see if the problem persists.

#

Such a weird issue lol.

thick timber Aug 8, 2024, 10:38 PM

#

sonic scroll Your code looks correct. This should be working. Definitely remove the stuff whe...

Hey thrax, sorry for the late update. I finally got around to putting this in a CodePen I am facing the same weird issue again for some odd reason.

CodePen

Idealist Developer

ThreeJS Practice

...

sonic scroll Aug 9, 2024, 6:30 AM

#

@thick timber I think i found the issue... In pointermove, the witch-chant to convert to raycaster coordinates was wrong.

You had:

pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = (event.clientY / window.innerHeight) * 2 - 1;

instead of:

pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

😄

thick timber Aug 9, 2024, 6:30 AM

#

Does it actually work fine when you changed the sign?

sonic scroll Aug 9, 2024, 6:30 AM

#

Another issue that wasn't actually an issue but could become one in the future... was you were loading the OrbitControls from one version of threejs and threejs version from a different place/different version

#

its working now in the codepen

#

https://codepen.io/Idealist-Developer/pen/Yzoxvrj

CodePen

Idealist Developer

ThreeJS Practice

...

#

wups 1 sec.. i have to save it

thick timber Aug 9, 2024, 6:31 AM

#

sonic scroll Another issue that wasn't actually an issue but could become one in the future.....

ya, but that was for CodePen which all I did today lol. I was coding it on my VSC and put it into CodePen to help debug.

thick timber Aug 9, 2024, 6:32 AM

#

sonic scroll wups 1 sec.. i have to save it

Wait, so does CodePen let just anybody make changes and save them?

sonic scroll Aug 9, 2024, 6:32 AM

#

yea. so.. yea its the pointer calc in pointermove

#

no it doesn't.. I have to save it, and its asking me for my login, and i dont remember it.

#

but.. 1 sec.. imma throw it into a glitch.

#

codepen and jsfiddle actually suck really bad

thick timber Aug 9, 2024, 6:33 AM

#

I updated it but the raycast now just doesn't even happen

sonic scroll Aug 9, 2024, 6:33 AM

#

youre missing a minus

#

😄

thick timber Aug 9, 2024, 6:34 AM

#

Omg

sonic scroll Aug 9, 2024, 6:34 AM

#

i know. ive gotten bit by that little piece of code many times before

thick timber Aug 9, 2024, 6:34 AM

#

Oh it works now. I had no idea that it was that complicated, I copied that onPointerMove from basically other forums/code examples

sonic scroll Aug 9, 2024, 6:34 AM

#

https://threejs.org/docs/#api/en/core/Raycaster

thick timber Aug 9, 2024, 6:35 AM

#

Oh, except I didn't copy paste but wrote it down.... lol

sonic scroll Aug 9, 2024, 6:35 AM

#

yaa all good.

thick timber Aug 9, 2024, 6:35 AM

#

the one time my "good habit" bites me in the butt

sonic scroll Aug 9, 2024, 6:35 AM

#

😄

thick timber Aug 9, 2024, 6:35 AM

#

Thank you so much, I was stressing over nothing.

sonic scroll Aug 9, 2024, 6:35 AM

#

u got it working in yours?

thick timber Aug 9, 2024, 6:35 AM

#

Yes, it works flawlessly.

sonic scroll Aug 9, 2024, 6:35 AM

#

I know the feeling.

#

even after doing threejs for 10 years, I still know the feeling 😄

#

that's the kind of thing that would bite me in a job interview.

thick timber Aug 9, 2024, 6:36 AM

#

Really cool to see my code actually react to my mouse like it's supposed to 😭 I have and had such bad code to try and make it work and manage everything that is getting hovered... until I just stuck to dealing with 1 part at a time instead of using an array to manage all that were hovered or whatever..

sonic scroll Aug 9, 2024, 6:37 AM

#

oh greaet. I logged into codepen and it lost my changes.

thick timber Aug 9, 2024, 6:37 AM

#

three.js is really cool though, I've only used it for 2 weeks and am learning it to make a portfolio website.

sonic scroll Aug 9, 2024, 6:37 AM

#

I fixed one other thing though, and that was how you were importing stuff

thick timber Aug 9, 2024, 6:38 AM

#

sonic scroll oh greaet. I logged into codepen and it lost my changes.

Makes sense lol, I thought people couldn't save changes unless they were the owner of the CodePen

sonic scroll Aug 9, 2024, 6:38 AM

#

let me throw it in a glitch and you can see

thick timber Aug 9, 2024, 6:38 AM

#

Okay.

sonic scroll Aug 9, 2024, 6:38 AM

#

youcan't save the changes, but whats supposed to happen is when you hit Save, it forks it to your account with your chhanges and generates a new link

#

but codepen sucks, so instead it just deleted my changes.

thick timber Aug 9, 2024, 6:39 AM

#

Oh, that makes sense lol. I wonder how CodePen manages to hold all these... if it has to fork each time, it must be having a lot of servers.

sonic scroll Aug 9, 2024, 6:45 AM

#

https://glitch.com/edit/#!/stitch-billowy-chef

Glitch Code Editor ･ﾟ✧

Simple, powerful, free tools to create and use millions of apps.

#

@thick timber I put the code in a glitch.. check out how the "importmap" is set up.. in the HTML, and how things are then imported in script.js

those URLs can then be pointed to cdn or whatever you want, but it lets you change the routes in one spot instead of modifying source files.

thick timber Aug 9, 2024, 6:48 AM

#

But if you import in html, how does it get a reference to it in js?

sonic scroll Aug 9, 2024, 6:49 AM

#

importmap is like a global url remapping...

so we're declaring "three" to point to threejs.org and "three/addons/" to point to threejs.org/examples/jsm

#

then in the script
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

thick timber Aug 9, 2024, 6:49 AM

#

Oh, like this?

sonic scroll Aug 9, 2024, 6:49 AM

#

ya

#

i sent u permission to edit on that glitch

#

you may have to create an account and log in

#

but then we can both edit. it's pretyt nice

thick timber Aug 9, 2024, 6:50 AM

#

That's kinda what I had in my VSC

sonic scroll Aug 9, 2024, 6:50 AM

#

yup.

thick timber Aug 9, 2024, 6:50 AM

#

But CodePen was weird >_>

sonic scroll Aug 9, 2024, 6:51 AM

#

ya

#

also the build tool can add some complexity there.. like vite or whatever

thick timber Aug 9, 2024, 6:51 AM

#

Thanks so much, I never knew about import maps. I'll use them next time in CodePen to let me organize stuff better.

sonic scroll Aug 9, 2024, 6:51 AM

#

im trying to convert you to glitch instead of codepen 😄

thick timber Aug 9, 2024, 6:52 AM

#

does "three/addons/" import everything in that folder?

sonic scroll Aug 9, 2024, 6:52 AM

#

both suck, but glitch sucks less

thick timber Aug 9, 2024, 6:52 AM

#

sonic scroll im trying to convert you to glitch instead of codepen 😄

Lol, I've never used it but the light mode is blinding me.

sonic scroll Aug 9, 2024, 6:52 AM

#

no it Only creates a mapping.

#

It has dark mode

#

once you create an account i thjink

#

thick timber Aug 9, 2024, 6:53 AM

#

Nah, I didn't need an acc

#

The dark mode looks cooler.

sonic scroll Aug 9, 2024, 6:53 AM

#

well you will to be able to edit at the same time as me. it works like google docs

#

reaaallly useful for working through small probs

thick timber Aug 9, 2024, 6:53 AM

#

I think Glitch does look better than CodePen b/c it has single panels instead of multiple panels side to side and has the proper names of the files.

sonic scroll Aug 9, 2024, 6:53 AM

#

when you can watch how someone figures out your issue

#

yes it has single files.. easy to upload assets, It automatically stores them in a github repo, and you can Export it to a working standalone project .zip file

thick timber Aug 9, 2024, 6:54 AM

#

sonic scroll reaaallly useful for working through small probs

That's really awesome, it's like those real-time coding rooms from back in the day

sonic scroll Aug 9, 2024, 6:54 AM

#

yes

#

📎 stitch-billowy-chef-2024-08-09_065440.tgz

#

thats the project as a runnable app

thick timber Aug 9, 2024, 6:55 AM

#

How did you launch it in the browser?

#

Ah, preview pane?

sonic scroll Aug 9, 2024, 6:55 AM

#

I just serve the folder with my local webserver, node in my case

#

Yes open the preview pane

#

then as you edit, it autorefreshes

#

its way more dynamic

thick timber Aug 9, 2024, 6:57 AM

#

I just logged in with Google but how do you change the UI to dark mode?

#

I feel like dark should be the default, I am getting flash banged lol

sonic scroll Aug 9, 2024, 6:59 AM

#

settings on the upper left

#

Toggle light/dark theme

#

sometimes when joining for the first time, or getting edit permissions, you have to ctrl-R

#

i dont see you in there anymore so maybe you remixed or smth

#

https://glitch.com/edit/#!/stitch-billowy-chef

Glitch Code Editor ･ﾟ✧

Simple, powerful, free tools to create and use millions of apps.

thick timber Aug 9, 2024, 7:24 AM

#

sonic scroll settings on the upper left

I meant for the app outside the code editor

sonic scroll Aug 9, 2024, 7:24 AM

#

oh hehe yeah i dunno.

thick timber Aug 9, 2024, 7:25 AM

#

What does doing "three/addons/" do here? It's a way to access that folder?

sonic scroll Aug 9, 2024, 7:25 AM

#

im typing to you in the glitch 😄

#

Yes.

#Raycasting Failing After Moving Objects?