Three.js Demo Collection: Simple Projects and Experiment

Showcase
1

Hello everyone!

I’d like to share a few small demos I’ve created using Three.js. These projects are simpler and focus on some interesting experiments I’ve done in 3D development. Here are the demos I’ve created:

Demos I’ve Created:

  • Pointer Grass: In this demo, I created grass that dynamically appears as the pointer moves over the ground surface. This uses InstancedMesh and custom shaders to create an interactive grass effect.
  • Grass: This demo showcases grass rendered using InstancedMesh, focusing on the efficiency and optimization of rendering large quantities of grass in the scene.
  • 3D Game: I developed a third-person camera system that follows a character from behind, offering a more engaging perspective for gameplay.
  • VR Scrollview: This demo shows how to create a scrollable panel system within VR using Three.js and WebXR, allowing users to scroll through content in the virtual world with the use of controllers.

Technologies Used:

  • Three.js: For 3D rendering and scene creation.
  • WebXR: For experimenting with VR and interaction using controllers.
  • InstancedMesh & Custom Shaders: For creating interactive grass systems and other efficient objects.
  • ECS (Entity Component System): For managing objects and interactions in the game and VR environment.

Demo and Repository:

Here are the demo and GitHub repository to check out the results:

Future Plans:

I plan to expand on these demos by adding more features, such as more realistic grass animations, improving VR interactions, and adding more interactive elements to the 3D world.

I hope these demos provide some inspiration and insight for those experimenting or learning with Three.js. Feel free to share your feedback or discuss further!

Thank you!

2 Likes