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,101
questions
-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.
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 =...
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 ...
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 ...
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 ...
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 ...
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 <...
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....
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 ...
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, ...
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 ...
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....
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 ...
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 ...
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
...
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....
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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 ...
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 ...
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 ...
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 ...
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: &...
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}
/>
...
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 ...
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, ...
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 * ...
-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 {
...
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>
...
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 ...
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 ...
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 ...
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/...
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 &...
-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 ...
-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?
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 ...
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 ...
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?
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 ...
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 ...
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.
...
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 ...
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 ...
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 ...