/r/threejs

Photograph via snooOG

Three.js is a cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser using WebGL

About

3D + JavaScript = Great fun! 3D in JavaScript is much easier using the three.js 3D engine. The aim of the project is to create a lightweight 3D engine with a very low level of complexity.

Originally developed by Mr.doob, blog. Many developers have contributed to this excellent library.

Got any cool demos, tutorials, or any questions? Submit them above!

Links

/r/threejs

27,285 Subscribers

3

The history of threejs

If one were to write an article, or maybe even a book on the history of threejs, where would one start doing the research and gathering information?

Obviously a lot of people have been involved in this project but some seem to have disappeared over the years.

I’m curious for example what happened to AlteredQualia, I haven’t really been around for those earliest days of threejs. I feels that this person had contributed tremendously but has since vanished with little to no trace remaining.

I’m interested in the companies that contributed the most to threejs. I know that giants like google have been heavily involved since the beginning and might be paying for it even today. On the other hand there are smaller companies like ThreeKit that contributed a lot. Im curious if these giants had influence on the direction that threejs took. At one point for example I think three started focusing heavily on VR rather than just generic “graphics, but on the web”.

I don’t understand the react ecosystem built around threejs, it feels like it’s waaaaay more than just a react wrapper around threejs. If I understand correctly there are many duplicated modules maintained by two different parties. Where would one find the history behind this?

3 Comments
2025/02/01
21:22 UTC

2

Hanging rope physics

Hey! I’m trying to make a swinging ball for my app using Three.js + Cannon.js. It hangs from a visible rope, swings naturally, and users could push/drag it.

Can anyone help me if this is achievable and any ideas on how to do?

2 Comments
2025/02/01
21:04 UTC

129

Let's build interactive threejs user interfaces

11 Comments
2025/02/01
20:19 UTC

1

What to use to make a similar tech ?

New to development! Want to build something like this https://www.owayo.com/. Stuck at text moulding to fabric. 3D-2D intersection. Any tips ??

2 Comments
2025/02/01
16:05 UTC

4

Need help on how to create these stunning webgl websites

hello y'all, i came found this cool website https://chriskalafatis.com/ which had really cool hover effects as well as image transitions to different pages. i was wondering how these kinds of websites are made. i know they're probably using three.js with shaders, but i can't really wrap my head around and comprehend the process to achieve similar effects. i've always been mesmerized with websites like that one and i'm really inspired to make something like those. i do have some experience with webgl through three.js, but just really basic stuff (like setting up a scene, basic meshes, basic lights, some very very little shaders). i really want to implement those special animations, hover effects, transitions, image effects, and scrolling effects (like seen as well on https://meesverberne.com/ and https://thibaud.film/) in webgl. but given what I already know, i kind of don't really know where to begin or how to start, or to where even pick myself up. can someone help?

thanks!

5 Comments
2025/02/01
04:10 UTC

532

Slow Roads 2.0 - Endless, procedurally-generated landscapes for a chill driving game. New engine, new shaders, same Three.js

49 Comments
2025/01/31
17:37 UTC

8

I Built a Free Tool to Generate BVH Collisions for GLB Maps

Hey everyone, I just built GLB-BVH, a free tool to generate BVH (bounding volume hierarchy) data for GLB maps. I’m using this for collision detection in my multiplayer game.

My Workflow:

  1. Build the map in Blender
  2. Export to GLB
  3. Generate BVH data (using my tool)
  4. Optimize the GLB for rendering

My game is rendered in Three.js, with a Go socket server. The optimized GLB is rendered on the clients, while the server uses the BVH.

Check out GLB-BVH and let me know what you think. Would love feedback.

glb-bvh.com

0 Comments
2025/01/31
16:57 UTC

6

What happened to Webgl/threejs jobs?

I’m based in the Bay Area, they weren’t always exactly abundant but at any given time there would be a couple of ads around. I haven’t seen any for months now.

7 Comments
2025/01/31
07:44 UTC

1

Is there a way to add custom mesh in ThreeJS Editor?

Can't find an ability to add my custom mesh in online ThreeJS Editor? Where is such option?

1 Comment
2025/01/31
03:55 UTC

24

New IWER Synthetic Environment Module 🎉 directly integrated into the new React-three/XR version 6.6

1 Comment
2025/01/30
17:54 UTC

1

3D talking character in 3js

Hey, not a dev but a designer here but I was curious how do devs handle the issue of importing animated characters from 3d software to 3js. I myself tried a few methods and GLTF being a reasonable file type for devs usually doesn't support detailed morph target animations. So the skeletal animations are imported but the morph related ones are not. In another method where dev required 1 character with multiple animations in separate strips again the morph targeted animations are lost.
So what is the ideal workflow that is usually followed for importing detailed animations like that of talking and smirking etc into 3js.

1 Comment
2025/01/30
10:59 UTC

14

I am developing a variant of the 2048 GAME - "2048 TOWER"

Hello! I'm a solo developer making games with threejs

Recently, I am developing threejs game: "2048 TOWER" which is variant of the "2048" & "Threes"

2048 TOWER is a twist on the classic 2048 game, where numbers are merged to build towering layers.

