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
0 answers
13 views

I have a "ghost" velocity in simulation, and I cannot track down where it is coming from

I am creating a simulation of a roller conveyor system in Rapier js (vanilla js, with Three.js). in order to simulate the rollers, I have created many cylinder-shaped objects rotated on their side: ...
tim's user avatar
  • 3
0 votes
1 answer
13 views

Change MeshBasicMaterial opacity dynamically

<script type="importmap"> { "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js", "three/...
Oto Shavadze's user avatar
  • 41.6k
0 votes
0 answers
9 views

three.js give grey color on edges when camera far from a mesh

I made the floor in blender and aligned up perfectly without overlap and gaps and bake texture, when importing everything works fine, but on the floor, between planks, I get gray lines. (all planks ...
Tyubit's user avatar
  • 27
0 votes
0 answers
5 views

Mapbox Standard layer doesn't work with three.js

I'm using threebox + Mapbox GL 3 my 3d models perfectly load when im using layer styles like outdoor-12 but when I change style to mapbox://styles/mapbox/standard my models get disappear. is it still ...
dante velli's user avatar
-1 votes
0 answers
10 views

upload and process a potree file using threejs?

I'm currently exploring options for uploading and processing a Potree file using Three.js. I attempted to use the solution provided in the GitHub repository https://github.com/pnext/three-loader?tab=...
isra m's user avatar
  • 1
0 votes
0 answers
9 views

boxBufferGeometry doesn't show up in React three Fiber

This is the App.jsx file import { Canvas } from "@react-three/fiber" import Experience from "./components/Experience" function App() { return ( <Canvas> <...
Javid Javadli's user avatar
0 votes
0 answers
5 views

how to rotate the joints of an URDF Model using DAT.GUI in three.js

import * as THREE from "three"; import OrbitControls from "three-orbitcontrols"; import URDFLoader from "urdf-loader"; import * as dat from 'dat.gui'; const gui = ...
Rohan Banerjee's user avatar
0 votes
0 answers
17 views

Strange behaviour rendering in a FBO

Something weird happens when I try to render a couple of circles in an FBO and use this texture in a shader. The circles look very pixelated, I can't figure out what's going on. Something related with ...
Keles's user avatar
  • 389
0 votes
0 answers
10 views

Regarding webgl’s ping-pong loop, I don’t know why I can’t use the new one

I know that the ping-pong loop is set based on two set rendertargets. For example this.fbo_material.uniforms.particle_time.value = this.accumulate_time; this.fbo_material.uniforms.fbo_texture.value = ...
bents's user avatar
  • 23
0 votes
0 answers
17 views

How Highlight IFC Model in Three.js with Raycasting

I want to create a IFC Loader with Three.js and i loaded the IFC file in the scene using Web-IFC-Three but how can i highlight the ifc model on mouse hover and get attributed of that part with three....
Aditya Gupta's user avatar
0 votes
0 answers
12 views

Model is dissapearing when I am using TransformControls react three drei

Code Screenshot 1 Code Screenshot 2 Here is the code I have written. I couldn't find any issue or error to fix this problem. I am trying to moving the plane by x axis and z axis using ...
John Doe's user avatar
0 votes
0 answers
13 views

How to create exact sized shapes with ConvexPolyhedron in Cannon-es and Three.js

I'm trying to create a tetrahedron in Three.js along with a corresponding Cannon.js body using ConvexPolyhedron. However, I find myself having to guess the vertices and faces for the shape, like this. ...
Samarth's user avatar
  • 43
0 votes
0 answers
12 views

How can I smoothly load .obj files in my React component and switch between them without encountering "A component suspended while respon..." error?

`error : A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with ...
Salah eddine Elmahjour's user avatar
0 votes
1 answer
30 views

Blender model looks completely different in THREE.js

I have a Blender model that I want to use on my website, where I use THREE.js, but when I load my GLTF file, it looks broken. Things are missing or are in the wrong spot, the lighting also seems a ...
Benjamin Galler's user avatar
1 vote
1 answer
17 views

Shapes rendered using ThreeJs have shaky/hazy edges

I am trying to render this cube in ThreeJs using basic Box Geometry but the lines are weird and shaky. Even if I set wireframe to false and put a solid cube, the edges of the cube still remain like ...
Samarth's user avatar
  • 43
-1 votes
1 answer
28 views

Texture isn't being applies to sphere in Next.js using Three

i'm trying to get a texture applied to a sphere inside of a nextjs component. I've tried this with the code below but it will only show a black ball. I've read it could be something to do with the ...
ruben's user avatar
  • 95
0 votes
0 answers
11 views

Is there a way in Three JS to find the intersection lines between faces of 3d objects?

Suppose I have two objects that overlap, for example a cube and a cylinder like this: I want to find the set of lines that define the intersection between the faces like this: To be perfectly clear, ...
Jesse Pangburn's user avatar
0 votes
0 answers
12 views

How to copy contents of one WebGLRenderTarget to another WebGLRenderTarget

Can someone please show me an example of copying the contents of one WebGLRenderTarget to another? The following don't seem to work: let tex1 = new THREE.WebGLRenderTarget( width, ...
A__'s user avatar
  • 1,686
-2 votes
0 answers
27 views

three.js: cube with text on each surface [closed]

my goal is to create a cube with text on each surface. I succeeded with a cube and text on one surface I found a nice example for text on each surface here: https://hofk.de/main/discourse.threejs/...
Stephan Prätsch's user avatar
1 vote
0 answers
23 views

Unable to Import .obj file in expo three app

I am attempting to import a .obj file from the assets folder in my expo application. I am getting the error: Android Bundling failed 26225ms (D:\\Dev\\expo\\nook\\node_modules\\expo\\AppEntry.js) ...
kev14762's user avatar
0 votes
0 answers
50 views

Keep image ratio on load + on resize, while behaving like "object-fit:cover" when rendered onto a canvas

I'm trying to create an image distortion slider, using images that will act as backgrounds while the links are in the foreground. When you hover each link the background image distorts into the next ...
VikC's user avatar
  • 1
0 votes
1 answer
31 views

How to ensure the background texture joins up smoothly around sphere in Three.js?

Below is the bit of the code which sets the texture and maps it onto a large sphere. I have tried all sorts of wrapping but the background is still not smooth as there is a clear joining where the two ...
Hamza Asim's user avatar
0 votes
0 answers
18 views

ThreeJS Directional Light not working on Electron build

I am currently developing our Typescript application into an Electron application using electron-builder. This part of the application is the display of a 3D model separated into different meshes with ...
Elerua's user avatar
  • 11
0 votes
0 answers
15 views

Three Fiber Canvas display white in mobile view

I made a portfolio website that hosted in github pages, I created three/fiber canvas that render my tech skills and i notice that when i access it in mobile some on the canvas and displayed well and ...
Vanz's user avatar
  • 3
0 votes
1 answer
40 views

GLB file not loading in three.js

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
1 answer
31 views

Create CANNON body from THREE. Mesh

I have a THREE.js plane that the points are moved up and down using Perlin noise to make terrain. Now I need to add physics to the camera to stop it from just falling through the plane. I'm hoping to ...
Owen Odroski's user avatar
1 vote
0 answers
69 views

IFC BIM tiles implementation for streaming geometries - (open bim components library)

here is my implementation for streaming only bim tile geometries. Not error found in the console and want a confirmation whether it’s well implemented so far since I do not perceive an improvement in ...
MiguelG's user avatar
  • 23
0 votes
0 answers
15 views

Page transition using next.js and R3F

I'm trying to make a transition between two pages like on this site. https://www.alcre.co.kr I create my site with next.js, as in the example site. Normally, Ajax and three.js are used in WordPress ...
Ekrem Mehmet Güven's user avatar
0 votes
0 answers
16 views

three.js,How to complete the animation migration of two similar bones?

Two similar bones. The animation skeleton is a pure skeleton without SkinnedMesh and skeleton. The names are different and the levels are also slightly different. How to achieve correct animation ...
yan ke's user avatar
  • 1
0 votes
0 answers
21 views

React Three Fiber Player Component stop moving after a moment of no movement

I have a React Three Fiber application, and the user can move the player around in a FPS like fashion. It works great until you stop moving for more than like 3 seconds, then if you try to move again, ...
Antonio Turner's user avatar
0 votes
1 answer
34 views

Set material only to one instance of the fragmentMesh class from Open Bim Components library / Three js

I tried to set unique materials to a specific fragmentMesh. However, it turns out that the fragmentMesh can have multiple instances and thus the material is being applied to all its instances. How ...
MiguelG's user avatar
  • 23
0 votes
0 answers
14 views

Camera and scene getting printed two times in react-three. What is the reason

import { Canvas,useThree,useFrame } from '@react-three/fiber'; const LogCamera = () =>{ const { scene, camera} = useThree(); console.log(camera); console.log(scene); return null; } function ...
belter101's user avatar
0 votes
0 answers
27 views

Unhandled Runtime Error TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'

I'm encountering an issue while implementing react-three/drei and react-three/fiber in my Next.js project. The application works fine on Firefox but throws errors on Chrome. Specifically, I'm seeing ...
Hasibul-'s user avatar
  • 1,312
0 votes
0 answers
33 views

Im getting an error, THREE.WebGLRenderer: Context Lost, on the Android version of chrome

I have made a personal website following a tutorial on YouTube, this is my GitHub repo https://github.com/tmich1997/resume It is a Vite+React project and it has a bunch of 3D models. I deployed the ...
Timble Michael's user avatar
0 votes
0 answers
15 views

How Does the Talking Head JS Project Apply Morph Targets to GLB Models in SwiftUI?

I'm working on integrating a feature similar to the Talking Head JavaScript project I found on GitHub (link to repository) into my SwiftUI project. This project uses readyplayer.me models in GLB ...
eugene_prg's user avatar
  • 1,038
0 votes
0 answers
20 views

Using Drag controls from three.js to drag infospot , but the infospot shrinks and eventually disappears. i am building a paronoma tour builder [closed]

I am using the Panolens.js library and three.js in React to build a virtual tour maker, to let the user place the hotspots / infospot where they want, I have decided to do with the drag approach ...
A.H.D. Sathnindu's user avatar
0 votes
0 answers
16 views

Difficulty Displaying Two Separate Images in Three.js Portals

I'm currently working on a project where I'm using Three.js to create portals displaying different images. I'm encountering difficulty displaying two separate images in two different portals. One ...
Geekazon 's user avatar
0 votes
0 answers
41 views

"THREE.GLTFLoader: No DRACOLoader instance provided" despite providing one

I'm trying to load a GLB model in Three.js in order to render it in a WebXR augmented reality scene. However, the model doesn't show up and I am receiving the error THREE.GLTFLoader: No DRACOLoader ...
Furious Gamer's user avatar
-1 votes
0 answers
27 views

Union of arbitrary shapes? [closed]

I'm interested in generating a golf hole from scratch. Right now, I'm working on a fairway. My current thought is this: Generate a set of random vertical points between tee and green. For each point,...
user2565728's user avatar
-1 votes
0 answers
18 views

integration scroll / three.js

I am trying to integrate Three.js into my web project and I would like to create a function that reacts to the user's scroll to perform certain actions in the 3D scene. I've been looking for ...
Gabriel Cerdio's user avatar
0 votes
0 answers
16 views

Why does react-spring animate when I pass it an array of 3 numbers, but not when passed a Vector3?

I have a goofy semantics question about react spring and r3f. So when I create the spring like this const { position } = useSpring({ position: visible ? new Vector3() : props.position, }); it ...
CaptainLupa's user avatar
0 votes
0 answers
45 views

React Native Mapbox RNMBXModels.models.getter not implemented (Expo Project)

I'm trying to use 3D models in Mapbox, and for that I'm using the new ModelLayer component I installed the packages and ran the npx expo prebuild command to generate the native code I installed the ...
rodrigo4635's user avatar
-1 votes
0 answers
18 views

Encountering difficulties while trying to build an npm package includes threejs

I recently had the idea to develop my own npm package based on a React.js component, creating a sphere containing names. I successfully built it for React.js and created a demo available at demo link. ...
Priyansh Khunt's user avatar
0 votes
0 answers
16 views

Instancing GLB with multiple nodes and materials using REACT THREE FIBER/ DREI

I am using house from a GLB file in my project. as it is increasing in results in dropping frames and more draw calls. I want to draw it using from react three drei. My nodes and materials look like ...
Zain Ali's user avatar
1 vote
0 answers
59 views

Rotate Object between two points (Three JS)

ScreenShot I am trying to create a mesh that stetches between two other points (or meshes) and can't seem to get past the final hurdle of rotating the stretched mesh to the right location. It seems ...
user23495332's user avatar
0 votes
0 answers
56 views

Three.js BufferGeometry

I'm trying to render 2D polygons onto a canvas using BufferGeometry in three.js (I need the extra performance compared to using Shape). However, when I run this code (I'm using Svelte but I tried to ...
Orcadeum's user avatar
-1 votes
1 answer
36 views

access instancedMesh's sub-instance origin and tranform with pivot in three.js?

I'm working on a scene that may needs large amount of animating models.So I have to use instancedMesh.But i've encountered some transforming issues.Below is a instancing ferrari demo, i tried to make ...
Anoman.M's user avatar
  • 102
0 votes
1 answer
31 views

Desynchronize animation between multiple models in useFrame() in react-three-fiber

i am working on my Web Developer Portfolio in next.js, TypeScript and react-three-fiber. In one page, I want to do a nice background who is inspired by this: https://codepen.io/algoregalore/pen/KJdBYP....
BillydogTheKid's user avatar
0 votes
0 answers
27 views

DefinitlyTyped three.js doesn't work without node_module change

I am currently studying the three JS journey course form Bruno Simon. On top of that, I thought that it could be a good time to try to convert it into typescript so I could learn it and it would force ...
Neil Quechon's user avatar
0 votes
0 answers
14 views

Issues in loading a .glb file in a web worker offscreencanvas using Three.js

I have been trying to use GLTFLoader from Three.js to load a model into an offScreenCanvas. This is what I am currently trying: import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader&...
Soham Bhaumik's user avatar

1
2 3 4 5
422