Hello everybody. for my end-of-study project I have to create a "game" which allows me to simulate simple electricity(DC) laboratories in 3D (ohm's law for example. With a voltage source, cables and resistors). I would like to use three.js but I am new to the technology. And I don't know if I can do all that just with three js. Do you have an idea or can you give me some free resources or if you know of a similar project please? Sorry for my English I speak French natively.

Hey, I have 3D skills on Blender and I’ve been doing graphic design for years. I’m trying to find a purpose for that. I just came across Three JS, but I know nothing about programming and also the market for that.

Is Three JS worth learning for a person with no experience in Java? Is there a market for that? (Especially in Europe)

So, I am making a small pet project where I want to create multiple kinds of dice on a Scene, and in order to do that, I must add a texture that enumerates the sides. This should be simple enough. I started with the 20-sided dice, since I will probably be using that one the most, and OH BOY!

Apparently, I suck at googling, because all I find is people trying to map 360º images onto an icosahedron. I only need to know where the edges on the icosahedron would be to paint my texture, or in its place, I need to know how to implement my own UV mapping and figure some shit out. This project is in itself a learning experience, so I wouldn't mind having to learn new things (such as how to UV map a texture to a model) but I am honestly so lost.

I am using react-three-fiber, but I can use vanilla three.js if necessary since fiber doesn't necessarily offer a wrapper for every feature in three.

PLEASE Reddit, do your thing, point me in the right direction, it's been 5 hours and I am no closer to something that I feel would be simple

Hi everyone! I’m using

react-router-dom

for navigation in my React app. When I navigate from Page 1 to Page 2 and then back to Page 1, the scroll position on Page 1 resets to the top instead of where I left off. I'd like to return to the same scroll position on Page 1 that I was at before navigating to Page 2. Does anyone have suggestions on how to preserve the scroll position across page navigations?

HI everyone. I am trying to learn threejs and I found a course by Bruno Simon's which I heard is very good. Unfortunately, I do not have enough money on me to pay that price. If any of you guys have 50% off coupon that I could use, I would be forever thankful.
Thank you,

<mesh receiveShadow castShadow material={material} geometry={nodes.Cylinder001.geometry} position={[-10.47, 1.57, -8.75]} rotation={[Math.PI / 2, 0, -1.87]} scale={[1.55, 1.55, 1.55]} />

I saw the example code above and it looks like it's positioned one by one, but is it really adding or subtracting positions to determine the right position, or is there a tool to move it around with the mouse to get it right? If you have any tips, please let me know.

I have a big problem. In Blender I reduce the number of vertices of models by going to edit mode, then mesh, then cleanup and the various options. Let's say the initial vertices count was 10000, after the cleanups it goes to 2000. When I export the model to glb and import it in Three.js the vertices count goes back to 10000. Do I have to select something in Blender when exporting to avoid this problem?

If anybody knows a solution, well thanks.

I've been banging my head against the wall trying to figure out how to add a rigid body that moves with my player (third person camera, movement with arrow keys). I have two sets of code that i've been trying to do this with - with one the rigid body moves with the player but the navigation is broken (player moves forever in one direction) and with the other the player navigation is perfect but the rigid body doesn't move with the player. I'm new to react three fiber in general so any help is super appreciated.

import React, { useRef, useState } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import { RigidBody } from "@react-three/rapier";
import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { Vector3 } from "three";

function ThirdPersonCamera({ playerRef }) {
  const { camera } = useThree();

  useFrame(() => {
    if (playerRef.current) {
      // Position the camera behind the player
      const offset = new THREE.Vector3(0, 0.3, 1);
      offset.applyQuaternion(playerRef.current.quaternion);
      camera.position.copy(playerRef.current.position).add(offset);

      // Make the camera look at the player
      camera.lookAt(playerRef.current.position);
    }
  });

  return null;
}

export function Player(props) {
  const group = useRef();
  const rigidBody = useRef(null);
  const { nodes, materials, animations } = useGLTF(
    "/assets/models/playerAnimated-transformed.glb"
  );
  const { actions } = useAnimations(animations, group);
  const scaleFactor = 0.23;
  const startingPosition = [0, 0.45, -3];

  // Play animation
  React.useEffect(() => {
    if (actions && actions["Fairy_Circle.006Action"]) {
      actions["Fairy_Circle.006Action"].play();
    }
  }, [actions]);

  const [position, setPosition] = useState(startingPosition);
  const [rotation, setRotation] = useState([0, 0, 0]);
  const [keysPressed, setKeysPressed] = useState({});

  const handleKeyDown = (event) => {
    setKeysPressed((keys) => ({ ...keys, [event.key]: true }));
  };

  const handleKeyUp = (event) => {
    setKeysPressed((keys) => ({ ...keys, [event.key]: false }));
  };

  // Move and rotate player
  const movePlayer = () => {
    const speed = 0.02;
    const rotationSpeed = 0.015;

    // Determine rotation direction based on pressed keys
    if (keysPressed["ArrowLeft"]) {
      setRotation((prevRotation) => [0, prevRotation[1] + rotationSpeed, 0]);
    }
    if (keysPressed["ArrowRight"]) {
      setRotation((prevRotation) => [0, prevRotation[1] - rotationSpeed, 0]);
    }

    // Determine movement direction based on pressed keys
    if (keysPressed["ArrowUp"]) {
      const dx = -speed * Math.sin(rotation[1]);
      const dz = -speed * Math.cos(rotation[1]);
      setPosition((prevPosition) => [
        prevPosition[0] + dx,
        prevPosition[1],
        prevPosition[2] + dz,
      ]);
    }
    if (keysPressed["ArrowDown"]) {
      const dx = speed * Math.sin(rotation[1]);
      const dz = speed * Math.cos(rotation[1]);
      setPosition((prevPosition) => [
        prevPosition[0] + dx,
        prevPosition[1],
        prevPosition[2] + dz,
      ]);
    }
  };

  // Attach event listeners for keydown and keyup events
  React.useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  // Call movePlayer function every frame
  useFrame(movePlayer);

  return (
    <RigidBody type="kinematicPosition" colliders="hull" ref={rigidBody}>
      <group
        ref={group}
        position={position}
        rotation={rotation}
        scale={[scaleFactor, scaleFactor, scaleFactor]}
        {...props}
        dispose={null}
      >
        <ThirdPersonCamera playerRef={group} />

        <group name="Scene">
          <group
            name="Fairy_Circle006"
            position={[0, -0.424, 0]}
            rotation={[Math.PI / 2, 0, 0]}
          >
            <mesh
              name="Fairy_Circle006_1"
              geometry={nodes.Fairy_Circle006_1.geometry}
              material={materials.ground1}
            />
            <mesh
              name="Fairy_Circle006_2"
              geometry={nodes.Fairy_Circle006_2.geometry}
              material={materials["testColor.006"]}
            />
            <mesh
              name="Fairy_Circle006_3"
              geometry={nodes.Fairy_Circle006_3.geometry}
              material={materials.fairyWings}
            />
          </group>
        </group>
      </group>
    </RigidBody>
  );
}

useGLTF.preload("/playerAnimated-transformed.glb");

​

Hy! Please Simeone can share with me and example for how I can use a pattern as a triplanar normalMap? It's good in plain Threejs R3F or custom-shader-material... Thanks all!

Freeciv 3D updated to Three.js r163! WebGl 2 support, while WebGl 1 has been removed. Also we have more units and an AI LLM for chatting with! www.fciv.net

I am currently working on a RnD project for 3d development.
I was asked to research and create a sort of wrapper to make the (already user-friendly api) api for react-three-fiber or threejs even better.
The only apis that will change are the ones where you can pass numerical values or we could also simplify some things like lighting or rotation or movement (ongoing discussion) .
The best and most comfortable way of doing this, for me, is to make it something like tailwind style of writing styles.
I want suggestions, is it even worth it to create something like this.

I am not that well versed in threejs or react-three-fiber to be able to come to a proper conclusion on my own. Any suggestion or recommendation is appreciated.

e.g.

<ThreeTailwind>
    <Object src={"./src/obj.obj"} className="hover:translate-x[100px] w-10 h-10 d-10 scroll:translate-x[scroll-x]"/>
    <Cube className="hover:translate-x[100px] w-10 h-10 d-10 scroll:translate-x[scroll-x]"/>
</ThreeTailwind>

Title says it all. I have a simple cube (built in cube geometry) that I've applied a texture to. Things look fine, if a bit jagged. When I turn on antialiasing to remove the jaggedness, there are glaring seams in the mesh. Also, the jaggedness doesn't really go away.

Thoughts?

Hi there, i'm looking for an expert that can help me and my startup developing a project for our website.
The person must be able to handle 3D assets also on Blender whenever needed.
The assets are already made and available in any file format needed.
The design of the whole project must be photorealistic with some futuristic and minimal interface.

The delivery time is large, we are not in a rush but we need to find somebody for this job.
If interested, please drop your portfolio or any other platform where you showcase your previous jobs.
Thank you all! :)

