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,067
questions
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:
...
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/...
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 ...
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 ...
-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=...
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>
<...
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 = ...
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 ...
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 = ...
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....
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 ...
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.
...
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 ...
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 ...
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 ...
-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 ...
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, ...
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,
...
-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/...
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)
...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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, ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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,...
-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 ...
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 ...
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 ...
-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. ...
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 ...
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 ...
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 ...
-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 ...
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....
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 ...
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&...