Hi everyone,

I’m excited to share that my course, React Three Fiber: The Ultimate Guide to 3D Web Development, is on Black Friday sale! 🎉

🔹 What you’ll learn:

• Building 3D web apps with React Three Fiber
• Shaders, physics, and advanced lighting techniques
• How to create a professional portfolio project by the end of the course

💸 Normally priced at $85, you can grab it for just $42.50 with the code ULTIMATE50 until December 1st.

Feel free to ask me anything about the course or 3D web development in the comments!

So, long story short, I decided to learn threejs + react. For my first « learning » project i’ve decided to make a neon sign customisation page (img for reference). (Seems simple in theory, right ?)

Well I managed to understand and get working everything: Color changing Text extrusion Text size changement Limited orbit movement Etc

But I have been stuck on the solution for the back plate ( I could have used just a simple shape, but I really want to try to understand this complicated (at least for me) logic. Would really appreciate any advices

I know, I know, another post about this. Apologies.

I'm due to take 2 weeks off work to begin my journey into threejs. I wouldn't ordinarily think twice about spending $95 on what seems like a very good value course, but seeing as my wife and I have recently come into some financial troubles, $95 suddenly seems like a lot of money to us...hence the want to learn something new :)

I'm simply asking if anyone has a promo code to share with me? Or knowledge of any potential deals coming up (black Friday/cyber Monday, etc).

Thanks in advance!

I really want to learn three.js and really want to follow bruno simon's course but it's expensive for someone like me as I'm still a student and cannot afford it rn. If anyone of you already have access and willing to share please do I'll be greatfull.

Does any one know how I could go about creating a mouse effect similar to this? I imagine I'd have a canvas element that draws the mouse movement over the screen, then convert the canvas to a texture and send that to a shader material... but I'm not sure... Anyone able to point me in the right direction?

Actual site: https://www.houseofdreamers.fr/en

https://reddit.com/link/1guea7i/video/tg41yvh1wp1e1/player

Hi,

I just finished my first 3D car project for a client.It’s built with React, R3F, Three.js, and Next.js for the backend. The customers will be able to choose car wrap color, windshield tint % and book an appointment.

It would be great if I could get some feedback on it. Thanks!

tintcar-3d-workshop.vercel.app

Hello

I'm trying to achieve an effect where you could see the content of a page only through a 3D object. But I have no idea where to start, what should I search to do this effect.

My first idea would be to convert the 3D object to a "clipPath" but i do not find an easy way to do that.

import { Canvas } from '@react-three/fiber';
import { Box } from '@react-three/drei';
import { useRef } from 'react';

export default function Home() {
  return (
    <div style={styles.page}>
      <div style={styles.overlay}>
        <h1>Here is some content hidden by default</h1>
        <p>This text is only visible through the cube.</p>
      </div>

      <Canvas style={styles.canvas}>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Box position={ [0, 0, 0] }>
          <meshStandardMaterial color="orange" />
        </Box>
      </Canvas>
    </div>
  );
}

const styles = {
  page: {
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
    background: '#282c34',
    overflow: 'hidden',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: 'white',
    fontSize: '2rem',
    zIndex: 2,
    pointerEvents: 'none',
    clipPath: 'url(#cubeClip)', // find a way to link it to the cube shape
  },
  canvas: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
};

I have this model on Blender (first picture), it's supposed to represent a surgery room in use. But when I use the model in my project using three, one of the models (the crouched doctor) spawns in the middle of the room t-posing, I'm rendering more two of this model, and everything spawns on the right position except for this one model.
I don't know if the problem is on three or the way I'm exporting on Blender (I started using it 1 week ago).

https://preview.redd.it/3ureacuhmo1e1.png?width=1454&format=png&auto=webp&s=c3363285894b28be175f50ca75f3c89dfabd0e4f

https://preview.redd.it/t5uu4cuhmo1e1.png?width=1489&format=png&auto=webp&s=99bfa4698d205c979594f94956e9335ce05018ff

Also, sorry for using the wrong terminology, I'm not really familiar, this is a college project.

Without outline pass

With outline pass

Hello threejs community, so I've been working with outline pass to show outline for the selected mesh for my 3d viewer.
As outline pass postprocessing was getting very performance intensive (for my case where I have thousands of meshes in my scene) so I compute and show outline pass only when orbit controls are not moving.
It is working pretty smooth but here are few issues that I am unable to resolve:-

1. I want there to be visually no difference between when outline pass is applied and when not, for now I have minimized the difference using color correction and tried most of the anti-aliasing pass, but none gave me almost close results to without outline pass visuals in terms of colors and AA.
2. Outline pass also takes effect for transform controls for some reason.

I just started learning three js and need to make this animation, where this streaks of various lengths and thickness go from bottom left to right.

I don't know how to go about it. I don't have shader knowledge yet. Will I need them or it is possible to make it without them.

