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,176
questions
0
votes
0
answers
9
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
11
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 each ...
- 3
0
votes
0
answers
14
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
27
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 ...
- 27
0
votes
0
answers
19
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,232
0
votes
0
answers
16
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
20
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
33
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
28
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 ...
- 117
0
votes
0
answers
19
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
17
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
16
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,414
0
votes
0
answers
14
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
16
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
27
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
43
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
13
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
50
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
22
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
-1
votes
0
answers
18
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%',
...
- 11
0
votes
0
answers
13
views
Error when integrating Spline3D Model into React Three Fiber
I made a model using Spline3D, and downloaded the react-three/fiber code directly from the site. When I integrate it into my React website, I'm getting the following errors:
ReferenceError: Can't ...
0
votes
1
answer
121
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 ...
- 11
-1
votes
0
answers
22
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
20
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
31
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
20
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
18
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 ...
0
votes
0
answers
29
views
How to put a shapeGeometry background image in threejs
I searched various places and did not get the results i wanted. Thre reason why I changed gemetry to shape is that the position of each vertext of the obect, that is. the value in points can be ...
- 13
0
votes
0
answers
12
views
three.js set break when using Line2 and LineMaterial
I have a bunch of points that are part of each cube face and are set in consecutive order.
when passing all those points to the LineGeometry there is a diagonal line as a result of connecting all the ...
- 257
1
vote
1
answer
27
views
three.js fat lines - line width is exaggerated
I've just followed this fat line tutorial from threejs examples
https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html#L105
However, when setting the code the line gets rendered ...
- 33
0
votes
1
answer
28
views
Edges geometry - Draw boundary edges from a mesh that is not located at the origin
So I have a cube mesh placed at a random location:
mesh.position.set(target.x, target.y, target.z);
scene.add(mesh);
I want to draw its edge lines in that location. I tried using EdgeGeometry as ...
- 33
0
votes
0
answers
32
views
Three.js render the boundary lines of a cube mesh [duplicate]
I tried setting the wireframe prop as true to render the edges as lines. However, since the mesh is made out of triangles, all it's edges get visible. I only want to render the boundary lines from the ...
- 33
-1
votes
0
answers
32
views
Change animation scale and position with Blender Python
I'm working with 3D in SceneKit, iOS.
For my scene I take a glb model from my provider and animation for it in dae format from mixamo.com.
Problem: when I try to apply the animation on my model, it ...
- 381
0
votes
0
answers
25
views
Three.js outlinePass add-on not working when implemented with R3F
I'm having a hard time using the R3F -postprocessing library so I decided to use raw threejs classes:
By diving into the R3F extending third party library tutorials I managed to setup the renderPass ...
- 257
0
votes
1
answer
53
views
Normal map BG image for website, with fixed light source
I would like to be able to use normal maps in my site's background images. This CodePen example seems to be the best from all the implementations I've seen so far. It uses three.js to achieve the ...
- 1,657
0
votes
1
answer
29
views
React three fiber - setting up postprocessing using effectComposer and Passes (OutlinePass) from three.js addons
I'm having a hard time using the R3F -postprocessing library so I decided to use raw threejs classes:
By diving into the R3F extending third party library tutorials I managed to setup the renderPass ...
- 257
0
votes
1
answer
35
views
Threejs adding 1080p textures is rendered blurry
I am trying to render a sphere with a texture wrapped on it, i am using a png texture with 1920px1080p resolution but the resulted texture is always very blurry,
here is my sample code :
var ...
- 1,586
-1
votes
0
answers
16
views
R3F how can I get the camera controls through the hook get()
In a model class I'm calling the r3f hook get() to the camera controls
const { raycaster, camera, scene, gl, controls } =
ViewerModel._shared.viewerState!();
the console log prints it as a ...
- 257
0
votes
0
answers
16
views
Parametric Relationships: Walls, Floor in THREEJS
Does anyone know how to create interactive walls in Three.js that automatically adjust when a connected wall is manipulated? I have a room modeled as a GLB file, comprising four walls and a floor. For ...
0
votes
0
answers
61
views
How to Load a .world Robot File Using Three.js in a Web Application?
I'm working on a web application and I need to load a .world robot file using Three.js. I've tried using the Collada loader but haven't been successful. Can anyone guide me on how to achieve this?
The ...
0
votes
0
answers
28
views
threejs HDR does not work in three dimensions
I used RGBEloader to load an HDR file.
Wanted it to work three-dimensionally, but it doesn't.
Spent a lot of time trying to solve this problem, but it remains unresolved.
__webpack_require__.r(...
0
votes
0
answers
38
views
Implementing 3D Object Animation with Bouncing and Color Change in WebGL/Three.js
I need to create a 3D object (cube, sphere, or torus knot) that moves around the viewport, changes direction upon hitting the edges (bouncing effect), and changes color each time it bounces. I'm using ...
2
votes
0
answers
36
views
Create Perfect Spherical Icosphere with Smooth, Curved Triangles using Three.js
I am working on a project using Three.js and Next.js to create a perfect spherical icosphere with the following requirements:
The sphere should be solid and 80% dark.
The triangles should be 100% ...
0
votes
1
answer
16
views
How can I get a group of triangles that comprise a cube face?
I’m trying to get the triangles that create a cube mesh face.
This is what I tried:
The box geometry mesh turns to have a groups array of 6 items. I assumed that since a cube has 6 faces, each of this ...
- 257
0
votes
1
answer
15
views
When using points in ThreeJS there is a black background on each point if using depth writing
I have a scene where I use points, like so
<points ref={gPoints} position={position}>
<bufferGeometry attach="geometry">
<bufferAttribute
...
- 11
0
votes
0
answers
19
views
3d Model not deattaching/removing when radio button unselect
The problem is that I am rendering a 3d boat model which has different sections in which there are options with multiple select and single select which are dealt with radio and checkboxes. Now issue ...
0
votes
0
answers
19
views
The rotation point for the BabylonJS sprite
I recently encountered a problem with the Pivot method for BabylonJS frame sprites, it does not exist :D I would like to ask if anyone has encountered a similar problem and how to set the rotation ...
