21,108 questions
-1
votes
0
answers
21
views
My Mesh visualiser code takes so long to load the mesh files to the borwser , is SSR a solution? [closed]
I’m working on a 3D mesh viewer using .obj and .mtl files, but I’m running into performance issues — the browser takes a long time to load and render the mesh files, and it’s using a lot of my local ...
0
votes
1
answer
51
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 ...
- 117
-3
votes
1
answer
46
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
27
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
27
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
27
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.9k
0
votes
3
answers
71
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
0
votes
0
answers
60
views
How to load a 3D model using three.js?
I am completely new to loading 3D models in HTML. I want to render an interactive 3D human head model in web-browser (localhost).
Below is my code which opens up a web-browser without error but does ...
- 5,689
4
votes
1
answer
139
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.9k
1
vote
2
answers
98
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
46
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
74
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
21
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
21
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
48
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
46
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 ...
- 501
-1
votes
0
answers
25
views
Heads up Display Image - Bordering THREE.JS <canvas> Context
The problem is variable "ctx" remains null after declaring it equal to "ctx = canvas.getContext('2d');" while variable "canvas" stores the following html dom element:
`&...
1
vote
1
answer
30
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
71
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
26
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
58
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?
-1
votes
0
answers
21
views
How to prevent content from hiding under the iOS Safari search bar? [duplicate]
I added a button on the bottom right corner of the screen, looks well on all browsers except IOS Safari, the search bar is over the button, It looks good on google mobile browser though. I came across ...
0
votes
1
answer
44
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
43
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
239
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,012
2
votes
2
answers
75
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
60
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
39
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
51
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
1
vote
1
answer
89
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 ...
- 21
1
vote
1
answer
64
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
40
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
23
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
27
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
88
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
50
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
53
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
109
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
69
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 ...
0
votes
1
answer
48
views
3D Model Appears Too Small in React Three Fiber (GLTFLoader)
I'm using React Three Fiber to display a 3D model with the GLTFLoader. However, the model appears extremely small — barely visible, like a speck of dust.It is downloaded from sketchfab (https://skfb....
-1
votes
1
answer
49
views
Text shrinking problem on 3d model through shader and canvas
Hello currently i am developing a configurator but have some issues with texts. I am trying to render text on off canvas on 3d model through shaders but its acting weird. i can not set width and ...
- 37
0
votes
1
answer
51
views
Trying to load a custom .glb file but constantly getting an HTML/404 response when fetching the file
Cannot work out where to put the model.glb file.
Error:
Error in asyncWritable: Unexpected token '<', "<!doctype "... is not valid JSON.
Created the project with - 'npm create //@/...
- 41
0
votes
0
answers
30
views
Failed to parse source map from '\node_modules\@react-three\drei\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.j s.map'
Full Error:
Failed to parse source map from 'C:\Users\Leroy\ReactProjects\CoolVec\Frontend\node_modules\@react-three\drei\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.j
s.map' file: Error: ...
- 41
1
vote
1
answer
83
views
Visible grey edges inside Html-canvas
Hello i am trying to export a uvmap for a model and i am filling triangles(meshes) with color, it works but i always see grey mesh lines. i tried to draw lines if i draw the lines with different color ...
- 37
0
votes
1
answer
56
views
Detect when object is touched inside pure three js scene
I am building an expo native app, i am using three.js and expo-gl, without fiber and drei packages.
I have a scene with some spheres inside, how i can detect when i touch some object inside scene?
...
0
votes
0
answers
36
views
<Enviroment/> floating model
Seems is not possible to have a 'non-floating' mpdel within a , so I am trying to come up with a workaround as I have seen here:
hack for skyground from three.js,
since I couldnt figure out how to use ...
- 612
0
votes
0
answers
18
views
Three JS (Using globe.gl) altitude bug
import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import Globe from "globe.gl";
...
1
vote
0
answers
33
views
ThreeJs 3d game camera controls different for every direction
I have made this game and when I look one direction, the camera controls are normal, but if I look behind me then they inverse and to the side it makes my camera roll. I suspect this is because the ...
- 59
0
votes
1
answer
90
views
How to fix ThreeJs camera controls only updating for starting view
I am making a 3d Three Js game, but I have run into a problem with my camera controls. When I look the starting direction that you look, the camera controls are all right. But if I look backward, the ...
- 59
0
votes
0
answers
27
views
Clipping - I am facing an issue where the child shape is appearing outside the parent shape
I am new to Three.js and I have created this model. However, I am facing an issue where the child shape is appearing outside the parent shape.
Here's my current view: My modal current view
I'm trying ...