Ignore the box (it's a text animation)

I am reading online and trying out the different values suggested, but I don't get the same results as the guides.

My shadows are harse and not cohesive.
You can also see the artifact on the platform.

What more can I do to make this look better?

This is what I have now:

class MyRenderer extends THREE.WebGLRenderer {
    constructor() {
        const this_canvas = document.querySelector('canvas.webgl')!
        super({
            canvas: this_canvas,
            stencil: true,
            antialias: true,
            precision: "mediump",
            alpha: true,
        });

        this.shadowMap.enabled = true;
        this.shadowMap.type = THREE.PCFSoftShadowMap;
        this.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    }
}

const skyLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.2);
skyLight.position.set(1, 1, 1);

const shadowConst = 800;
const sunLight = new THREE.DirectionalLight(0xf9ffed, 2);
sunLight.position.set(6, -6, 14);
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 1024 * 8;
sunLight.shadow.mapSize.height = 1024 * 8;
sunLight.shadow.camera.top = shadowConst;
sunLight.shadow.camera.bottom = -shadowConst;
sunLight.shadow.camera.left = -shadowConst;
sunLight.shadow.camera.right = shadowConst;
sunLight.shadow.camera.near = 0.1;
sunLight.shadow.camera.far = shadowConst;

const ambientLight = new THREE.AmbientLight(0xffffff);ambientLight = new THREE.AmbientLight(0xffffff);

Also the platform and the shapes (stars and such) are glb models, while the blocks on the shapes are threeJs meshs

https://preview.redd.it/14lch7fhi91e1.png?width=1840&format=png&auto=webp&s=df22e6604a4b8153339cb21729dccebcc40a43fd

I would like to know how to get the pixel feel on the background and button

Making environment maps with code. They’re tiny, maybe a few hundred bytes. You have full creative and photographic control, you light the scene like a photographer would using softboxes, ring lights and so on. It’s practically free, zero overhead, and looks good.

https://codesandbox.io/p/sandbox/epic-shamir-gczjr2?file=%2Fsrc%2FApp.js

I want to learn three react 3 fiber and gsap are there any resources to learn to create modern and 3d websites. I do have basic knowledge of blender just wanna learn to implement in web.

i'm interested in three js, but as my topic suggest, I'm terrible at algebra, trigonometry and so forth.

If someone wants to start their journey with Three.js, they often aim to bring their own imagination to life. How essential is it for anyone looking to excel in the Three.js field to also be proficient in tools like Blender? I currently work as a full-stack developer and can't dedicate much time to Three.js, though I’ve always wanted to learn it. However, learning Blender feels hectic to me.

Hey guys, just want to share my open-source project with three.js, it is awsome and I had a lot of fun building it with AI, most of the code (99%) is generated by Claude 3.5 Sonnet and with Cursor IDE.

Features include:

1. StarLink and Falcon Heavy for some space vibes
2. Real-time day/night cycle with moving clouds
3. POV camera views from a StarLink satellite or Falcon Heavy rocket
4. Live network transactions displayed on a 3D globe
5. Easy adoption for any projects with WebSocket confirmations and Node Lists
6. Zero configuration, install and run it!

All those you can adjust, like StarLink height, speed range etc
You can easily adapt with an e-commerce ordering system as well, all you need is

1. update WebSocket and data interface
2. update the Nodes list to something you use, like store location or anything.

Here is the repo link: https://github.com/dalindev/XNOHub.com

Please leave a Star if you like it!

https://preview.redd.it/3b5b8ckbmw0e1.png?width=1805&format=png&auto=webp&s=303d2cc83b8cb3be0221d3043a0f10a9062807f7

https://reddit.com/link/1grb2dq/video/kc9vsheeqw0e1/player

A couple weeks ago I made a post about monetizing my three.js skill, I have had some luck with freelancing made $600 which was nice. (Got it before I made the post)

https://preview.redd.it/e7un3u8uzv0e1.png?width=853&format=png&auto=webp&s=ed0e9d28d8be841f0801961d5d7e494eb8d6999e

But I don't really like it to be honest...you build a project for 2-3 weeks to move on to next one... I want to work on something for longer I guess?

So I made my first post about three.js monetization and someone had a good idea of making a product/service and selling it and yea... my idea is to make a bunch of pre-made 3D landing pages and selling them, but not really sure if the demand is there for such a thing.

For now I have made a waitlist with a simple Emoji and some simple onHover animations...

Basically long story short,
judge my idea and my landing page, please? Is it a good idea? Do you understand the product by looking at the page? Any new animations I should add? 3DUI.design

And has anyone else made something and is trying to sell it? Would love to hear what others are trying aswell

https://reddit.com/link/1gr7zrj/video/swnctifa0w0e1/player

<Environment files={"/kloppenheim_06_puresky_1k.hdr"}
background={true}
intensity={0}
/>

intensity={0} does not seem to do anything.

Hi everyone, Actually I am making a project in react using react three fiber and r3f/drei library and I am using useAnimation hook to play animation in sequence but whenever I do some changes in the code and the canvas re-renders the animations somehow stop playing at all. And the stop remaining still in its position. Can anyone explain why is it happing and how to fix it.