Skip to main content

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
Filter by
Sorted by
Tagged with
-3 votes
0 answers
10 views

How can i change 3d model property with Javascript

I need a code for change real-time 3d model properties in Js runtime Like change width or size and ... Not texture I think I will work with threeJs but I don't know how Thanks for your help.
sina saeedi's user avatar
0 votes
0 answers
9 views

Three.js is the object behind you not visible when you turn to face it?

When you turn the camera to the back side - looking at it frontally, the object disappears - stripes. I don't understand how to fix it, live example. const scene = new THREE.Scene() scene.background =...
Jarosław Bielawski's user avatar
0 votes
0 answers
27 views

three.js - phone scroll model

I am interested in creating this iphone scroll effect in three.js - I've seen it on this website https://www.exo.inc/exo-works but I am unsure/stuck on how to clean up the code to form a sandbox for ...
Rob's user avatar
  • 153
0 votes
0 answers
15 views

DragControls but only along the local Z axis

How can I move an object by dragging by mouse (for example using DragControls) but only along the local Z axis of the object (round trip), not in world coordinates. I can only limit it in world ...
McRain's user avatar
  • 29
0 votes
0 answers
10 views

How to Optimize Shadow Rendering in Three.js for Better Performance?

I’m currently working on a large-scale 3D scene using Three.js and have run into performance issues related to rendering shadows. My scene features multiple dynamic light sources and about fifty mesh ...
Dimuthu Ruwantha's user avatar
0 votes
1 answer
23 views

Why is threejs lighting fun such as pointlight and ambientlight not working with version "three": "^0.164.1"

I was doing my very first threejs small project with vite and threejs library I added these light function in js file, // emit light evenly in all directions from specific point in space const ...
Myat Min's user avatar
1 vote
1 answer
23 views

OrbitControls three fiber not working in next js

Here I want the camera orbit to function for right, left, up and down rotation with the object in front using the mouse, object displays fine but not <OrbitControls/> i have used <...
Kyun's user avatar
  • 755
0 votes
0 answers
40 views

How should a single page clear the loading GLTFLoader? It will crash the page

When page a uses GLTFLoader to load glb (24mb), quickly switch to page b. At this time GLTFLoader is still loading, and then I switch back and forth 2-3 times, and it will crash on the mobile terminal....
user24173533's user avatar
2 votes
1 answer
34 views

my component keeps re-rendering in my jsx file

In my code, I have a component that uses the useEffect hook from react. That component has a THREE scene in it. When I try adding any gltf model to the scene from outside the component, it re-renders ...
taha ayedi's user avatar
0 votes
0 answers
11 views

raycast not being detected only on rapier trimesh collider?

I have a jump function on a capsule collider that works on hull colliders but not trimesh colliders. I have a log that is false when in the air and true when on the ground when over a hull collider, ...
NadiaAli00098's user avatar
0 votes
0 answers
20 views

SyntaxError: Unexpected token '<' when loading font with Three.js FontLoader

I'm working on a Three.js project where I need to add custom fonts. I have placed my .json font file inside a fonts folder located in the static directory. When attempting to load the font using ...
An Adhikari's user avatar
1 vote
0 answers
19 views

Why does the three.js stl loader not show anything?

I'm trying to render an STL in my react app by using the STL Loader from Three.js. It does not show anything on the canvas but also doesn't throw any error. What could be the reason? import "./App....
zlElo's user avatar
  • 51
0 votes
0 answers
9 views

threejs transform control change the yellow material on hover

I have this transform control and I want to change its yellow material that comes as default when hovering the mouse over it: I took a look at the source code and found the matYellow variable but ...
MiguelG's user avatar
  • 78
3 votes
1 answer
45 views

My glb file is not loading into my three.js file

My glb file wont show up inside my thee.js world. I have followed all the documentations and tutorals but nothing works. the world loads and evry thing works fine its just that the moddle dose not ...
Blaze Branham's user avatar
0 votes
0 answers
8 views

how to link movement with keyboard controls and pointerlock controls for a first person experience with R3F and Rapier?

