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.

Filter by
Sorted by
Tagged with
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?...
thecow milk's user avatar
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/...
AshhadDevLab's user avatar
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 ...
EREN xx's user avatar
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 ...
Dschaar's user avatar
  • 21
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 ...
Gagaintheweb's user avatar
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'...
Potheker's user avatar
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 ...
4-bit's user avatar
  • 272
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 ...
Sarmad Karim's user avatar
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 ...
Mrunmayee Jagtap's user avatar
-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 ...
Yuh-Boh Feng's user avatar
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 ...
OMRY VOLK's user avatar
  • 1,449
-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 ...
Mr_Dalliard's user avatar
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....
WHO AM  I's user avatar
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 ...
Felixwheeler's user avatar
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 ...
Wolfetto's user avatar
  • 1,040
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 ...
Torben Van Assche's user avatar
-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 ...
Erick Arturo's user avatar
-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 ...
Jens De Backer's user avatar
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 ...
AshhadDevLab's user avatar
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 }, ...
Leo's user avatar
  • 4,252
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....
Harshadeep More's user avatar
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 ...
MaNi Razavizadeh's user avatar
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 ...
dacalite's user avatar
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 ...
32dotDEC's user avatar
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 ...
Jaime Ferreira's user avatar
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 ...
Jaime Ferreira's user avatar
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). ...
dljve's user avatar
  • 535
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 { ...
Felt_Notebook's user avatar
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 ...
Philippe Fanaro's user avatar
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 ...
BrunoAT's user avatar
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 ...
s2024's user avatar
  • 1
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 ...
Vaibhav patel's user avatar
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 ...
K. Raivio's user avatar
  • 100
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 ...
Szymon Gołąb's user avatar
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 ...
Blaze Branham's user avatar
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 ...
JulianD's user avatar
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 ...
Soham Bhaumik's user avatar
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 ...
Julienn's user avatar
  • 11
-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 ...
Austin Oliver's user avatar
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 ...
Gaurav Sharma's user avatar
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 ...
wpsimon09's user avatar
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 ...
Fffantasia's user avatar
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 ...
Guillaume's user avatar
  • 1,560
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 "...
Maxime2i's user avatar
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 ...
defrost.'s user avatar
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 ...
Il Il's user avatar
  • 13
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 ...
AshhadDevLab's user avatar
-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 ...
Kurt Russelle Marmol's user avatar
-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 ...
neo's user avatar
  • 1
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....
RadioactiveBurrito's user avatar

1
2 3 4 5
421