Hello. So I got a school project where I need to make a 3d portofolio on the theme Wild West. I dont want it to look anything crazy but I need to finish it soon. My question is where can I find a project where I can change someones model to mine? Im really confused with this stuff since I am not really good with writing code and understanding website development.

Hi guys I'm using ecctrl and rapier in my r3f project and when I move the character after coming to idle position the character moves up and down a bit and then stabilizing any fixes..
Thank you.

Hello, I'm new to three.js and im trying to recreate a shape similar to what you're seeing in the screenshot, basically its a torus-like shape with some fancy shaders (I would also like to give it my own colour gradient)??? How do I approach this? if anyone has any pointers that would be much appreciated!!

https://preview.redd.it/y99pv02c7qqc1.png?width=1080&format=png&auto=webp&s=514a46770d19a8d0cd8eefe9bc8457e982b83969

Is this correct from chat GPT?

​

https://preview.redd.it/tft9psn4rpqc1.png?width=964&format=png&auto=webp&s=4b63ca522089e2799c60b5a39a2a83e1fc4146cf

Made a fun little laser Kilroy for my personal website using threejs (and react three fiber... sort of). Let me know what you think!

So, I am creating a tshirt customizer using r3f and i created four meshes body, color, left and right arm. I used the same material for the arms but when i export as GLTF to my r3f project. The right arm alone looks like this, this is my first "legit" r3f project so still tryna navigate through everything.