https://preview.redd.it/aygh2mzj7yfe1.png?width=930&format=png&auto=webp&s=6d05b901f164bb6fce4f511d92d514bbc81e9129

- Using 3D physics, the blocks move and interact with increasing force as you merge larger numbers.
(upon merging, force pushes the block in the direction of the merge)

- Stack the blocks strategically to create bigger layers, use items, and increase your score.

- Be careful, as the tower may collapse if you're not careful!
(If you thought you could hoard numbers in one corner like traditional 2048, it would be riksy)

The intention behind this project is to blend the fast-paced, casual nature of 3D tower stacking with the classic 2048 concept. My goal is to see how well these two elements can be harmoniously combined.

So, I’ve been waiting for feedback to see if there are others who might enjoy this style.

https://kingjoy87.itch.io/2048-tower

15 Comments
2025/01/30
05:57 UTC

3

Particle Loop Three. Js?

Im sitting since days on a project with three js, and im not even sure if it is achievable or not?

I need to create a particle loop. The particles behave like a fountain with gravity and wind parameters. Now the idea is to start particle system 1,and after pressing a button a 5 seconds timer starts, once the timer is at zero, the particle system must be copied, based on its parameters the copy must start to emit particles, and system 1 must stop emitting. At that moment in time i must record via ccapture. Js150 frames. I tried to assign a fixed seed rng to the particles which are shared betwenn the system 1 and the copy. I would expect to achieve at fame 1 and frame 150 the exact same particle positions playing the pngs in a loop... But its not the case. Where is my thinking mistake?

0 Comments
2025/01/29
23:03 UTC

17

I already develop mobile games with Babylon.js. In my case, is it worth learning Three.js?

I develop casual games and physics simulations with Typescript, Babylon.js and Vite.js, some of which use Havok. Could my games be better if I switched to Three.js in the future? What would I gain from this change? As a reference, my games with Babylon.js are on the website fisicagames.com.br

17 Comments
2025/01/29
18:26 UTC

1

Setting initial target position to CameraControls

I am able to set target position to CameraControls using controlsRef.setTarget(targetPosition,true) in useEffect. with this the smooth animation occurs when setting it after initialization. I want to stop this animation by setting target position while initializing.

Expectation -
set an initial target position for my camera controls without the smooth animation that occurs when setting it after initialization.

Ex -
<CameraControls ref={controlsRef} target={targetPosition} />

any help,
TIA.

2 Comments
2025/01/29
13:30 UTC

78

Animated blob with custom shader material (code in comment)

5 Comments
2025/01/29
06:20 UTC

5

3d model lipsync

I am developing an AI assistant but I don't have any prior knowledge about 3d/three.js.

I want to lipsync the 3model based on the ai response? also if possible, genrate related hand gestures.

Anyone already tried this ?

3 Comments
2025/01/29
04:09 UTC

8

Is it hard to create these website? 3d + interactive

What is the genre called if i wanted a developer to create me a site like these sites below:

https://www.ggsolana.com/

https://mlg.lol/

15 Comments
2025/01/28
23:22 UTC

49

I made a free 2 hour course on creating a realistic water shader with Three.js

1 Comment
2025/01/28
22:14 UTC

1

Help needed, bubble liquidy material [Will delete post if wrong place for this!]

Hey all, I'm trying to recreate the reference image in my nextjs project using threejs - but i'm having some serious trouble doing so. For reference i'm pretty new to threejs, any help is greatly appreciated.

https://preview.redd.it/vtvjlbpm1tfe1.png?width=1472&format=png&auto=webp&s=20586be405704df5e9669c810b8f0d792082282b

2 Comments
2025/01/28
21:44 UTC

11

Learn Three.js with this Creative Coding Project

0 Comments
2025/01/28
19:23 UTC

12

Charmed Tower- a rogue-like where all the characters are created by players

1 Comment
2025/01/28
18:12 UTC

145

polyclock

14 Comments
2025/01/28
12:17 UTC

3

Minecraft model texture loading

https://preview.redd.it/km94llqmjmfe1.png?width=877&format=png&auto=webp&s=ad4b7f1dac13a4764a5d1a2ff19b338ed3694e53

I'm doing a small project to get to know three.js better.

While trying to load a texture to a .gltf model I downloaded from Blockbench it isn't aligning with the model.

The image to the left is the initial loaded model with textures already included. The right image is after loading a new texture.

The code i'm using to load a new texture:

const textureLoader = new THREE.TextureLoader();

  textureLoader.load(skinURL, (texture) => {
    // Pixelate texture
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;

    object.traverse((child) => {
      if (child.isMesh) {
        child.material.map = texture;
        child.material.needsUpdate = true;
      }
    });
  }, undefined, (error) => {
    console.error('Error loading skin texture:', error);
  });
2 Comments
2025/01/27
23:54 UTC

284

AI 3d model generation is going to be big this year.

49 Comments
2025/01/27
21:52 UTC

37

https://EVAcad.xyz - create parametric 3D objects with code for 3D print

1 Comment
2025/01/27
20:46 UTC

Back To Top