20,948 questions
1
vote
1
answer
60
views
Threejs EffectComposer optimization
I'm building a Three.js viewer for a static building model using postprocessing and n8ao. Since the model doesn't animate, I want to render only once when the user stops moving the camera — not every ...
- 473
0
votes
0
answers
85
views
How do I import spline scene with animations and interactions to my React website using React Three Fiber (R3F)?
I have this script that I have written in react-three-fibre, as my overall website is in Three.js:
import useSpline from '@splinetool/r3f-spline';
import { OrthographicCamera } from '@react-three/drei'...
0
votes
0
answers
30
views
Applying a fragment shader to a surface in Mathbox JS
the fragment shader is applyed correctly to the lines but not the fill how do I fix that ?
this.view = this.mb.cartesian({
range: [[-1, 1], [-1, 1], [-1, 1]],
scale: [1, 1, 1],
...
- 1,781
0
votes
0
answers
65
views
Inconsistent Object/Mesh Rotations in ThreeJS
I am encountering rotation issues in THREEJS where my object (From blender, gltf.scene) totations are extremely unpredictable and inconsistent. I want my object to spin like a ballerina when the mouse ...
- 47
0
votes
1
answer
53
views
Is there any way to make a export format compatible to Revit in Three.js
Currently I'm planning to do a project which create a 3D image using Three.js. But i want to export the result in a different format so that it can be compatible with the Revit Software. I done some ...
- 1
0
votes
0
answers
37
views
FPS is not calculating right in React
FPS calculation is not giving expected number in my react application.
My application looks like this
<Myapp>
<App1>
<FPSComponent />
</App1>
<App2>
<...
- 1,578
2
votes
0
answers
127
views
Distance between facial landmarks changes with head rotation using MediaPipe Face Landmarks and Three.js
I'm using the @mediapipe/tasks-vision library to extract 3D face landmarks in a browser-based application and trying to measure the distance between two specific points: landmark 143 and landmark 372 (...
0
votes
1
answer
55
views
Any Way To Hide Transparent Adjacent Mesh Overlap Part in ThreeJS
I'm new fish in threeJS and have two transparent boxes below:
and want to change or hide the color of the overlap part from red box to the color blending with the green box and back non-transparent ...
0
votes
0
answers
30
views
WebGlRenderTarget's content incorrect behaviour
i’m trying to make interactive screen of TV by using webGlRenderTarget as a screen texture, i created the second scene and camera, but nothing works properly. Despite it actually rendering on the ...
- 1
0
votes
0
answers
150
views
How do I embed this globe into my NextJS Project
I've followed this tutorial: Youtube Video and built this: Image
I want the globe in my blender project to be embedded into my next-js project. I followed the tutorial from youtube, and in my nextjs ...
1
vote
1
answer
145
views
RigidBody ref with react three rapier
I have a problem with reference the RigidBody component from react three rapier, when I try to catch the reference is always null. When I change the ref to the Box commponent import from react-three/...
0
votes
1
answer
122
views
ThreeJs: How to rotate two object with positive and negative degree
I am trying to rotate each object separately, and each object has its own rotation field and, when I change the rotation field it should maintain the corner position.Right now only negative rotation ...
3
votes
1
answer
198
views
Call async function in Three.js useFrame?
I need to make a fetch call when the camera’s position crosses a threshold. I need the function to be callable again, but not until after 1000ms has passed.
Ideally this would happen immediately, but ...
- 22.5k
0
votes
1
answer
273
views
Creating a halftone effect with Three.js
I'm trying to create a reverse halftone effect using Three.js, specifically with Threlte. This is my reference image:
There are a couple of layers of dots, with some rather large areas of ...
- 732
1
vote
1
answer
88
views
How to Resize a Rectangle Using Hover Dots in Three.js While Keeping One Edge Fixed?
I am working on a Three.js project where
I need to resize a rectangle interactively using hover dots.
The rectangle has two hover dots, one on the left edge and one on the right edge. like this in the ...
- 572
0
votes
1
answer
96
views
How to implement view offset translation when using CameraControls in React Three Fiber?
In the camera-controls source code, there is an example of a view offset. How can this be implemented using the CameraControls wrapped in '@react-three/drei'?
let offsetUpdated = false;
const ...
- 127
-3
votes
1
answer
74
views
CatmullRomCurve3 does tiny swing in opposite direction before facing coordinate
I'm using THREE.CatmullRomCurve3 to create a smooth path for a car curve animation in Three.js.
I want the curve to look kind of like an "S" shape, but not too steep.
Here are the curve ...
- 155
0
votes
0
answers
73
views
R3F couldn't load texture blob
So I have been building a 3D model showcase site, at random times I am getting this error of texture not being rendered, I am using Three.js drei package
At random times, I encounter a texture/...
0
votes
0
answers
66
views
Ammo.js soft body cloth created with CreateFromTriMesh not colliding with rigid body floor
I'm working on a cloth simulation using Threejs with Ammojs (soft body support). I'm creating the cloth using
btSoftBodyHelpers.CreateFromTriMesh,
and adding a rigid body floor using
btBoxShape.
...
0
votes
1
answer
41
views
Where is the threshold measured from in LOD rendering in three.js?
I'm doing LOD rendering for multiple meshes. I'm confused about where the threshold is measured from.
I have a demo that works, except the high and low resolution meshes are swapped out for both the ...
- 22.5k
0
votes
2
answers
216
views
I'm trying to add a glass effect to my GLB model in React Three Fiber
I need the same effect like the screenshot. Here is my current code.
import React, { useEffect } from 'react';
import { useGLTF, OrbitControls } from '@react-three/drei';
import { Canvas } from '@...
- 2,409
5
votes
1
answer
186
views
How to move inside scene with Orthographic camera?
I'm using CameraControls from React Three Drei, but I imagine my question is about three.js in general.
https://drei.docs.pmnd.rs/controls/camera-controls#cameracontrols
I need to be able to move ...
- 22.5k
1
vote
2
answers
212
views
How can I optimize three.js the rendering of a gltf model? I tried 4 ways, but the result is the same
I'm trying to find a way to optimize three.js . I have a gltf tree model with 2144 triangles. I am adding 1000 trees to the scene in different ways.
I clone the tree in a simple loop.
I use ...
- 13
1
vote
1
answer
61
views
How do I reliably rotate a 3D cube to a specific face — even after users move it around?
I have a 3D cube with 6 sides. Two of those sides have icons: one for music and one for sports.
I also have two buttons: one labeled Music and one labeled Sports.
When the user hovers over the Music ...
- 41
2
votes
0
answers
92
views
THREEJS - Ray intersection on instencedMesh that has multiple morph targets
I would like to create an instancedMesh that can handle morphing. I need morph targets because each instance should have different shape so morph targets seems handy. Also each instance should detect ...
- 79
0
votes
0
answers
51
views
Loading a model with GLTFLoader through Web Worker causes mesh deformation on SkinnedMesh
My page is taking a long time to load because of the loading of the models that I do as soon as the page loads
During loading in the main thread, page interactions, such as hover effects, etc., stop ...
- 1
0
votes
0
answers
30
views
aframe/three.js: Custom mesh only visible on hot reload
I'm trying to write a component that:
copies the geometry of a plane to a new custom mesh
colors the vertices in the new mesh based on the height of the vertex.
changes the new mesh to layer(1) so ...
0
votes
0
answers
166
views
How to implement point cloud elevation coloring (material.pointColorType) in potree-core?
I'm working on a project that integrates potree-core and i need to color point clouds by elevation. This functionality is available in the original Potree viewer using:
material.pointColorType = ...
- 186
0
votes
0
answers
55
views
Decals are not projected on Surface (glb)
After Exporting the OBJ from blender into glb format and import it into my project it works fine - positioning is good and I can add Decals. But when moving or rotating the model the decal position ...
- 511
1
vote
0
answers
65
views
Implement reverse Horizontal Scroll Feature on Vue 3
I am trying to have a website with a horziontal scroll feature that goes from right to left, so when you scroll up, on a wheel it goes to the left, and then down goes to the right. swipe down or swipe ...
- 11
1
vote
1
answer
123
views
How to support InstanceMesh / BatchedMesh in custom ShaderMaterial?
I have no idea how to extend my shader. It is quite simple. I have geometries with custom focus attribute with value between 0-1 and based on that I render plane colour. But for BatchedMesh this ...
- 71
0
votes
0
answers
40
views
How to fix camera vibrations and unreadable pixels in IFC.js viewer with Three.js and React
I'm developing a React application using IFC.js and Three.js to visualize complex BIM models. However, I'm facing two major issues:
Camera vibrations during transitions/selections
When clicking on an ...
-1
votes
1
answer
75
views
How to add a Video in 3d object using Three.js / React
I want to insert a video in 3d Object to create a website like this. I have a 3d object in GLB format, but I don't know how to insert the video in 3d object. Any ideas?
0
votes
1
answer
62
views
Shot cool down in Three.js and CANNON.js
its been a while since I worked on this project but I have just come back to it and turns out its broken. I did some testing and I was able to pin point the problem but I have no clue how to fix it. ...
0
votes
1
answer
70
views
Three.js model color difference from expected rendering
I am trying to display a model I downloaded on Sketchfab which is not showing up as expected when I render it.
Above is the expected rendering
Above is the rendering I get in three.js.
How do I ...
- 15
5
votes
1
answer
267
views
btFixedConstraint freeze objects
UPDATED
I am trying to 'freeze objects together' using Bullet (via Ammo.js, using Three.js as the renderer)
Here is my scene
https://codepen.io/PartyPants2/pen/KwKrdvq?editors=0010
The scene is a ...
- 1,022
2
votes
2
answers
104
views
Alpha Gradient over mesh geometry in shader code
I have this scene and for the half transparent box geometry I want to create a shader that gradually reduced the alpha value of gl_FragColor going over the long axis (in this case the z axis in three ...
- 11.1k
1
vote
1
answer
66
views
Three.js won't render the scene after clearing it
I haven't found any post that describes exactly this issue but I've noticed it's kinda hard to delete elements from the scene.
I'm making a house editor, it allows to draw a 2D house and then it ...
0
votes
0
answers
52
views
How to get the total scroll from my container and a inner sticky scroll
I need to know how to get the scroll progress from my inner sticky scroll component to handle the animation of my 3D model. Right now I just get the scroll from the container but the inner container I ...
0
votes
0
answers
70
views
React three fiber error rendering 3dmodels on expo react native 18.3.1
Im running into alot of issues trying to run react three fiber on react native app(expo sdk 52). I have a simple box setup but get error saying 'cannot convert undefined value to object'. I tried ...
- 29
2
votes
1
answer
456
views
Can’t load IFC file in React with @thatopen/components—camera/world or WASM errors
I have a React project where I’m trying to load and display an .ifc file using the @thatopen/components library. However, I keep running into either:
“This camera needs a world to work!” or
WASM ...
- 31
1
vote
1
answer
151
views
Problem importing GLTF model in Three.js: Lights not working properly
I have been trying to import a GLTF model into Three.js, but I'm encountering several issues. When I import my scene with all the elements, the lights do not work as expected. The directional lights I ...
0
votes
1
answer
42
views
cannot compute relative angle between objects in Three js
I have created a class to determine the angle of a point on the earth, relative to the earths center and the sun, given a tilt, and time. Time is a float number of days - the fraction is the time of ...
- 1,101
0
votes
0
answers
70
views
How can I solve the tunneling problem in react three rapier?
I'm implementing a dice shaker where the dice are mixed by shaking a container. Is it possible to limit the speed of dice wrapped in a ? Occasionally, a tunneling issue occurs where the dice pass ...
- 1
1
vote
0
answers
36
views
Three.js - Pixelation on Clipped Edges When Using Stencil Buffer for Transparent PNG on Cup Mockup
I'm working on a Three.js project where I'm applying five layers on a canvas to create a cup mockup. The layers are rendered in the following sequence:
Scene – Background scene.
Mask – Defines the ...
0
votes
0
answers
139
views
Three.js/R3F with next.js build/deploy issue
I’m building a next.js app (v.15 with app router) and I’m having some issues with my glb file/model after building/deploying my app. I have a CI that deploys my app to GCP using docker(artifact ...
- 11
0
votes
1
answer
133
views
How to Embed a Sketchfab 3D Model in a React JSX Hero Section with Proper Sizing?
I'm trying to embed a Sketchfab 3D model in my React JSX hero section, but every time I do, the model appears extremely small—like a single pixel.
However, the model remains tiny. How can I properly ...
0
votes
1
answer
103
views
react three fiber and react drei causing all componnents not to render
I'm trying to learn and work with react and threejs specifically react-three/fiber. I'm running react and three 19 and @react-three/fiber 9.0.4 and react-three/drei 10.0.1. The scene renders fine as ...
- 1
3
votes
1
answer
123
views
Three.js smooth particles opacity cut on depthTest
I have a particle system in three.js 0.173.0 with soft particle edges, and when z soring occurs the opaque pixels overwrite the scene rather than additionally drawn on the top, when the particle's ...
- 65
1
vote
3
answers
195
views
Rapier and Threejs project build bug
I have created a Threejs project and i am using Rapier Physics in it. Now the whole projects is working perfectly in development. But once i build it and then do npm run preview i got the followimg ...
