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

Html doesn't work properly with ScrollControls

<Html portal={{ current: gl.domElement.parentNode }} scale={100} transformGroup > <div className="about-wall about-wall-text" style={{ width: '40rem', position: 'fixed', ...
Portgas D. Ace's user avatar
0 votes
0 answers
21 views

Monitoring iOS safari crash: This webpage was reloaded because a problem occurred

I have problem with mobile safari in my react application. When user clicks on the button X I run memory-heavy-3d-component (three.js-based) and safari crashes with This webpage was reloaded because a ...
godblessstrawberry's user avatar
-12 votes
0 answers
164 views

Transforming between screen and game coordinate systems [closed]

I want to transform coordinate systems so that I can calculate where an onscreen click corresponds to in a 3D game environment (created using Three.js). The game environment is largely (though not ...
iPadDeveloper2011's user avatar
0 votes
0 answers
20 views

Keyframed transition animation in threejs

I have an array of regular hexagons, those hexagons all together cover a surface (equivalent of the surface of my viewport), they are ordered from the center of the surface to the edges, each hexagon ...
user2968425's user avatar
0 votes
0 answers
27 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 ...
Muhammad Saqib's user avatar
0 votes
1 answer
33 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?...
Mahi Patel's user avatar
0 votes
1 answer
25 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 ...
dzekiczan1's user avatar
0 votes
0 answers
29 views

How can I dynamically update a 3D model's texture in real-time using Three.js and WebGL?

I'm working on a web application that involves rendering 3D models using Three.js and WebGL. I need to dynamically update the texture of a 3D model based on user interactions. Specifically, I want to ...
Python_Decoder3's user avatar
1 vote
1 answer
65 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">&...
Mentalist's user avatar
  • 1,623
0 votes
0 answers
17 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 ...
Jeremiah Thompson's user avatar
-2 votes
0 answers
20 views

Materials in gltf imported model not showing Three.js [closed]

I am new to Three.js and Verge3d. I have an issue with my glb.file in which my materials that I put on my object (Blinn and Lambert) are not appearing on Three.js. I tried to test it out on the gLTF ...
YoNoms's user avatar
  • 1
0 votes
1 answer
62 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 ...
Fedja Hadzibegovic's user avatar
0 votes
0 answers
24 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 ...
awalter7's user avatar
1 vote
0 answers
68 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. ...
Dashiell Rose Bark-Huss's user avatar
0 votes
1 answer
75 views

JavaScript requestAnimationFrame accelerates animation over time--How to prevent this?

UPDATE: Here is the codepen for your reference: https://codepen.io/ebarrios10/pen/gbYQWex I have a Three.js animation that modifies a sphere using requestAnimationFrame(). However, after sending a few ...
EbDev's user avatar
  • 1
0 votes
0 answers
17 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 ...
bingandabong's user avatar
0 votes
0 answers
22 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 ...
COLONEL FF's user avatar
0 votes
0 answers
39 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 yet its not rendering on the screen, yet i seem not to be getting any errors. import './App.css'; import { useMemo } from 'react'; import * as ...
Ande Caleb's user avatar
  • 1,204
1 vote
1 answer
34 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:...
Nik's user avatar
  • 31
1 vote
0 answers
40 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" ...
rahulpandharkar's user avatar
0 votes
1 answer
37 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 ...
Bn'R's user avatar
  • 23
0 votes
1 answer
40 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 ...
YoNoms's user avatar
  • 1
0 votes
0 answers
11 views

How to access renderer-object in Ar.js with Three.js (Aframe)

im developing an AR-Application using Ar.js / Aframe / Three.js. To implement a mirror, I want to use a THREE.CubeCamera. However, I have to add the line mirrorCubeCamera.update(renderer, scene); in ...
balkongenie's user avatar
1 vote
2 answers
93 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 ...
Yashwant Raut's user avatar
1 vote
1 answer
60 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 ...
Wex's user avatar
  • 4,686
-4 votes
0 answers
24 views

threejs canvasTexture is blurry meanwhile the origin canvas is not [duplicate]

I'm using canvas as texture to render a plane, but canvasTexture on plane is a little blurry. How to fix blurry part? render result picture Here is the JS code: html code picture js code picture ...
L_T's user avatar
  • 1
0 votes
1 answer
74 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....
L_T's user avatar
  • 1
0 votes
0 answers
17 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 "../...
shoukath Ali Shaik's user avatar
0 votes
1 answer
40 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 ...
eigenVector5's user avatar
0 votes
0 answers
35 views

Building a 3D Configurator API Service

I have been building product configurators with Unity and Unreal Engine for almost 5 years now. I would like to create an API service that will do the following: send a configuration combine all ...
Christian Stamati's user avatar
0 votes
0 answers
20 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 ...
Balavigneshkumar Pethuchetty's user avatar
0 votes
1 answer
46 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 ...
Victoria Stuart's user avatar
0 votes
0 answers
41 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. ...
Fausto Renier's user avatar
-1 votes
0 answers
21 views

Add custom hand gestures in three.js

I have searched the web for ways to add custom hand gestures in three.js WebXR and came across handy.js and other complex packages. I only need to define a few custom gestures that I can express in ...
Matthias Möller's user avatar
3 votes
0 answers
164 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 ...
AzizStark's user avatar
  • 1,504
2 votes
1 answer
98 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 ...
Vadim Semashko's user avatar
1 vote
1 answer
66 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....
Abhi's user avatar
  • 21
0 votes
1 answer
48 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 ...
steveblue's user avatar
  • 490
0 votes
1 answer
50 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 ...
Itis Me's user avatar
  • 39
2 votes
1 answer
69 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,...
javanub's user avatar
  • 33
0 votes
1 answer
43 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 ...
dik james's user avatar
-1 votes
0 answers
19 views

Setting up threejs and running it

I encountered difficulties while attempting to execute a straightforward Three.js project. Despite adhering to the provided guide, I discovered that I lacked the necessary libraries. Consequently, the ...
Iann's user avatar
  • 1
0 votes
0 answers
34 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 ...
Alejandro Vazquez's user avatar
0 votes
0 answers
29 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 ...
Thuan Tran's user avatar
0 votes
1 answer
51 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
  • 403
1 vote
1 answer
76 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
  • 33
1 vote
0 answers
25 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
61 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
1 answer
43 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,515
0 votes
0 answers
13 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

1
2 3 4 5
423