https://preview.redd.it/e2hv0cbe0aqc1.png?width=688&format=png&auto=webp&s=c7fab2d8130f445d2ffc008383f7223d06fca53a

I have succesfully imported model in 3js which would be the eye catcher of the landing page.
I would like to further develop the landing page but I would like the model to be in a canvas instead of taking the whole page.
Any suggestions?

I recently published my first app as indie developer, using Three.js, React and React Native.

It was quite fun to build and soon I will be working in adding offline support. For this, I'm exploring alternatives to see if it is possible to build it fully with React Native and not depend on a web view for the 3D renderer.

Feedback is much appreciated. iOS and Android

https://reddit.com/link/1blwxfo/video/1dl83gta64qc1/player

I'm working on a Nextjs project with react-three-fiber and react-three-drei. I want to rotate the object with a 45-degree angle using OrbitControls component, I tried using rotation property but didn't work. So I tried to rotate the whole canvas instead and get the issue like in the video the video. Can someone help me?

bug when rotate canvas

Here is my code:

"use client";
import { Canvas, useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { Environment, OrbitControls } from "@react-three/drei";

const Earth = ({ isMobile = false }) => {
  const gltf = useLoader(GLTFLoader, "/earth-model/scene.gltf");

  return (
    <group>
      <primitive
        scale={4.15}
        position={[0, 0, 0]}
        rotation={[0, 0, 0]}
        object={gltf.scene}
      />
    </group>
  );
};

const EarthCanvas = (props: any) => {
  return (
    <div {...props} className={`${props.className} size-60`}>
      <Canvas
        className="cursor-pointer  rotate-45 bg-green-300"
        frameloop="demand"
        camera={{
          position: [0, 0, 10],
          rotation: [0, 0, 0],
          fov: 50,
          near: 0.1,
          far: 2000,
        }}
      >
        <Earth />
        <OrbitControls
          enableZoom={false}
          enablePan={false}
          maxPolarAngle={Math.PI / 2.5}
          minPolarAngle={Math.PI / 2.5}
          autoRotate
          autoRotateSpeed={1}
        />
        <hemisphereLight intensity={10} groundColor={"black"} />
      </Canvas>
    </div>
  );
};

export default EarthCanvas;

​

I have a GLB file, I load the scene, and place it at position 0, 0, 0. I Call the following to get a bounding box:

const bbox = new Box3().setFromObject(scene);

I then place this bounding box at the exact same position of the scene, 0, 0, 0. I am met with the issue in the picture (the white is the ground plane). Is this happening because the mesh has been translated above the ground plane & extends outside of the bounding box of the scene, or is the position of the bounding box simply inco
rrect? How can I get an accurate bounding box with all the mesh within the scene within it?

Here is the model in question, an example model from the khronos website:
https://github.com/KhronosGroup/glTF-Sample-Models/blob/main/2.0/BarramundiFish/glTF-Binary/BarramundiFish.glb

https://preview.redd.it/9dmyc5zynxpc1.png?width=646&format=png&auto=webp&s=12656408646e226d6f2b470fdf63ff5fc70d0d43

https://preview.redd.it/y77dp8xb1ypc1.png?width=1360&format=png&auto=webp&s=e237e59eaed0565c48de04640ff424c078cf3ad9