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,170
questions
0
votes
0
answers
10
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.
...
0
votes
0
answers
29
views
How to make completely white floor with shadows?
Please help. I want white floor and shadows on it, but all I get is lightgray floor with very thin shadow:
lightgray floor
My floor and light configuration:
const ModelSceneEnvironment = () => {
...
-1
votes
0
answers
11
views
How to Rotate Camera Around a 3D Map in React Three Fiber Without Moving Too Far From the Map (not in a circular path)
I am working on a 3D map using React Three Fiber, and I have implemented auto-rotation using OrbitControls. However, the camera rotates in a perfect circle, causing parts of the map to appear far away ...
2
votes
0
answers
46
views
Trouble with correctly triangulating a polygon on a sphere in THREE.js
tldr: help I can't correctly triangulate a GeoJSON polygon in 3D space to make it spherical and it has been haunting me for weeks. The question at the end of this novel is "Is this a poly2tri ...
- 41
1
vote
0
answers
16
views
Three.js + Next.js Not rendering twice
The Problem
Whenever I open and close my dialog in production, the threejs scene does not remount.
Here's the expected behavior..it works just fine running locally on my machine
However, in ...
- 117
0
votes
0
answers
15
views
Environment from @react-three/drei triggering a rerender
I have a scene like this
<Canvas className="App"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
...
- 13
0
votes
1
answer
53
views
Why does the error While resolving: [email protected] occur while installing react-three-fiber in react-native?
I am trying to use react-three-fiber in react-native. When I try to install and run it according to the manual, the following error occurs.
When I run npm install, the following error occurs. Can you ...
- 9
-1
votes
0
answers
20
views
How to deploy React Typescript Three/fiber on Netlify.com [closed]
I'm trying to deploy React Typescript Three/fiber and Three/drei to Netlify.com.
Deploying is success but I can't see any Html elements that I wrote.
I got these messages in inspector window.
I guess ...
0
votes
0
answers
22
views
How Can I fit Three js object to screen?
I have multiple objects in my scene. I need to implement Zoom Extents feature that automatically fits(shows) all the objects to screen. In my case, I'm using Orthographic Camera and Arcball Controls.
...
- 21
0
votes
0
answers
21
views
Add MorphTargets in the gltf file
I am searching for realistic Avatar 3D models for lipsync I found the models but in that model, there are no MorphTargets so I'm not able to do lipsync with that avatar. Manually I want to add it Can ...
0
votes
0
answers
26
views
How to Create 3D Family Tree [closed]
I am working on a personal project called "Family Tree" using technologies Spring Boot, React.js, Three.js etc.
However, I face some difficulties in creating the 3D Tree using Three.js.
What ...
- 35
-1
votes
0
answers
18
views
Three.js outline affect problem,can't show the scene clearly
I tried to add outline affect for a cube at scene.But the scene has some problem:the scene is so vague that I can't see the cube clearly.I tried to use SMAAPass before but it didn't work.I want to ...
- 1
0
votes
1
answer
26
views
three.js rendering spheres in wrong position
I am new to three.js and I was trying this code but I encountered unexpected output so wanted to check what I am doing wrong here or looking to find reason behind output i am seeing.
import * as THREE ...
- 1,538
0
votes
0
answers
19
views
Link device's gyroscopic orientation with that of 3d model on web
I am trying to build a model rocket that uses an old phone for reading gyroscopic data using a webapp (Flask and flask-socketIO). the "rocket phone" goes to /rocket and sends gyroscope data ...
0
votes
0
answers
16
views
Three.js sprite in mapbox combine
mapbox-gl-js version: 3.4.3
browser: chrome 126
Steps to Trigger Behavior
I used the example Add a 3D model use threejs of official website to add sprite, but the display is not correct and I can't ...
