Trigger Action When Clicking an Object in ThreeJS

Selecting objects in a 3D scene requires knowing what the mouse is pointing at, and which object you want to select. When a click occurs, raycasting can be used to determine the potential objects being clicked.
Tools:
- Blender default download: www.blender.or...
- Blender 3.4 download: download.blend...
- Visual Studio Code: code.visualstu...
-ThreeJS online editor: threejs.org/ed...
Project Code:
- github.com/Cla...
Other Tutorials:
- Export Blender to ThreeJS: • Import Blender Scene T...
- Bundle with Webpack: • Serve Only The Files Y...
Media:
"1930's Movie Camera" (skfb.ly/6SKrW) by Daz is licensed under Creative Commons Attribution (creativecommons....
"Studio Setup" (skfb.ly/opCzL) by Render Blue is licensed under Creative Commons Attribution (creativecommons....
"Wheel of Fortune" (skfb.ly/6WTIO) by nyu_grad_alley_2020 is licensed under Creative Commons Attribution (creativecommons....
"Test-01" (skfb.ly/oytrL) by maksym.lyakhov.maxlama is licensed under Creative Commons Attribution (creativecommons....

[@nawakman]

you can also use the Raycaster class from node_modules\three\src\core

[@classoutside]

I believe the Raycaster from ThreeJS, loaded in node_modules\three\src\core, is being used in the file: RayCastHelper.js on the line: const raycaster = new THREE.Raycaster();
Perhaps there is more raycaster functionality that may be beneficial from that file.
three\src\core\Raycaster.js: github.com/mrdoob/three.js/blob/dev/src/core/Raycaster.js
RayCastHelper.js: github.com/ClassOutside/Clicking_Objects_ThreeJS/blob/main/src/helpers/RayCastHelper.js

[@marcoscarvalhodev]

Will it work on mobile devices also?

[@classoutside]

I have not recently tested the compatibility of a "Click" event listener with mobile. For mobile it is often recommended to use Touch Events. These are described more here: developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
So for a mobile design, if click does not work, an event listener like "touchend" may need to be added.

[@xanaxmister9304]

Hello i like your videos but i have hard time to execute the '' npm run start-dev '' . It says start: not found

[@classoutside]

Hello! Thank you for the compliment :)
It sounds like when you run 'npm run start-dev' npm cannot seem to find the start-dev script. The start-dev script should be available in the package.json file. You can currently see this on line 19: github.com/ClassOutside/Clicking_Objects_ThreeJS/blob/main/package.json
One possibility is that your terminal is not pointing at the correct directory. When you extract the downloaded zip file, it creates a new folder with the project inside of it. The directory looks like this: C:\Downloads\Clicking_Objects_ThreeJS-main\Clicking_Objects_ThreeJS-main. When you open a terminal window, you need to make sure that you are in the same directory as the package.json. This can be seen at ua-cam.com/video/XkZSAkjM4-A/v-deo.htmlsi=1qLsn1ZIfxJxsRmg&t=106
If you are on windows, you might be able to run the command 'ls' in the terminal to print each file in the current directory/folder. If you do not see package.json, you need to change the directory. If this is the case, you may also need to run 'npm install' again.
I hope this helps, good luck!

[@svenkugler7125]

normally there shouldn't be a start prefix: only npm run dev