21,136 questions
0
votes
0
answers
20
views
3js Ripples EffectComposer
I created a three.js scene with a "ripples" EffectComposer:
https://codesandbox.io/p/sandbox/3js-ripple-composer-58s2t5
It all works, and I wanted to implement it using React Three Fiber.
I’...
-1
votes
0
answers
12
views
Add custom hand gestures in three.js
I have searched the web for ways to add custom hand gestures in three.js WebXR and came across handy.js and other complex packages. I only need to define a few custom gestures that I can express in ...
1
vote
0
answers
46
views
How to retarget 3D pose landmarks (points in 3d space) onto a rigged humanoid model in Three.js?
I’m trying to implement a 3D avatar in Three.js by extracting 3D pose landmarks of a person (frame-by-frame) from a video (using MediaPipe / PoseFormat). I currently have a .pose file that provides ...
2
votes
1
answer
58
views
onPointerOver and onPointerOut detect all child elements
The problem is that I have onPointerOver and onPointerOut triggered on each child element, but I need it to be on a common group, because then the component is re-rendered too often.
There is a group ...
1
vote
1
answer
40
views
How to add dom elements behind the three.js model in canvas?
I want to move to last section "Color Transitions" text and background image behind of the 3d model. I am using react-three/fiber, drei
Deployed preview - https://astonishing-pony-00dd84....
0
votes
1
answer
42
views
GLSL Shader vertex displacement only on 1 vertex
I'm trying to refactor a decade old GLSL vertex displacement shader that used to work with a legacy version of Three.js and I ran into a bunch of issues from the order of operations for textures ...
0
votes
1
answer
35
views
How can I create the axis helpers using WebGL and Three.js
How can I create an axis helper like the below image at the top left corner and in the middle. When I use axesHelper, the line doesnot have an arrow at the end and it is also thin. Below is the code I ...
3
votes
1
answer
60
views
How to automatically center imported GLTF model and orient camera to show full model in Three.js
I'm working on some Three.js code to import a GLTF model and display it. The model is imported successfully through a different component, but no matter how I adjust the camera or reposition the model,...
0
votes
0
answers
25
views
vite not updating it page when GLSL code have been updated
I been trying to learn GLSL in this past few days but there's something that limited my progression is that the page won't updated when The GLSL code have been updated where i need to manually ...
-1
votes
0
answers
18
views
Setting up threejs and running it
I encountered difficulties while attempting to execute a straightforward Three.js project. Despite adhering to the provided guide, I discovered that I lacked the necessary libraries. Consequently, the ...
0
votes
0
answers
32
views
Rendering multiple composers in three.js
In this clip im trying to render two differnt composers to the canvas in the animation cycle but only the last composer in the loop gets rendered to the screen, or the transparency of one layer doesnt ...
0
votes
0
answers
25
views
Manually update 3D Object pivot point in three JS
I'm quite new to ThreeJS and I just got this car model on Sketchfab, but when i try to put it in my React Three Fiber app it display very far away in the scene, when I attempt to rotating it follow ...
0
votes
1
answer
35
views
How to load an LDR file using THREE.js
I am attempting to display an .ldr file in a web page using THREE.js. An .ldr file is a LEGO version of a .mpd file. The THREE.js documentation says to convert the .ldr file to a packed .mpd file, ...
1
vote
1
answer
56
views
Three.js - Color based on occlusion
I would like to have a mesh that is always drawn to the scene (depthTest = false, renderOrder = 999) but I want the occluded part of the mesh (the area covered by another object in front of it in the ...
1
vote
0
answers
20
views
How to Create a 3D Texture with Depth from Slices for KTX2 in Three.js?
I’m trying to create a 3D texture with depth using KTX2 files for volume rendering in Three.js. I have a KTX2 file that, when extracted using,produces 64 slices named output_depth*.png, each of size ...
1
vote
1
answer
47
views
Problem with three.js shader's column width adjustment
According to the layout, the shader should be divided into 6 columns and 3 rows with dimensions of 100vw up by 100vh. The sizes of the rows should be divided evenly proportionally by height. The ...
0
votes
1
answer
34
views
Re-render problem with FBO "flip flop" technique in R3F
EDIT: I've narrowed down the problem to something evinced by the double-render of React in strict mode in development. Adding more details below, and also adding the "React" tag, since more ...
0
votes
0
answers
13
views
THREE.WebGLRenderer: Context Lost when loading a 3D object in a Next.js app deployed on Vercel
In my Next.js application I want to load a 3D object. The application works perfectly on my local environment, but when deployed to Vercel, I encounter the following error:
THREE.WebGLRenderer: ...
0
votes
0
answers
14
views
fitting skeleton to mesh after using shape keys in three js?
i have this human model from makehuman addon in blender. i imported using gltfloader, and the shape keys and the rest works great. The problem is that when adjust the mesh with shape keys, the ...
0
votes
0
answers
23
views
Threejs clipping cast shadow
I have a 3D object, a New balance shoe with a <directionLight/> and directionalLightHelper to visualize the lightsource, the issue is the shadow on the shoes looks weird, it seems like the shoes ...
0
votes
0
answers
35
views
Implementing Drag-and-Drop Window Positioning on a Wall Using React Three.js
I am planning to create a window on a wall.
The position of the window can be controlled using drag and drop.
The window should not be draggable beyond the boundaries of the wall (e.g., when the ...
0
votes
0
answers
27
views
How to make thick outline? My shader doesn't work
current situation
https://codesandbox.io/p/sandbox/rx8frh
I’m trying to make a thick outline for the specific mesh.
I tried some existing solutions (Outline in @react-three/postprocess and Outlines in ...
0
votes
1
answer
56
views
3d Model Positioning in ThreeJS Play code.io:
How do I make my model so that when a user clicks and drags they can see the model from different positions? (Like when you are editing a 3D model). I am new to threeJS. The model and scene are also ...
0
votes
1
answer
28
views
In three.js, how can we make a face face the camera as much as possible under certain constraints?
Suppose our face is on the x-y plane, and there is a constraint that the axis of this face must be (0,1,0). I hope that when the camera moves, this face will face the camera as much as possible. It ...
0
votes
0
answers
27
views
React Three Fiber calling useGLTF inside useEffect
I have a shoes component as below, whenever the props currentShoes change, I need to update the nodes and materials from useGLTF, is there a way to achieve this? Right now when parent component change ...
0
votes
2
answers
65
views
Cannot get a simple cube to load using React-Three-Fiber
I am using the react-three-fiber getting started doc to render a cube on a page but nothing shows and I am at a bit of a loss.
Link: https://r3f.docs.pmnd.rs/getting-started/your-first-scene
I am ...
0
votes
0
answers
27
views
Updating Three.js to the latest version: gray screen no error
I’m trying to update this program (originally written with Three.js r88) to work with the latest version of Three.js.
Original code: https://codepen.io/shubniggurath/pen/OEeMOd
My code: https://...
0
votes
1
answer
69
views
How do I load a 3D model using three.js using the editor playcode.io?
I have been trying to load in a 3d Model on playcode.io. My browser supports WebGl and so does playcode.io (I think) So far, no success. There is no problem The model either. The model is called plane....
0
votes
1
answer
47
views
Threejs clipping a wall
I have a 3d channel that contains cylinders which simulate a liquid.
here's an example
The issue is that the cylinders can overlap with the walls and show through them.
I think i need to use clipping ...
0
votes
0
answers
14
views
Implementing Drag-and-Drop Image Upload to a Canvas Texture in React.js
I am working on a project in React JS uisng of Three.js and need to implement a functionality where users can upload an image via drag-and-drop. If the image intersects with the canvas, the ...
0
votes
1
answer
55
views
Large number of polygons with react-three-fiber
I need to display thousands of polygons (2d) of different shapes with react-three-fiber.
I thought the best option would be to use instances of the same polygon with, let's say 100 vertices. And then ...
0
votes
1
answer
70
views
Blazor using typescript and import three.js
I'm developing a Blazor WASM application where I make use of the Microsoft.TypeScript.MSBuild nuget package in order to use typescript for all related javascript code.
But when it comes to import and ...
-1
votes
1
answer
31
views
Is there a way to only have one instance of THREE when using Threebox
I am using Threebox with Mapbox, I define threebox like so:
(window as any).tb = new Threebox(this, gl, { defaultLights: true });
but I am also importing THREE like so:
import * as THREE from 'three';...
0
votes
0
answers
27
views
Using React Three CSG and Fiber, how can I use an uploaded STL file as the source for a subtraction?
I want to upload two stl files, and create a subtraction against the first stl using the second. When I upload a single stl and try to subtract using a Three based geometry it works well, but when I ...
0
votes
0
answers
22
views
Markers Positioned Below the Surface of .glb Model in Three.js
I'm working on a Three.js project (React) using the @react-three/fiber and @react-three/drei libraries. My goal is to place markers on the surface of a terrain .glb model based on specific coordinates....
0
votes
1
answer
65
views
how to smooth transaction with animejs in three js when the target camera position move?
I had a button when the current position was on the top and then it moved to the bottom and centered with Vector3, but it was not smooth, it is like when we do display: none; to display: block for my ...
0
votes
0
answers
41
views
Implementing Raycasting in Gaussian Splatting Using Three.js
How can I place points at X, Y, Z coordinates in a 3D map using Three.js? I'm working with Gaussian Splatting representations, and right now, raycasting with a splat mesh doesn't work with Three.js's ...
0
votes
2
answers
84
views
Infinite marquee on a 3d/dynamic perspective path? Can it be done?
(perspective grid that might be useful to illustrate what I mean) I've been trying to create what I'd describe as a "dynamic perspective infinite marquee". Specifically I'm using this video ...
0
votes
0
answers
41
views
React-Three/Drei Html's 'occlude="blending"' prop hides Html, leva etc when post processing pass is used
I've found that setting Drei's Html component's prop occlude="blending", which seems to be the only way to currently get html/3d depth to place nice, will cause Html, Leva and any similar ...
2
votes
2
answers
135
views
How i can make the object steady 180 degrees?
i have clothe object where user can rotation the cloth, i am using orbit control to rotation the object here, and the interface, user can change the color of clothe, there is a button to see the back ...
0
votes
0
answers
28
views
R3F / Rapier - How to use a Static Collider for First-Person Movement
I want to create a custom PlayerController for react-three-fiber by using rapier.
I'm using a MouseMovement combined with KeyControls (WASD). I want a simple CapsuleCollider, to preventing the player ...
1
vote
0
answers
29
views
@react-three/fiber doesn't render the 3D model, leads to a blank screen
I'm trying to render a 3D animation using @react-three/fiber, @react-three/drei, and three. But it leads to an empty screen. No error logs are displayed. I checked whether WebGL was being supported by ...
0
votes
1
answer
80
views
"Html" Component turning black after setting occlude to "blending"
pretty new to r3f but having a blast so far. I've run into a bit of an issue when rendering HTML into the scene with the drei helper. I'll drop the code from my render function below:
<group ref={...
0
votes
1
answer
77
views
How to make a three.js cube have different colors on different sides?
I am new to three.js, and in a program I am creating, I would like to make different colors for different sides of the cube. The arrow keys control cube rotation. For example, could I have red on one ...
0
votes
0
answers
75
views
How to find orienation of an object in a 2d Image
I have to detect some objects (Sofa and table in my case) and replace that objects from a 3d model. I am using YOLO to detect and LaMa to remove object and then trying to place the 3d model on the ...
1
vote
0
answers
50
views
How can I capture photo / video in WebXR threejs?
I want to capture photo / video while in AR mode . I am using webxr of threejs for the AR mode.
I tried to take photos but it gave me black photos.
I tried it using getUserMedia
I don't know whether I ...
0
votes
0
answers
17
views
Three.js - Audio Issue on Firefox Browser
I am experiencing some audio playing issue on Three.js.
I try my code on Safari, it works perfectly, but same website doesn't play sounds on Firefox.
Has anyone experienced such a thing before?
0
votes
0
answers
22
views
Why got null in useRef with 3dModel ReactThreeFiber GSAP? and how i can update it
gsap.registerPlugin(ScrollTrigger, useGSAP);
const Scene = () => {
const creamTubeRef = useRef<Group>(null);
useGSAP(() => {
const scrollTl = gsap.timeline({
defaults: ...
0
votes
0
answers
25
views
Getting surface point color in three.js
Could you please help me understand the capabilities of the framework?
I have a 3d model, let's say it's a cube preloaded from .obj (or any other). The cube has different textures applied to each side....
0
votes
0
answers
20
views
AR Element in Model Viewer Appears Huge and Moves with User Instead of Being Stationary in Front — GLB/USDZ Issue or Model Viewer Configuration?
I am using model-viewer for displaying 3D models in AR on iOS and Android, but I'm facing an issue where the AR element appears huge and is not positioned in front of the user. Instead, it moves with ...