Best of threejs — 2024
- 1
- 2
Community Picks·1y
The Best Three.js Resources in One Place
Discover a curated compilation of resources designed for building immersive 3D projects with Three.js. This collection includes tools, tutorials, and libraries to aid in Three.js development, covering areas from shaders and animation to modeling and interactivity.
- 3
Theo - t3․gg·2yMarioKart.js Blew My Mind (Open Source + React + ThreeJS)
A developer has recreated the classic multiplayer game Mario Kart using react and threejs, and the project is now open source. The game utilizes react 3 fiber, a wrapper for threejs that simplifies 3D rendering in webgl. The code is easy to read and understand, and the developer has included additional open source projects related to gamepad control and cart physics. The camera in react 3 fiber allows for easy manipulation of the game's viewpoint. The project also incorporates the use of libraries such as zustand for managing game state.
- 4
YouTube·2y
Build a 3D Ecommerce Landing Page with Next.js 14, GSAP, Three.js and Prismic - Full Course 2024
The post details a comprehensive course aimed at building an interactive 3D e-commerce landing page using Next.js, GSAP, Three.js, and Prismic. The project revolves around creating a stunning website for a fictional soda brand named Fizzy. The course covers foundational aspects using Next.js and Prismic for scalability and management, designing with Tailwind CSS, adding animations with GSAP, and incorporating 3D effects with Three.js. The post assures step-by-step guidance for users of all levels, highlighting the customizable nature of the project, and provides resources and support materials.
- 5
Cyber Devs·1y
D3 / ThreeJS Network Topology Simulation
Building a 3D Knowledge Graph for endpoint forensics can yield impressive results but organizing the endpoints clearly is challenging. Suggestions for clearer presentation methods, potentially using RTS game techniques or isometric gridding, are being sought.
- 6
- 7
uikit Documentation
Build performant 3D user interfaces with uikit using R3F and yoga. Get started with building your first layout, explore examples, and learn about components, interactivity, custom materials, responsive user interfaces, and more. Add pre-styled components to uikit with a CLI command.
- 8
Wawa Sensei·2y
Make a 3D Avatar Builder w/ Threejs and React - Part 5
Part five of the 3D avatar builder tutorial series covers creating a dress from scratch using Blender and making it compatible with the existing character builder framework. It includes steps for generating thumbnails and hiding assets based on other assets, such as preventing outfits from overlapping awkwardly. The tutorial also addresses exporting the dress as a glb file, configuring materials, and ensuring the asset animates correctly. Finally, it discusses updating the UI to reflect asset compatibility constraints, enhancing the user experience by providing visual feedback for locked items.
- 9
Build a 3D Avatar Builder with Threejs and React - Full Course
Learn how to build a fully customizable 3D avatar creator using Threejs, React, and Tailwind CSS. This guide covers setting up the backend with PocketBase for managing 3D assets, using Blender for creating and preparing 3D accessories, and integrating these elements into a React app. The project also explores using React Three Fiber for rendering 3D models and managing states with Zustand.
- 10
Threejs Tips and Inspiration·2y
[ Project + Source Code] Build a Beautiful Landing Page with React Fiber & Three.js
Learn to build a stunning landing page with 3D elements using React Three Fiber and Three.js in this free course. Create a 3D DNA chain and a transparent pill, and make them interactive in the later part. Access the live demo, source code, and full tutorial video.
- 11
Building Real-Time Global Illumination: Part 1
This guide details the foundation of building real-time global illumination using three.js, starting with a 'naive' global illumination approach. The process involves using signed distance functions (SDFs) to draw shapes on the GPU, followed by implementing raymarching to simulate how light interacts with surfaces. The goal is to create realistic lighting effects efficiently on consumer hardware. The post also touches on optimizations, such as the Jump Flood Algorithm (JFA) for distance fields, enhancing the basic raymarching technique.
- 12
How it starts - New portfolio - Devlog 1
The post covers the setup and technical structures of a game development project. It details the use of Vite for building, Three.js for rendering, and Rapier for physics. The author discusses the implementation of singletons, event handling with EventEmitter, and the integration of physics and visuals using a debug-friendly approach. Inputs are managed via a custom Inputs class, and the project anticipates future visual and performance improvements.
- 13
New portfolio - Devlog 0
The post describes the author's journey of creating and maintaining a unique interactive portfolio featuring a destructible environment and a car that can be controlled by visitors. Over the last five years, the author has transitioned to a freelance career, developed a Three.js course, participated in talks and podcasts, and adopted a new dog. The author shares the excitement and joy of working on a new version of the portfolio while balancing house projects, emphasizing the importance of maintaining a balance between digital and manual work. The post outlines ideas for new features, including interactive elements inspired by video games, dynamic environments, and user-friendly project displays.
- 14
Threejs Award Winning Project Breakdown - Windland 3D Digital City - Source code review
Explore the detailed source code review of Windland, an immersive 3D project created with Three.js, covering components like 3D city models, post-processing effects, ambient lighting systems, and particle systems. Stay tuned for a follow-up video on building a night mode.
- 15
Game Developers·1y
Building a Web-Based MMORPG - Looking for others
A developer is inviting others to join a collaborative project to create a web-based MMORPG using technologies like Flask, Python, JavaScript, Three.js, HTML, and CSS. No game development experience is required, just enthusiasm and curiosity. The environment is relaxed and open to anyone interested in coding, design, or exploration.
- 16
freeCodeCamp·2y
Build a 3D Art Gallery with Three.js
Learn how to build an interactive 3D art gallery using Three.js. This course covers scene creation, camera setup, renderer development, geometry/material/texture creation, meshing, animation, controls, real-time UI configuration, and adding VR support.
- 17
Codrops·1y
Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js
Learn how to control elements in a 3D scene using your hands, a webcam, and a web browser. The tutorial leverages MediaPipe for hand tracking and Three.js for rendering the 3D environment. It includes step-by-step instructions on setting up the hand detection, creating a WebGL scene, and managing gestures for interactive controls in a browser-based 3D space.
- 18
Threejs & React Avatar Builder Tutorial - Part 7: Post Processing
Learn how to add blooming post-processing effects, create smooth loading animations, and optimize GLB models for download in a 3D avatar builder using Three.js and React. Key steps include using the React post-processing library, enhancing mobile experience, creating a black loading screen with smooth transitions, and improving loading animations using React Spring. The tutorial concludes by demonstrating model optimization techniques for reducing file sizes using the GLTF transform API.
- 19
JavaScript Mastery·1y
Build and Deploy 3 Animated Websites with GSAP & Three.js to Land a Job | Full 10 Hour Course
Discover how to build and deploy three impressive web projects using GSAP and Three.js, designed to catch the attention of recruiters and clients. This 10-hour course guides you through creating an attractive SAS landing page, an interactive award-winning website, and a 3D portfolio. Learn advanced CSS, Tailwind CSS for responsive design, and Three.js for 3D effects, while writing clean, modular, and scalable code. By the end of the course, you'll have developed a unique skill set to build high-impact web applications and confidently showcase your projects to the world.