Outline object in ThreeJS
Outlining items your mouse is hovering over can be a great way to indicate that they can be clicked for some action. In ThreeJS, we can use raycasting and post processing effects to highlight objects with an outline when the mouse hovers over them!
Tools:
Blender default download: https://www.blender.org/download/
Blender 3.4 download: https://download.blender.org/release/...
Visual Studio Code: https://code.visualstudio.com/download
-ThreeJS online editor: https://threejs.org/editor/
Project Code:
https://github.com/ClassOutside/Highl...
Other Tutorials:
Export Blender to ThreeJS: • Import Blender Scene To Three JS - Using T...
Remove Armature: • Remove Armature From Mesh - Delete Bones i...
Raycasting in ThreeJS: • Hover Over Objects in ThreeJS - Raycast
Bundle with Webpack: • Serve Only The Files You Need With Webpack...
Effect Composer Details: https://threejs.org/docs/#examples/en...
Render Pass Details: https://threejs.org/docs/#manual/en/i...
Media:
"Button Round Flat" (https://skfb.ly/oCvrK) by The Lost Sock is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/b....
If this was helpful, consider leaving a comment or supporting me on Ko-fi: https://ko-fi.com/classoutside
===== TIMESTAMPS =====
0:00 Introduction and Requirements
0:40 Preparing and Exporting the 3D Scene in Blender
2:03 Setting Up the JavaScript Project and Installing Libraries
3:15 Setting Up Outline Effect and Raycasting for Hover
5:33 Running the Project and Demonstration
5:59 Wrap Up and Comments