so I have an index.jsx file defining my keyboard controls and has my pointer lock controls in. root.render( <StrictMode> <Leva collapsed /> <KeyboardControls ...
NadiaAli00098's user avatar
0 votes
0 answers
16 views

How can I get the union of two intersecting clipping boxes?

I am using Material.clippingPlanes to try and clip Meshes along a cubic shape. This works fine for one cube, but I have an issue if I try to apply my current solution to two or more intersecting cubes....
Simon Defontaine's user avatar
0 votes
0 answers
9 views

How to apply viewMatrix value directly to camera in three.js?

I'm synchronizing two objects from different browsers, aiming to synchronize the viewMatrix value for panning purposes using websocket. Based on chatGPT camera.matrixWorldInverse.copy(viewMatrix); It ...
이호인's user avatar
0 votes
1 answer
12 views

how can i add ThreeJs PointerLockControl on mobile version

i'm building a ThreeJs school project and i need to add a mobile version of PointerLockControl i had search "pointerLockControls mobile version" on google but i don't found anything. can you ...
MirkoDev's user avatar
0 votes
0 answers
20 views

Three.js load texture using the MTLLoader in Electron

I am currently working on an Electron application with Three.js to display 3D models that can be selected via a file dialog dialog from the file system. I have managed to load and display the model ...
Ypselon's user avatar
  • 132
0 votes
1 answer
29 views

Extracting Only the External Edges of Complex BufferGeometry in Three.js

I'm currently working on a project involving zone creation and collision detection using Three.js, where my application correctly handles collisions and generates a BufferGeometry as the outcome. My ...
Slaven Soldo's user avatar
0 votes
0 answers
21 views

How to load a URDF file using urdf-loader [closed]

I am trying to render/load a urdf file as a web component but failed to do it. I haven't find any solution on internet. I am uploading my urdf file on firebase and then store that link in mongoDB and ...
Ali Hamza Rao's user avatar
0 votes
0 answers
22 views

How to Stabilize Decal Placement on Mesh in React Three Fiber?

I'm facing an issue with decal placement on a mesh surface in React Three Fiber. As I decrease the decal's scale, it gradually penetrates the mesh until it disappears completely. I temporarily fixed ...
Kiran Vishwak's user avatar
0 votes
0 answers
45 views

Convert a Sphere into a hex-grid

I am looking in Three.js a sphere composed of circles, adjusted like a hex-grid. The thing i need, is to generate the positions of all circles' centers, the rendering is not the problem. I cannot ...
Frédéric Soigneux's user avatar
-1 votes
0 answers
27 views

Resetting Position of Selected Dominoes When Clearing SelectedDomino Group [closed]

I'm currently working on a Three.js application where I've implemented a feature to select and manipulate groups of domino objects using a THREE.Group called selectedDomino. The selected dominoes can ...
hirithik's user avatar
0 votes
1 answer
23 views

Position of THREE.Group is always (0, 0, 0) & Miscalculation in finding THREE.Group position

I'm working on a Three.js application where I'm using a THREE.Group to manage selected dominoes in my scene. However, I'm encountering an issue where the position of the THREE.Group is consistently ...
hirithik's user avatar
0 votes
0 answers
9 views

Drag effect for three js fiber

im trying to build florplan website but only 2D version,i decided to use three js fiber and Vectors ,then I filled the area inside the square I made of Vectors by triangles.Now last step,i need to add ...
Hope Lake's user avatar
0 votes
0 answers
14 views

applyMatrix4() to bufferGeometry vs Object3d

Basically I wanted to translate the position of the gizmo line along axis X. When setting the following configuration over the mesh, the translation does not work: Original Gizmo mesh: for (const key ...
MiguelG's user avatar
  • 78
0 votes
0 answers
11 views

NextJS with TS Three Error: "SyntaxError: Cannot use import statement outside a module"

I'm trying to add a sphere made with three in my NextJS project with TypeScript, I get my page to run when I navigate to the page where the sphere is, but if I reload the page I get the error Error: &...
SantiM's user avatar
  • 1
0 votes
0 answers
6 views

R3F raycast hits wrong object

this is the code to generate buffergeometries: const boxList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const depth = 0.1; const width = 0.017; <Splat position={[0, 0, 0]} src={URL} /> ...
MiguelG's user avatar
  • 78
0 votes
0 answers
13 views

Why am I not able to swipe through 3D model canvas section in mobile view?

The page I have created has 3 sections. Heading Canvas section for 3D model of IPhone. Section 2. When I switch to mobile view and try to swipe up to see section 2 of the page, my swipe gets stuck ...
Abinash 's user avatar
0 votes
0 answers
28 views

Double Color in Three Js Buffer Geomtery shapes

I am using three.js to create shapes, but while drawing my irregular polygon shapes face double coloring using while drawing from certain directions. Example: I attached two pictures of same shapes, ...
sana rahman's user avatar
0 votes
1 answer
19 views

rayCaster intersection returns wrong mesh when using custom buffer geometry

This is the code I'm using for creating the meshes: const depth = 0.1; const width = 0.017; for (let i = 0; i < 10; i++) { const geometry = new THREE.BufferGeometry(); const v1 = [-0.075 + i * ...
MiguelG's user avatar
  • 78
-1 votes
0 answers
22 views

getting error while extend Three js Class

in this code am trying to extend THREE.RawShaderMaterial for adding new methods on it but am getting error in cosole in Point.js export default class PointsMaterial extends THREE.RawShaderMaterial { ...
NIYAS RAHMAN's user avatar
0 votes
0 answers
14 views

r3f / threejs - shoot raycast on Splat objects

we wish to place annotations on splat surfaces and we are struggling with shooting the raycast to splat objects. Here is what we tried to do: const { camera, gl, scene } = useThree(); <Canvas> ...
MiguelG's user avatar
  • 78
0 votes
0 answers
28 views

"Seeking Assistance with Zoom Feature for 3D Planet Models"

"How can I implement zoom functionality to focus on a specific 3D model, such as a planet, when it's clicked by the user? I'm using the Three.js library to render multiple 3D models." I ...
ms Coder's user avatar
0 votes
0 answers
26 views

Distortion of the model due to being too far from the origin

I created a world map with the world origin at the geographic longitude and latitude origin At this point, I placed a robot in the Chinese region, but the robot was distorted; But when I place the ...
vci's user avatar
  • 1
0 votes
0 answers
17 views

Framedrops in threeJS

So I have a pretty weird case where a threeJS application seems to run fine on one machine (with all thinkable browsers) but not at all on other machines (chrome). I have gotten a profile trace from ...
munHunger's user avatar
  • 2,809
0 votes
0 answers
27 views

Why do I import the model in the three.js, it looks dark, but it looks normal on the gltf online website

I expected both of them to look the same here is my code async function loadSakuracar() { const loader = new GLTFLoader(); const sakuracarData = await loader.loadAsync( "/src/assets/...
朱胜文's user avatar
0 votes
0 answers
21 views

Newest version of Chrome Browser doesn't support WebXR in Three.js

I currently work on a web XR app demo in Three.js. However, when I used the ARButton component, it said, "AR not supported." The output: output And here's my code: import * as THREE from &...
鲁亦霖's user avatar
-1 votes
1 answer
36 views

Find intersection between two Revit elements in APS (forge) viewer

I'm using APS (forge) viewer version 7.* to view Revit models. Is it possible to find out if two elements (e.g. a pipe and a duct) are intersecting each other by viewer rayIntersect method? If so, can ...
Maryam's user avatar
  • 37
-2 votes
1 answer
24 views

Add environmental texture to Autodesk Forge Viewer

How to add an environmental texture to Autodesk Forge Viewer v6.0? In Three.js, you can assign a texture to the scene background and environment, so how can I do the same in APS viewer?
mustafa.salaheldin's user avatar
0 votes
0 answers
24 views

THREE.JS gltf model loading, but missing node data & areas of mesh?

I'm trying to load my donut model using Three.js gltf loader, and I'm perfectly able to add the model onto the canvas, however the model doesn't load with it's geometry node data (sprinkles), as well ...
HarrisLich's user avatar
1 vote
0 answers
17 views

how to scroll to the top in react three fiber

so, I'm trying to make a project in react three fiber,this is my first time working with three and react three fiber. I have a 3d scene which has scrollControls and some html. I'm not able to do ...
Ayush Patel's user avatar
0 votes
0 answers
11 views

How to implement scroll page animation for product landing via react-three-fiber

I have seen this impressive animation for product landing via scroll animation How to implement this, is there any possible code example or suggestion?
Johnson's user avatar
  • 491
0 votes
0 answers
6 views

put a texture on single face of glb model load

my goal is to load a texture onto a 3D object, but only on one face. When I load the texture as a material, it loads onto the entire object, and when I assign a material array with just the texture ...
Soche81's user avatar
0 votes
0 answers
19 views

How to create a halo effect similar to a light on an object?

I use textures to illuminate the entire scene and model. Now there is a question, how to make a part of the model (with white text) produce a halo effect similar to a light? If possible, how many ...
nieyuan1980's user avatar
0 votes
1 answer
35 views

Three JS shadows not showing?

i have made a interactive 3d model on my website with Threejs, and everything work other than shadows, i cant make shadows work, i am new to three js so it could be i am skiping some important part. ...
Aleksandar Despotovic's user avatar
0 votes
0 answers
17 views

How to realize three.js sphere rotation effect, click on the list of countries, the sphere goes to the corresponding country?

Implement three.js sphere rotation effects, click on the list of countries, the sphere to the corresponding country, and mark the landmarks in the map, there are clicking, crossing and other ...
刘嘉威's user avatar
0 votes
1 answer
41 views

normal is always pointing the same way

I have an open topped cylinder with a material that is double sided in a Three.JS scene. What I am trying to achieve is one color on the front of the cylinder, and another color on the inside of the ...
munHunger's user avatar
  • 2,809
0 votes
0 answers
12 views

Is there any way to show the real-time socket data to arcsdata Three-js?

have to display the events received from socket to the arcsdata method provided by three-globe but some data is missing or object is stored premanently can one face this issue help me to get better ...
Mani Mk's user avatar

1
2 3 4 5
423