20,948 questions
0
votes
1
answer
71
views
React three Fiber Model Preloader is transformed by default?
I have added a preloader to my 3D model in a React Three Fiber (R3F) project. I want to display a placeholder image while the model is loading. Once the model has finished loading, R3F will replace ...
- 380
0
votes
1
answer
49
views
How to prevent base color from changing when overlaying patterns?
I'm building a custom racing silks customizer using THREE.js. My app allows users to:
By the way it is something like this website here: https://hylandsportswear.com/kitbuilder/#/customise/80325870?...
- 11
0
votes
0
answers
40
views
How to prevent animations from resetting when scrolling in Three.js/React Three Fiber?
I’m working on a project where I’m switching between multiple animations (e.g., sitting, pointing, phone) based on scroll position. The animations are loaded using useFBX and applied to a model using ...
- 33
1
vote
1
answer
386
views
Why do CDN links work for some versions but not others? NS_ERROR_CORRUPTED_CONTENT
I'm creating a webpage that uses Three.js.
If I use all CDN links from Version 128, my page loads fine:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js">&...
- 1,743
0
votes
0
answers
30
views
Need help adding a convolver node with THREE js
I need help. I am building a musical application that uses convolution reverb. I want to use the spazialization abilities of THREE js but its impossible connecting a convolver node to my sound.
I cant ...
0
votes
1
answer
152
views
gltfLoader with progress counter (loading bar)
I'm am trying to set loading counter for gltf file. Problem is that, my file is gltf, not glb, so I have three files (.gltf .bin .jpg). When I set onProgress callback for gltf file, it does not handle ...
0
votes
0
answers
65
views
Reconstruct world Space from Depth Texture THREE.js Shader Pass
I am creating an Atmosphere shader in three.js. The Shader is passed to a ShaderPass, and the ShaderPass to the effectComposer. I am currently having a problem with utilizing the DepthTexture. The ...
- 1
1
vote
0
answers
86
views
object looks translucent even though opacity is 1 in three js
Why is my three.js cube looking translucent when I change the metalness, roughness, and color even though opacity stays at 1.
The translucence only appears with a rectangle light, not a point light.
...
- 3,053
0
votes
1
answer
120
views
JavaScript requestAnimationFrame accelerates animation over time--How to prevent this?
UPDATE: an example video of the animation arbitrarily increasing in speed: https://youtu.be/ForsJ5b6IQk
I have a Three.js animation that modifies a sphere using requestAnimationFrame(). However, after ...
- 1
0
votes
0
answers
62
views
Procedurally generate glb models
I just recently decided that I want to make a mini Minecraft clone. I have a glb model called grass.glb. how would I procedurally generate this model infinitely to create blocky terrain? (I can do the ...
- 11
0
votes
0
answers
26
views
The object doesnt go fully in spline direction
Iam Implementing a roller coaster
Here's the pseudocode of few functions in the code
Computearclength computes t and its relevant distnace upto that t
MapSToT computes and maps s to t in spline ...
- 44
0
votes
1
answer
73
views
Ripple not displaying in React Three Fiber, and I'm not sure why
I am trying to create a ripple, below is my code but it's not rendering on the screen. I seem not to be getting any errors.
import './App.css';
import { useMemo } from 'react';
import * as THREE from ...
- 1,204
1
vote
1
answer
76
views
How I can optimize React-three-fiber model?
I have model:
import { useGLTF } from '@react-three/drei'
import React, { FC } from 'react'
import * as THREE from 'three'
import { GLTF } from 'three-stdlib'
type GLTFResult = GLTF & {
nodes:...
- 31
1
vote
0
answers
78
views
Adding 2D Text on a 3D Object in Threejs
I've just started learning threejs, thought of working on a pre-made model.
I wanted to work with a Flipper Zero Model.
Here is the link of the model.
Flipper's Screen is called "Object_8" ...
-1
votes
1
answer
66
views
raycasting coordinate problems
Hello guys i w want to implement drag and drop functionality to my project but i have problem with selecting shader objects on a 3d model
i implemented a cursor follower and passed into fragments but ...
- 37
0
votes
1
answer
62
views
Three.js issues with models (Rotating them whilst they are in the scene)
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const canvas = document.querySelector('#frontPageCanvas');
const scene = new THREE.Scene();
const ...
- 1
1
vote
2
answers
234
views
360 degree rotation using orbit controls in threejs?
I am building a panoramic viewer that combines a 3D model and panorama images. The viewer features hotspots within the 3D model, and when a user clicks a hotspot, the view switches from the 3D model ...
1
vote
1
answer
384
views
Using Three.js, and Rapier physics: Why does this object have a jitter on moving?
I have a simple sphere which has an impulse added to it on a tap, but as it moves it seems to jitter a bit as the mesh doesn't quite keep up with the physical model. Is there a solution to this? The ...
- 4,796
1
vote
1
answer
88
views
canvasTexture is blurry meanwhile the origin canvas is not
I'm using canvas as a texture to render a plane, but canvasTexutre on the plane is a little blurry. How can I fix that?
import * as THREE from "three";
const image = document....
- 19
0
votes
0
answers
39
views
Setting custom FOV for A-Frame camera in VR
I have the following code showing me a 360 pano image in VR with the a-sky element from A-Frame.
`import React from "react";
import "aframe";
import interia_lobby from "../...
0
votes
1
answer
64
views
Ensuring thin instanced meshes are always visible in Three.js
I am creating a heatmap with Three.js that has 19 rows and ~6,000 columns. Since there are so many columns, each cell is very thin. Out of the >110,000 cells in my current dataset, 47 are colored ...
- 63
0
votes
0
answers
31
views
React + Three.js: Duplicate Object Created on First Drag
I'm working on a project using React and Three.js.I'm encountering an issue where dragging an object for the first time creates a duplicate of that object. I'd like to understand why this happens and ...
0
votes
1
answer
65
views
Specify three.js graph size
How can I assign a width to the graph shown here - e.g. as a nested, padded element? As shown, the graph takes up the entire page width; I'd like to specify a size, e.g. 800px x 600px.
Is a CSS ...
- 5,182
0
votes
0
answers
50
views
3js Ripples EffectComposer
I'm trying to replicate in react-three/fiber here what I've done here using plain three.
I'm having trouble figuring out how to hide the white ripples after using them for the displacement texture.
...
3
votes
0
answers
392
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 ...
- 1,534
2
votes
1
answer
200
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
129
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....
- 21
0
votes
1
answer
69
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 ...
- 490
0
votes
1
answer
296
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 ...
- 39
2
votes
1
answer
123
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,...
- 33
0
votes
1
answer
82
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 ...
0
votes
0
answers
54
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
38
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 ...
- 329
0
votes
1
answer
252
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, ...
- 503
1
vote
1
answer
128
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 ...
- 43
1
vote
0
answers
74
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
72
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
171
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 ...
- 1,565
0
votes
0
answers
26
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: ...
- 1
0
votes
0
answers
29
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
25
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 ...
- 329
0
votes
0
answers
56
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
46
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 ...
- 1
0
votes
1
answer
68
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 ...
- 11
0
votes
1
answer
33
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
52
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 ...
- 329
0
votes
2
answers
351
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
38
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://...
- 1
0
votes
1
answer
118
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....
- 11
0
votes
1
answer
65
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 ...
