21,153 questions
1
vote
1
answer
18
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
0
answers
20
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
0
answers
16
views
Importing and using three-geo in React-Typescript
In my project I need to implement a 3D Map which is in the best case fully open source (and free of charge apart from tiles) hence, and for other reasons, mapbox-gl is not an option.
I found the JS ...
- 38
0
votes
0
answers
31
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 ...
- 43
-1
votes
0
answers
29
views
How can I recreate this scroll effect? [closed]
I need to recreate this 'Recent work' scrolling effect from monopo.london , but nothing I do works. I couldn't even get close to this effect. the shader effect I was able to make work and everything ...
0
votes
0
answers
25
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
19
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
2
votes
1
answer
73
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 ...
- 43
0
votes
1
answer
47
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?
...
-3
votes
0
answers
62
views
Beginner questions about stacking objects [closed]
I've trying to get over the learning curve with three.js. Never really worked with 3d objects in programing so everything is kind of new. I have written this code that creates cylinder geometry with ...
- 13
1
vote
0
answers
58
views
Is it possible to render a 3D model in a separate thread to prevent animation slowdown? [closed]
I'm working on a React website that uses ThreeJS to display a 3D model that animates based on scroll position. The problem is that rendering the model seems to be slowing down other animations on my ...
0
votes
0
answers
27
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 ...
- 116
0
votes
0
answers
14
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
26
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
63
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
24
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 ...
0
votes
2
answers
63
views
ThreeJS 0.173.0 giving error Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"
This is my simplest threeJS app page. But i am getting this error :
goo-webxr-ac.web.app/:1 Uncaught TypeError: Failed to resolve module
specifier "three". Relative references must start ...
- 10.6k
1
vote
0
answers
29
views
Normal Map is not displayed on Extruded SVG in THREE.js
The Normal Map, Roughness Map etc is not visible on the 3D Objects I extruded from an SVG. I have tested it with normal Box Geometrys and there it worked perfectly fine. Color, Opacity etc is also ...
- 63
0
votes
0
answers
25
views
How to animate a React Three Fiber "group" object with NEW framer motion?
I am building a 3D website with different pages. I am trying to make "prior" sections disappear when advancing to "further" ones by setting their y-position to -5 when not on that ...
- 1
4
votes
1
answer
67
views
Why do my Three.js game camera controls glitch / not work
I have made a game, and everything works, except when I move the camera with my mouse, everything duplicates in my view. I see a quickly alternating version alternating between my original camera view ...
- 59
1
vote
1
answer
86
views
How to create a 3d Rugby ball with 2 different images on it's subsequent faces
I'm trying to create a 3d rugby ball using ThreeJS and RTF and I'm struggling to create 4 faces on the ball where two subsequent faces on the ball will have two different images. Something similar to ...
- 39.5k
0
votes
1
answer
39
views
three-globe custom html markers not updating their position when the globe is rotating on y axis
I'm using the three-globe library to make a 3D interactive globe with custom html markers, I used this example https://github.com/vasturiano/three-globe/blob/master/example/html-markers/index.html but ...
0
votes
0
answers
22
views
React-Three-Fiber: Camera Won’t Face HoverableCube After GSAP Transition (Controls.Target Issue)
Issue Description
I'm using react-three-fiber and I have a function called HoverableCube that creates a transparent, interactive cube. When clicked, it moves le camera clos to it and should have the ...
- 1
-1
votes
0
answers
67
views
How to use 3D avatar in chatbot using Three.js?
I got a 3D avatar model from Sketchfab with MouthOpen and MouthClose shape keys.
I have tested the model in Blender and shape keys are working fine.
Now I have imported the model in my React project ...
- 185
0
votes
0
answers
30
views
vertical surface detection in webxr in andriod webar
I have this webxr code, it is detecting the floor (horizontal surface) correctly (after taking sometime) but its failing when I move my camera towards the wall. I am using chrome on andriod. What I am ...
- 10.6k
1
vote
2
answers
60
views
Three.js Scene Freezes When Browser Tab is Idle
I'm working on a Three.js project with a Tamagotchi-style animated character using GLTF animations and an animation mixer. The project includes a robot, a hatching box, and interactive controls.
...
- 865
0
votes
0
answers
46
views
ThreeJS and SVG textures
I've been trying to get an SVG to work with Three.js. I've learned it doesn't initially support SVGs, and an SVGLoader is required. After adding that in, the issue I'm having is the mesh completely ...
0
votes
0
answers
44
views
Projecting HTML Onto a Screen in ThreeJS
I have a Screen FC defined as
import React, { useRef, useEffect } from "react";
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/...
- 1
0
votes
0
answers
28
views
How to add background behind the three.js model in html for a section?
I want to move background behind the model covering the whole section.
I have created a stackblitz sandbox [https://stackblitz.com/edit/sb1-el22jkdo?file=src%2FApp.tsx] for my project so that it is ...
- 21
-3
votes
0
answers
33
views
How to Convert World Coordinates to Relative Rotations for an FBX Avatar?
Problem Overview:
I am working on motion transfer from video to an FBX avatar (e.g., student.fbx) using React Three Fiber (R3F). I have completed pose estimation, joint correction, and mapping of ...
-1
votes
0
answers
41
views
Blender Textures not applying correctly in Three.js[Beginner]
I'm learning Three.js and making 3D object with Blender.
but I'm in trouble.
I actually made a texture in Blender and exported GLF file.
when I use the GLF file in Three.js, it doesn't have texture.
...
- 1
0
votes
0
answers
27
views
React Three Fiber VideoTexture - Frequent "stalled" events when trying to load the video
I’m using React Three Fiber and THREE.VideoTexture to display videos as textures. However, some videos trigger frequent "stalled" events, especially in Safari, while not so much in Chrome.
I ...
2
votes
1
answer
46
views
How to implement KHR_materials_dispersion?
I see this GitHub page. Sadly, Khronos Group has provided no documentation on how to actually use it, as far as I can tell.
The Three.js Editor has a slider for Dispersion listed for type ...
- 1,689
0
votes
0
answers
33
views
ThreeJS: Delete entire object on traverse()
so i dont know how to delete an object under traverse function in three js
I know how to colour it, but i dont know how to delete it
here is my code:
const raycaster = new three.Raycaster()
document....
0
votes
0
answers
54
views
How to preserve mobile scroll inertia by using Lenis and syncTouch
I am currently working on a project, involving three.js, gsap and lenis.
I found a way to preserve 120fps on desktop and 60 fps on mobile, by using syncTouch: true from Lenis. This option stop the ...
0
votes
0
answers
31
views
What might be causing an object(s) to flicker upon completing a camera rotation in THREEjs?
So I've been learning THREEjs to be used in NextJS web apps, and I've managed to get some simple animations to work. I also set up rotation for the camera, so the user can go left/right to the next ...
- 1
0
votes
0
answers
33
views
ThreeJS: Raycaster selecting old, wrong nodes
so i've made made an update on my GLB files
As you can see this is my chair in blender
And these are the child nodes that make up the figure of the chair
As you can see its only an one child node
...
0
votes
0
answers
42
views
Video Texture Not Displaying on iPhone Model in React Three Fiber (R3F)
I am working on a React Three Fiber (R3F) project where I want to display a video texture on an iPhone model. The scene is using @react-three/fiber, @react-three/drei, and GSAP for animations. However,...
0
votes
0
answers
29
views
How to correctly layer a 3D model and CSS3D divs in Three.js so the divs are placed in front and behind the model?
I'm trying to use both WebGL (a Three.js 3D model) and CSS3D (HTML divs) in the same scene. The goal is to render one div behind the 3D model and another in front of it. However, currently, the model ...
- 1
-1
votes
0
answers
35
views
how to express water with waves in three.js?
I am trying to create a water surface with waves using the Three.js ocean shader example. code example
However, when I run the same code from this example, my result looks completely different.
The ...
- 1
0
votes
1
answer
39
views
GLTF Model Backside View Appears not Lighter
"I'm new to Three.js and have created a .gltf file using Blender. However, I'm facing an issue where the backside of my object appears lighter than expected.
Here's my current view: https://i....
0
votes
0
answers
30
views
The position of the iframe changes when i zoom in and zoom out in the browser (i.e. ctrl + '+' or '-'
when i zoom in and zoom out in the browser the iframe inside the changes its position.
i am using react three fiber to create a portfolio website. i tried to changing the distanceFactor but it doesn'...
0
votes
0
answers
63
views
How do I apply a suction effect to my THREE.js model using a vertex shader?
I don't have alot of experience with vertex shaders.
I have imported a model into Three.js and am creating a custom shader material that is showing the model fine
But when I apply the affect; it isn'...
0
votes
1
answer
36
views
how to function "position.set" method in Three.js?
The center of boxMesh has default value(0,0,0).
I think when I use boxMesh.position.set(1,0,0), the center of boxMesh would be (1,0,0).
but it doesn't looks like (1,0,0), it looks like (2,0,0)
Doesn't ...
- 1
0
votes
1
answer
45
views
Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)
so i’m trying to make a simple game with three.js
My first step here is loading a GLTF file, but gives me this error:
Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)
What i ...
0
votes
1
answer
46
views
Make the child of a loaded gltf file transparent dynamically using THREE.JS
I’m new to Three.js but have some experience with javascript. I’m loading a gltf model with an async loader function. This all seems to function correctly. I’m them creating a series of timer events ...
- 1,103
0
votes
0
answers
24
views
Discrepancy Between Original 3D Jeans Model and Output in React.js Using Three.js
I am facing an issue in development. I am implementing a 3D model of jeans in React.js using the Three.js library. In fact, the model is showing in the output, but there is a difference between the ...
1
vote
1
answer
45
views
ThreeJS FPS Movement, Stop Velocity When Key Is Released
For my game I need a simple FPS player character and I have used the ThreeJS FPS example as template for my setup. This is the code used for player WASD movement:
if (this.keyStates['KeyW']) {
...
- 1,247
0
votes
1
answer
41
views
How to handle independent camera elevation in Three.js
I have the following code that is run on every frame:
const yRotationPerFrame =
(scaleSensitivity(leftStick.x) * framePeriod) / 15
const forwardVelocity = scaleSensitivity(...
- 39
-1
votes
0
answers
60
views
how can i set up angular three and three js in an angular project
I'm trying to integrate Three.js with Angular using the @angular-three/core package in a new Angular 19 project, but I'm facing persistent dependency version conflicts.
Here's my environment:
Angular ...
