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
0
votes
0
answers
36
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 ...
- 3
-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
46
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 ...
