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.
21,006
questions
0
votes
1
answer
25
views
How do I leave only the arrows in TransformControls mode translate?
At the moment TransformControls fits my needs but they have extra stuff like arrows in distance of the object and some squares. Is there anyway of me turning these off and instead keep only the arrows?...
0
votes
1
answer
45
views
OBJ File not appearing in React | Threejs
I am using Threejs for generating 3d models in react.
I have this threejs code:
import * as THREE from 'three';
import { useEffect, useRef } from "react";
import { OBJLoader } from 'three/...
0
votes
0
answers
16
views
How to configurate toJSON and Object loader for a custom object?
I have been trying to build a program to virtualize server room. I need to be able to save the scene as json and load it back but all the ways I have tried failed. Is there a simple solution? Here my ...
1
vote
0
answers
39
views
Toggling visibility of a GLTF doesn't update in viewport, using Three.js & React
I need to toggle the visibility of models based on button clicks, yet all of my attempts have the same problem: the visible properties will change when set them, but the view port doesn't reflect the ...
0
votes
0
answers
26
views
Loading dynamically 3d models before the react app launches
I'm using r3f to load 3d models dynamically from a list.
It's a slider so when I click on the arrow, it changes the information and show another 3d models.
screen of the app
The problem is that it ...
0
votes
1
answer
46
views
Can't use "fs" module inside of a Three.js app
I used this base code to set up an app using Three.js. Now I want to use node's fs module to interact with my filesystem. I added the line const fs = require("fs") in my app.js, but it doesn'...
0
votes
0
answers
19
views
Text facing camera with onBeforeRender never renders
I want to render text using @react-three/drei, in a way such that the text is always facing the user. Based on other posts on SO, I've found the solution to copy the quaternion of the camera into the ...
0
votes
0
answers
19
views
Three.js maze design gaps between wall?
so I'm having trouble with fixing the gaps between the walls when creating a maze in three.js I was hoping someone could help to find a solution for it
P.S.: the H stand for horizontal and V for ...
0
votes
1
answer
22
views
A-Frame Camera Collision Issue with Objects
I'm facing a challenge with A-Frame (version 1.4.0) regarding camera collision in my virtual reality scene. Despite employing various techniques such as using the collide attribute, integrating a ...
-1
votes
0
answers
14
views
3D Plane to Skybox ThreeJS
Is it possible to set a 3D plane as a skybox in threejs? If so, how does that work?
I tried looking at Youtube videos and googling, but every tutorial uses an img instead. Would I just have to ...
0
votes
0
answers
13
views
How can I calculate the percentage of an outdoor surface that is shaded from the sun using Three.js
I have a surface in 3D given by a set of points [[x1,y1,z1],[x2,y2,z2],...] (representing a rock face in my case) and I have the vector of the direction of the sun [x0,y0,z0].
How can I calculate the ...
-1
votes
1
answer
37
views
PointerLockControls.js - TypeError: Cannot read properties of undefined (reading 'lock') at HTMLDivElement
I'm extremely new to Javascript and Three.js (and to posting on stackOverflow). I'm attempting to implement a first person camera using three.js by converting the example implementation of ...
0
votes
1
answer
47
views
Three.js plane color is darker when adding lights
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';
const renderer = new THREE.WebGL1Renderer();
renderer....
0
votes
0
answers
30
views
How can I transfer or convert a three.js scene into Unity? [closed]
I have made a web application using THREE.js and want to turn it into a game or an environment that I can interact with in Unity. is there any possible way that I can do this without rewriting the ...
0
votes
0
answers
24
views
webXR image tracking: Drag and Drop in AR with ThreeJS
I am literally stucked.
I am using ThreeJS with image-tracking from webXR.
I am trying to integrate drag and drop example of ThreeJS in order to obtain a 3D model over a qrcode having the possibilty ...
0
votes
0
answers
19
views
Loading EXR from GLB buffer doesn't work (loading from path does)
I am trying to load a GLB model with a custom embedded EXR file, I use the following code to try and load it from the buffer. However this does not work...
When I try to load the EXR directly with the ...
-2
votes
0
answers
21
views
Are there other technologies like Three JS for web worlds? [closed]
I am new to data modeling and I would like to develop maps of supermarkets, universities, etc. but as worlds where users can meet virtually, that is why I came across Three Js, from what I see the ...
-1
votes
1
answer
52
views
Converting a gpx file to an stl file : reactJS
im pretty new to coding and as a nice project to get better wanted to make a gpx to stl converter. After doing some research i came to a conclusion that it must be possible. I use reactJS for this ...
0
votes
0
answers
34
views
How to use three-mesh-bvh
I started using threejs some days ago I am creating a project that requires a lasso tool for selection and then performing further actions. The library most suitable for this task is three-mesh-bvh
...
0
votes
0
answers
35
views
How to rotate the THREE camera around z-axis?
I have added a home button to a THREE 3d-force-graph that the user manipulates:
btnHome.addEventListener("click", evt => {
graph.cameraPosition({ x: 0, y: 0, z: 400 }, ...
0
votes
1
answer
55
views
ThreeJS Font Vercel Error: Failed to load resource: /static/helvetiker_regular.typeface.json:1 the server responded with a status of 404 ()
I am testing the THREEJS TextGeometry feature, and I have created a 3D Text with it, and it runs absolutely fine on localhost, but when I deploy to Vercel, I get the mentioned error.
Below is the App....
0
votes
0
answers
37
views
How to create a wavy points pattern with three.js? [closed]
How to create a background similar to the website https://sycom.ch/en using three.js and a wavy point pattern?
What steps should I take to implement this feature and create a visually appealing ...
0
votes
0
answers
32
views
How to rotate a cube using an edge as axis
I'm new to react three fiber (and threejs too) but I was wondering if it is posible to rotate a cube using an edge as axis. Specifically, I would want to rotate around the bottom-front edge. Any ...
0
votes
0
answers
32
views
Need to change particles color when mouse move by THREE JS
I have a particle image that made from shader texture and i need the color that gl_FragColor.rgb = texture.rgb; animate to change color like a weather forecast map or rotate color change.
my scene.js
...
0
votes
0
answers
34
views
Increasing 3D Model fidelity with three.js from Blender
I am building a website using react and I imported a 3d model I made in Blender to my website using three.js. Everything is working fine, the basics of the model are ok, but it just seems like the ...
0
votes
1
answer
28
views
Cannot load .gltf file to use iwith Three.js in my react website
I have the .gltf file of my 3D model in the public folder of my project, I then used "npx gltfjsx filename" command to generate a .js React component from the .gltf file. In that .js file I ...
0
votes
1
answer
46
views
ThreeJS: mesh between two ellipse curves
I am building a certain composition in three.js, with two ellipse curves on the outside (blue and red arrow).
I want to make a mesh between the two curves, and elevate the mesh (i.e. with a height).
...
0
votes
2
answers
43
views
Three Fiber not showing transparent png texture
I would like to display a small logo, a transparent png, on the back of each tile in my game. However, the png is not displaying.
Here is the png:
Here is the code for the texture:
import { ...
0
votes
1
answer
72
views
Is it possible to Use HTML inside a (React) Three.js Decal?
I've also asked this question on Three.js Discourse.
In this docs CodeSandbox example by drcmda, I would like to make the text decal a bit richer, with HTML. For example, adding something like this ...
0
votes
0
answers
18
views
How to extrude polygon in three.js?
In general I want the user to be able to click on a horizontal plane, and create a polygon, which is then automatically extruded up. I am using three.js and react-three-fiber, and I can add spheres ...
0
votes
0
answers
41
views
Three.js , leaflet coordinates projection problem
I'm developing an angular app in which i upload svg image to leaflet and place it/scale it/rotate it using (distortable image overlay) .
After that i Draw polygons inside that image as zones.
Those ...
0
votes
1
answer
47
views
I am trying here to make sphere using reactJS + threeJS
Here i am trying to make sphere usign threejs in react project and it is compiled successfully i am not getting any errors in the console either but in the outpput i am getting an only black canvas ...
0
votes
0
answers
14
views
Is it possible to apply decals to a mesh and then save the result as a new mesh texture in 3js/r3f?
I am using 3js via react-three-fiber and have in a scene a model with possibly thousands of DecalGeometry's (via react-three-drei's <Decal> abstraction):
<mesh {...}>
<primitive ...
2
votes
1
answer
29
views
Three js - Different shadow maps for different lights
I have a three js scene with two lights. I want light A to use PCFShadowMap and light B to use BasicShadowMap. How to achieve that?
My main concern is performance. I am looking for a way to cast ...
0
votes
1
answer
47
views
When ever i try to use cannon.js the screen goes blank
i have tryed somany ways but i cant get cannon.js to work in my code. when ever i try to make a world it just goes blank, please help. I cannot find any links or ways to get it to work. I am a new ...
0
votes
1
answer
58
views
Detect rooms/enclosed spaces from List of Boxes
Im using three.js to develop a website in which the user can place boxes/walls. After placing a wall im trying to detect all rooms that are formed by the collection of boxes. For this im assuming all ...
0
votes
0
answers
20
views
Cannon-es creates trimesh for externally loaded GLB file, but the trimesh does not scale down when the glb file is scaled down
I am using the gltf loader from threejs to load a glb file on to the scene. I traverse the children of this model to create trimesh from the convex hull of each of these geometries. I am following ...
1
vote
0
answers
33
views
ThreeJS is cutting the my rendered model in half
The 3D model that I render isn't rendering past half the height of the my scene. I use the OrthoCamera class which looks like this. When I change the near value to -2000, the model gets rendered ...
-1
votes
1
answer
39
views
Increasing blue color of all objects in a THREE.JS Scene
What is the best way to increase the blue color of all of the objects in a scene?
In my THREE.JS Scene there is a blue object that randomly pops up... I would like it to be more noticeable...
I have ...
1
vote
0
answers
16
views
Cannonjs collision handling
I have two cannonjs boxes. Box1 serve as character that moves with arrow keys.Box 2 serve as house . When i move Box1 towards Box2 , Box1 gets sliding to very large distance continuously. I want that ...
2
votes
1
answer
53
views
Orthographic camera is cutting rendered scene in half
I have a project that is using Orthographic camera and MapControls and my scene is rendering as it should,
However the camera is cutting the render scene in half like this
I am initializing my ...
0
votes
0
answers
70
views
Mapping an array of objects seems not working
I'm working with a library called React Three Fiber as it helps render 3D models. I'm trying to do a solar system so I need the moons to be grouped in the same group as the planets. When I get the ...
0
votes
2
answers
70
views
How do I get the directional light to illuminate the entire half of the sphere in Three js (R3F)?
I need to illuminate a sphere with two directional lights, one in front to illuminate the front of the sphere like sunlight. And one towards the back to display the light of the cities. To do this, I ...
0
votes
1
answer
28
views
Import Three and GLTFLoader
I need help, when I just import THREE I don't have a problem but when I add the GLTFloader import I have this error message in my console:
Uncaught TypeError: Failed to resolve module specifier "...
1
vote
0
answers
20
views
Is there a way to change three.js canvas whenever you switch to a different page?
I have 2 pages with different three.js scripts and geometries but when I switch pages, the canvas appears to stay the same. Any fix for this?
Tried to put window.location.reload() at the top of the ...
0
votes
0
answers
19
views
React three rapier scene limitation for objects
There is a 3d scene on which objects are flying and I need to prevent them from flying far off the screen, are there any good practices for this?
I was trying to make walls out of boxGeometry to keep ...
0
votes
0
answers
29
views
Convert 3D view into 2D
Question:
Hi there, I am trying to build a kitchen planner | room planner. I am working on three.js library and I am trying to replicate this project IKEA Room Planner for experience. The issue is ...
-1
votes
0
answers
31
views
add red dot by clicking in model in react three fiber using expo react native
I am currently developing a project using Expo in React Native, where I need to implement a feature that places a red dot on a 3D model whenever it's clicked. I've been attempting this for the past ...
-1
votes
0
answers
22
views
I am new with three.js
i am new with three.js, so can i used this platform to create a 3D CCTV model that can customize its own color. i want to embed in my website that i created using visual studio code and the language ...
0
votes
0
answers
19
views
ThreeJS quaternions + TweenJS odd behavior, anyone have an explanation?
Given the following code:
new TWEEN.Tween(group.quaternion)
.to(new THREE.Quaternion().setFromAxisAngle(axis, angle), animationDelayMs)
.onUpdate((quaternion) => {
group....