/r/threejs
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
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?
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?
New to development! Want to build something like this https://www.owayo.com/. Stuck at text moulding to fabric. 3D-2D intersection. Any tips ??
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!
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 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.
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.
Can't find an ability to add my custom mesh in online ThreeJS Editor? Where is such option?
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.
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.
- 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.
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?
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
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.
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 ?
What is the genre called if i wanted a developer to create me a site like these sites below:
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.
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);
});