Questions tagged [three.js]
Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.
three.js
21,183
questions
-2
votes
0
answers
11
views
Three.js Globe that only works when placed on top
This world map only works when you put it at the top of the website. I wonder why?
It doesn't work when I put it towards the middle of the site, but it works when I put it at the top.
I want it to ...
- 1
-1
votes
0
answers
37
views
Some of three object are crashing
I'm using react three/drei library to render some 3d objects in my website , on desktop they're all rendering correctly but in mobile some of them are crashing and not displayed properly , i asked ...
- 1
-3
votes
1
answer
46
views
I need help on why my three.js code isn't working [closed]
I want to learn three.js and tried following the getting started code on the three.js documentation, but the scene isn't rendering, and I am completely stumped.
index.html:
<!DOCTYPE html>
<...
- 1
-1
votes
0
answers
28
views
When using PlaneGeometry with ShaderMaterila my browser throws "Program Info Log: Fragment shader is not compiled."
I am new to Three.js and running on version 0.167.0 of Three.js.
I am trying to create a PlaneGeometry with ShaderMaterial, but I get an error and nothing renders in the scene.
Here is my code snippet....
0
votes
0
answers
22
views
THREE.OrbitControls is not a constructor, THREE is not defined
I am developing a Dash app with a ThreeJS component embedded. This is not the final project, but an example. I dont know to fix this, since I have tried a lot of things and ChatGPT, Gemini and Claude ...
- 3
-1
votes
0
answers
7
views
border around 2D shape shader
I am writing a shader for threeJS to draw a frame around a shape geometry, (usually a rotated rectangle but could have point points potentially).
I am passing the corners -2D points- to the shader ...
0
votes
0
answers
22
views
Scaling issue with cylinder created from blender scaled using three js
I have an OBJ file created using Blender. I need to scale it using Three.js. The scaling works well for cube-like objects, but cylinder-type objects are not scaling correctly. Please correct this.&...
-1
votes
0
answers
23
views
Error loading model on website served through GitHub pages: SyntaxError: Unexpected token 'v'
so I'm fairly new to coding, GitHub pages all of it. I am trying to serve my website over there which includes three 3d models (their files being larger than 100mb) which I have added to the git ...
1
vote
1
answer
46
views
Showing stats of vertices and triangle counts on editor
In the example editor how does Three.js rendering a legend showing the number of Vertices and Triangles and also a 3 axes helper legend, I added screen shot of the scene with these legends.
I want to ...
- 110
1
vote
0
answers
34
views
I can load GLTF files from a URL asynchronously. I want to do the same with drag/drop GLTF files
The code I am working on supports loading GLTF models from remote URLs. I made a small async function that also adds some meta data to the GLTF object which is used later.
It works great.
Now, I want ...
- 158
1
vote
0
answers
23
views
How can I convert MediaPipe's normalized screen space coordinates to world space meters?
I'm trying to create a web application in React JS that uses MediaPipe to track facial landmarks and then displays a 3D model in A-Frame, aligned with the face.
MediaPipe provides facial landmark ...
- 127
-2
votes
2
answers
50
views
how i can fix this error?! : Uncaught ReferenceError: THREE is not defined [closed]
I created a subdomain inside the host and inside this subdomain I created a folder and created an index file to call the threejs code, which is my code:
<script>
// صحنه، دوربین و ...
0
votes
0
answers
21
views
Three JS move object on hover
So i want to create website like sparkk.fr the landing page contains "let us play with your ideas" with 3d object that can be hovered wanted to create that landing page breaking the cubes ...
0
votes
1
answer
36
views
How to make orbit controls' center something other than the center of the canvas?
I want to rotate an object or the camera around the center of an object, however the object is not placed in the center of the canvas, a little to the left. So using OrbitControls is making the object ...
0
votes
0
answers
47
views
How do i pass uniforms to my glsl code at compile and during run time in three js?
I have a three js scene where i render meshes from a sdf glsl shader. I want to create uniforms on these shaders to adjust the distance field via sliders in the UI. Passing the shaders in from another ...
- 11
0
votes
0
answers
23
views
Camera world angle
I want to know the camera angle based on world coordinates. I use rotation to convert radian to Degrees. But the rotation is Euler angles which uses local coordination.
Is there a way or property to ...
- 395
0
votes
0
answers
37
views
How to Convert Camera Calibration Data to Specific Format?
I have camera calibration data in the following format from OSDaR23 dataset::
{
"streams": {
"intrinsics_pinhole": {
"camera_matrix": [
...
- 55
0
votes
1
answer
30
views
Unexpected Identifier $: QwikJs
I've written some code to display a 3D model using Qwik and Three.js. Unfortunately, I'm encountering an error that indicates an "unexpected identifier '$'." I suspect this issue might be ...
- 111
0
votes
0
answers
23
views
The scroller delays (or lags) when using react-three/fiber and framer-motion
I'm trying to combine three.js content by react-three/fiber and framer-motion.
The problem is that when I use framer-motion to pin the canvas to the top, I notice a delay gap between my HTML content ...
- 13
0
votes
0
answers
20
views
How To Let ShaderMaterial Receive/Cast Shadows
So, I have been playing around with vertex and fragment shaders, and wanted to know if there was a way to add shadows to the fragment shaders? I have tried many unsuccessful attempts, and researched a ...
0
votes
0
answers
17
views
Any ideas why the code for this cube syncs with the rotation of the headset in VR but not on anything else?
I'm working on a project in AFrame/Three.JS with VR using croquet to have events sync between multiple users. When the user enters VR I switch the camera position and send an event to the model within ...
- 11
0
votes
0
answers
20
views
Threejs, Applying position.set() on a Group produces odd positions for its children
The initial position of the camera is (0,0,0). I set this because I want to display a flat object on a flat surface like Pigma. Next, create a new room in your new room. To create a room, we receive ...
- 13
0
votes
1
answer
32
views
How to enable camera scroll and disable zoom using camera controls drei
I use CameraControls of Drei Three JS to controls the transition. I already create useEffect to update the zoom, scroll, and rotate of the CameraControls but the zoom and rotate event still enable. ...
- 199
0
votes
0
answers
25
views
Only get current scene camera value once
This has wasted too much time, and I need to get some help.
I've created a program which has multiple graphs -- one of them is a threejs plot. As the user changes the orientation of the 3d plot, I ...
- 367
0
votes
0
answers
13
views
How to create a static Alphamap texture from canvas in 3js defined by world coordinates
I am currently in need of adding holes to a shape mesh that can be dynamically generated. The mesh is created from using mergeBufferGeometries on an array of ShapeGeometry. These shapes do have their ...
- 106
0
votes
0
answers
18
views
How can I improve performance in rendering a 3D Model in Three JS
I have some code for importing a 3D model (locally saved) and rendering it inside of my site via Qwik and Three js. The only problem is, that it causes the site performance to crash astronomically and ...
- 111
0
votes
1
answer
33
views
Cannot open a gtlf file on html using three js
I am looking to open a 3D image I downloaded from Sketchfab and make it interactive and clicakble using three js. I have followed the instructions by ChatGPT, so I have all the scrypts I need in the ...
0
votes
0
answers
21
views
Rendering a 3D Cuboid onto a Camera Image Using SVG in Three.js
I’m working on a project where I need to render a 3D cuboid onto a camera image using Three.js and SVG. Here are the details:
3D Cuboid Data:
{
"id": "c90193ab-1812-4b52-a853-...
- 33
0
votes
0
answers
31
views
T Pose between animations in React Three Fibre
I am using 3d models from Ready Player me and animations from Mixamo, when I switch between animations, I want a smooth transition but instead I get a T-pose between animations. The 3d models are glb ...
- 83
0
votes
0
answers
12
views
Texture on GLTF model is duplicated in Three.js. How to render texture without duplication?
I am attaching a picture below.
I have a React app with a GLTF model in it. I can put a texture on this model, but for whatever reason, this texture (Starbucks logo) is duplicated. I don't want it to ...
0
votes
0
answers
22
views
How to detecting and measuring edges of real world objects in AR using WebXR?
I am trying to build an AR measure App. The user will be able to measure distances using AR ( WebXR ). I have figured out the distance measure part and it is working fine. Currently I am using hit ...
- 535
0
votes
0
answers
37
views
Locomotive-scroll don't work in my code in R3F
Locomotive scroll doesn't work in my code. When I click on a 3D element it displays a modal with text and I'd like to add scrolling effects with locomotive, I don't get console errors but scrolling is ...
- 1
0
votes
0
answers
30
views
How to resolve the error 'Module parse failed: Unexpected token (13:12)' in react-native-web?
i'm trying building react-native with react-three-fiber on web by react-native-web
It works, but with react-three-fiber
Trying to import react-three-fiber/native according to the environment
I wrote ...
- 11
0
votes
0
answers
38
views
Three.js infinite scroll
I'm trying to implement an infinite scroll to this web page I'm building.
Basically what I want to do is as soon as one element (the card/box) is out of the camera view, it gets moved at the end of ...
- 3
0
votes
0
answers
15
views
Three.js Draco compression by gltf transform
I want to apply draco compression on the scene which is currently present in the scene without downloading. I know we can read a glb or gltf file from local. I want to read the scene currently present....
0
votes
0
answers
27
views
Three fiber properly initializing InstancedMesh with useEffect to prevent unnecessary updates
I am creating a three-fiber project of a globe with different markers in cities. The idea is that you can click on a marker to see information about the city.
To create the markers, I am using an ...
- 1
0
votes
0
answers
23
views
Raycasting and Hover Effect
Hello to everyone who's reading!
I'm building a website in THREE.js where you can scroll through "cards" that are seen isometrically, and I'm currently adding an animation when hovering over ...
- 3
1
vote
0
answers
27
views
ThreeJs codepen to React component
I've been trying to move this codepen.io to a react component, this what I did:
React Custom Hook
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { createNoise4D } ...
0
votes
0
answers
51
views
How to apply a minecraft skin texture to my model and add the outer layer to the model?
I want to add minecraft skin model to my website using three.js:
I'm using next.js, so to interact with three.js I use @react-three/fiber and @react-three/drei.
I just started learning three.js and ...
- 29
0
votes
0
answers
21
views
What is the proper way to Mirror a SkinnedMesh in three.js?
I'm loading a glTF model of a right hand, and then loading it again (later I'll just clone the already-loaded one) and attempting to flip it in order to create a left hand.
I know a mesh/Object3D can ...
- 1,240
0
votes
0
answers
25
views
error with the path to import GLTF loader on threeJs
I had a problem who persist with a test project with three js...
i made my 3d models on blender anbd export him to .glb format and now try to imoport it to my scene with GLTF Loader but always the ...
0
votes
1
answer
25
views
Fetch Textures From a Collection
Hello everyone who's reading.
I'm trying to create a website where I can mouse scroll through "cards" that are all in a single line, seen with a iso view from the side.
I've set up the scene ...
- 3
1
vote
0
answers
40
views
How to Change the Initial Perspective of CameraControls?
I've written a React component where I'm trying to change the initial perspective of CameraControls, but I haven't been successful. Does anyone have any ideas?
The code to change the position of the ...
- 100
0
votes
1
answer
45
views
How can I display a GLTF File using Qwik and Three Js?
I have this current code setup in the qwik js framework to display a gltf file inside of my website using three js, but for whatever reason it simply doesn't display it. There are no error logs or ...
- 111
0
votes
0
answers
23
views
How to apply a shader texture to a GLB model element while preserving the native GLB texture?
I have a GLB model and I want to apply a shader texture to it in three.js
But I want to preserve the texture of the model that was created in Blender
Unfortunately, the shader completely overwrites ...
0
votes
0
answers
21
views
ThreeJS hitbox manipulation
Very new here, apologies if this is super basic.
I have a sphere. I want to:
Be able to create zones on the mesh. So at a start there will be one zone completely around the mesh. This is essentially ...
0
votes
1
answer
24
views
Cannot find module 'three/examples/jsm/controls/OrbitControls' or its corresponding type declarations
I'm using TypeScript and three.js in my React project, and I'm importing OrbitControls like so:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/...
- 2,505
0
votes
0
answers
16
views
How to access the ar.js camera feed in order to take a snapshot?
I'm trying to take a snapshot of the camera feed in order to scan QR codes in my application.
I've tried to inspect the data using the code below, but I can't find a way to access the media stream.
...
- 21
0
votes
0
answers
17
views
Three.js: How to prevent flickering, which occurs when page restarts. (White flashing)
On my discover flickering occurs when page “off”. Effect act during 1-2ms in canvas. Moreover this problem may occur or not occur in any canvas blocks on page.
I tested more variants of solution this ...
- 1
0
votes
0
answers
29
views
Camera Positioning Issue: Integrating Three.js MapControls with GSAP Animation for Precise Target Locations
I’m encountering a problem while animating my 3D model using GSAP and Three.js. Specifically, the issue occurs when I pan the model - the camera doesn’t move to the intended target position correctly.
...
