Skip to main content
Filter by
Sorted by
Tagged with
0 votes
0 answers
8 views

3D Model not Rendering Correctly on Mobile/Tablet Screens with React Three Fiber

I am trying to render a 3D model using React Three Fiber in my React application. The model renders fine on desktop screens (wider than 768px), but when I test it on mobile/tablet screens (less than ...
Aman Chauhan's user avatar
0 votes
0 answers
10 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, ...
Adam's user avatar
  • 373
0 votes
0 answers
19 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 ...
z3db0y's user avatar
  • 19
0 votes
0 answers
9 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 ...
Abdullah Developer's user avatar
1 vote
1 answer
31 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 ...
Andrew Kargin's user avatar
0 votes
0 answers
20 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 ...
philolegein's user avatar
  • 1,505
0 votes
0 answers
10 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: ...
Shoyeb's user avatar
  • 1
-3 votes
0 answers
37 views

Can I make .gltf or .glb file interactive? [closed]

I am working on a Web-GIS Project using three.js. I have a 3D Model in both .glb and .gltf formats that I have to display on a 3D OSM map. I have to add a functionality on the map where when I click ...
muhammad abdullah's user avatar
0 votes
0 answers
13 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 ...
electricmachine's user avatar
0 votes
0 answers
21 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 ...
Thuan Tran's user avatar
-3 votes
0 answers
17 views

Use of vite build to deploy to remote website [closed]

Am I correct that if the contents of the dist folder are uploaded onto my remote web site server then that server doesn't need to be running a nodes environment i.e. all the three code is in the ...
wrcstewart's user avatar
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 ...
web developer's user avatar
0 votes
0 answers
25 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 ...
syu6's user avatar
  • 1
0 votes
1 answer
54 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 ...
bingandabong's user avatar
0 votes
1 answer
25 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 ...
duxingmengshou's user avatar
0 votes
0 answers
24 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 ...
Thuan Tran's user avatar
0 votes
2 answers
58 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 ...
Jayson Sanon's user avatar
0 votes
0 answers
25 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://...
戴丞萱's user avatar
0 votes
1 answer
54 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....
bingandabong's user avatar
0 votes
1 answer
45 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 ...
user21941129's user avatar
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 ...
Rishabh Malakar's user avatar
0 votes
1 answer
50 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 ...
Zamadhi Eturu's user avatar
0 votes
1 answer
53 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 ...
juagicre's user avatar
  • 1,106
-1 votes
0 answers
23 views

When using react three csg and fiber with subtractions applied to uploaded stl files, exported stl file does not include subtraction

I'm using react three csg with fiber, and uploading stl files on to the scene. I then apply a subtraction on the uploaded files, which works, but when I export the geometries to an stl file, the ...
Michael Etzel's user avatar
-1 votes
1 answer
29 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';...
offlineanton's user avatar
0 votes
0 answers
25 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 ...
Michael Etzel's user avatar
0 votes
0 answers
20 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....
Fatima Waheed's user avatar
0 votes
1 answer
64 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 ...
notnuyy's user avatar
  • 115
0 votes
0 answers
38 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 ...
Luis Julio's user avatar
0 votes
2 answers
82 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 ...
Ciaran Gutteridge's user avatar
0 votes
0 answers
31 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 ...
Ocean Evers-Peete's user avatar
2 votes
2 answers
134 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 ...
notnuyy's user avatar
  • 115
0 votes
0 answers
26 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 ...
murcoder's user avatar
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 ...
Kanji's user avatar
  • 15
0 votes
1 answer
77 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={...
Ocean Evers-Peete's user avatar
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 ...
TheOneAndOnlySammy's user avatar
0 votes
0 answers
74 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 ...
Lalit Joshi's user avatar
1 vote
0 answers
45 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 ...
Dhruvil Mehta's user avatar
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?
Seckin's user avatar
  • 1
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: ...
yanakorn sittiwan's user avatar
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....
Oleg  Zhmak's user avatar
0 votes
0 answers
18 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 ...
Artglow Team's user avatar
0 votes
0 answers
39 views

Assistance needed with converting 2D images to 3D points using C# and Three.js

I am trying to process these 4 images for 4 cameras cube that form the outline of a cube. This is converted into an XYZ file, and I use the Three.js library to project the points from the red line ...
Julia Midori's user avatar
0 votes
0 answers
33 views

Unexpected RangeError in Three.js

I've been using Three.js to generate 3D objects in my website and I just came across this problem yesterday. I was gonna generate a PlaneGeometry with widthSegments = 1100 and heightSegments = ...
l ct's user avatar
  • 1
0 votes
0 answers
48 views

Incorporating three.js landing page in Wordpress woocommerce site

I have a standard WordPress WooCommerce site, and I recently integrated a three.js landing page with links to the WooCommerce site. To display the animated landing page, I added the .js file and an ...
Shane Price's user avatar
0 votes
0 answers
16 views

How to render a page only through a 3D mesh using threejs

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 ...
Unknow's user avatar
  • 368
0 votes
0 answers
19 views

How to render .glb files with image textures in React Native (Expo)?

I am developing a React Native app using Expo and want to render .glb files with image textures. However, I'm not sure if this is supported in Expo, and I couldn't find clear documentation on this. I'...
mariusep's user avatar
1 vote
0 answers
19 views

Threejs black rendered mesh

I'm using a legacy version of threejs (r150) with a custom loader, generating meshes manually with "position" ,"normal" attributes and groups in case of different materials (...
d.mercanti's user avatar
0 votes
1 answer
34 views

how to set the fixed position and set off the auto zoom of the orbitControls in React Three Fiber?

hey i have this react three fiber model i get from sketchfab i set the orbit controls but the position of the object/models is not fixed and every time i try to scroll through my it automaticaly zoom ...
ibrahim cesar's user avatar
1 vote
0 answers
27 views

How to replicate Phong shading with a high specular highlight in WebGL using Three.js?

I'm trying to render two spheres in Three.js with custom Phong shading using GLSL shaders. I want the right sphere to have a high specular highlight, similar to the one in this reference image, where ...
peachi's user avatar
  • 21

1
2 3 4 5
423