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,159
questions
0
votes
0
answers
10
views
Custom threejs Mesh class with InstancedBufferGeometry not being rendered
I am trying to integrate a webgl gaussian splatting renderer inside of threejs and for that I am creating a custom mesh class (which is possible according to the docs).
When creating my class I fetch ...
- 1
0
votes
0
answers
28
views
THREE.js Object is not visible when inheriting from other class
I am fairly new to THREE.js and Angular.. well, let's just say JavaScript and TypeScript in general, so my question might be a rookie one. I apologize in advance.
I have been building a project in ...
0
votes
0
answers
20
views
I have a vue.js & three.js code and how to hidden coordinate part in three.js?
Everyone, I have a vue & three.js code. and i wanna hidden the part which shows in the picture.
I have no experience in three.js and i don't know how to fix it.
i used scene, camera, renderer, ...
0
votes
0
answers
10
views
How to scroll down the page when using orbitcontrols from react-three/drei?
I'm using react-tree/fiber , three, and react-three/drei to show a glb format file. The issue is i'm not able to scroll down to the other section of page if i'm on glb file section currently. Because ...
-1
votes
0
answers
20
views
ThreeJS - How to add a picture on top of the texture the object has? [closed]
I'm doing a project website with Flask and Vite (with VanillaJS using JQuery) that needs to have a functionality where I can customize a 3D object with a image. I'm going to use ThreeJS to do it.
I'm ...
0
votes
0
answers
19
views
Outlines not working as expected in React three fiber?
We are implementing outlines in React three fiber. We've tried 2 approaches and both do not work as expected.
With r3f outlines (example), the outlines simply don't appear. Code:
<mesh>
&...
- 323
0
votes
0
answers
17
views
issues with bcf coords while creating BCF
I’m using THREE JS perspective camera and I have bad time to get proper viewpoints, directions or upVectors, because my created bcf file with perspective camera coords do not work in other bcf readers....
- 1
-2
votes
0
answers
26
views
Three JS Portal implementation artifacts
enter image description here
I need help, I'm trying to create a portal effect using a stencil buffer in three js . and obviously my code looks correct but I still get those artifacts when I increase ...
0
votes
0
answers
13
views
Why is my GLB file from Blender not casting shadows in Three JS? (specifically in react three fiber)
I exported a GLB file from blender but when I import it into three js, it does not cast any shadows. I have made sure that my light has castShadow set to true, my ground has receiveShadow set to true, ...
0
votes
0
answers
19
views
I'm having three.js rendering and orbit control issues
I have a basic react homepage with a logo and a rotating 3d globe. I had orbit controls working, but since I added a signup button. I had the orbit controls because my friend wanted to be able to ...
1
vote
0
answers
32
views
Vite Error : FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
I'm encountering a "JavaScript heap out of memory" error when running npm run build on my Node.js project. The build process works fine during development (npm run dev), but it fails during ...
0
votes
0
answers
20
views
Adding Camera animation to MMD three.js renderer
I have tried over the last days to implement a working animated camera to my already running MMD / PMX environment.
However I cannot for the life of me figure out how to do it.
The regular animations ...
- 1
0
votes
0
answers
20
views
Getting an error hooking up enable3d to a threejs project
I'm trying to setup a project that will be using both threejs and enable3d. I'm NOT using nodejs. I just want to set it up as a standalone website that includes all of the js files and so on. I've ...
0
votes
0
answers
39
views
ThreeJS ShaderMaterial WebGL conversion
I'm working to convert the SplaTV WebGL library to use ThreeJS and I'm struggling to get it converted. The code in the original repo is challenging to understand as it's not documented and while I ...
- 194
0
votes
0
answers
13
views
Clearing multiple attachments on a target with different colors in three.js
I make a WebGLTarget with several attachments. I would like to clear them with different colors. So far the only solution i found was provided by ChatGPT and it basically does it on the webgl level ...
- 5,341
0
votes
0
answers
18
views
Is there a function in three.js where i can close the gaps between the blocks
function animate() {
requestAnimationFrame(animate);
if (controls.isLocked === true) {
const time = performance.now();
const delta = (time - prevTime) / 1000;
...
2
votes
0
answers
39
views
Can I use a GPUBuffer which is the output of a compute shader as a Three.js or Babylon.js vertex position buffer?
I am experimenting whith webgpu. I found out that transferring data between cpu and gpu can be quite slow.
My goal is to simulate particle physics on the gpu using webgpu's compute shaders, then use ...
- 644
2
votes
0
answers
40
views
How to apply a grease pencil effect into a scene in three.js
this is how it looks when rendering in three.js and I would like to add a grease pencil kind of thing depending on the view of the camera.
This is what I expected, the result proccessed in blender.
...
- 46
-4
votes
0
answers
34
views
where can i find library links to threejs [closed]
i have downloaded the threejs file and have included it in my folder yet its still showing errors this is my code
// main.js
import * as THREE from "../three.js-master/build/three.module.min.js";
...
0
votes
0
answers
19
views
Calculating the world position of a 2d Qrcode in React-Three XR
I'm currently experimenting the React Three XR library combined with React Three Fiber for interacting with objects in an AR / XR web application.
Also, I'm using React Qr Scanner (https://www.npmjs....
- 509
0
votes
0
answers
22
views
I got problem with updating React components for r3f
so my problem is that I'm beggining on r3f and I guess the problem isn't in that for the uploading error, but I have so much code that I can't figure out logic for updating the components, and in ...
- 3
1
vote
1
answer
68
views
How to place object on top of other object in ThreeJS
I'm new to ThreeJS so apologies if this is a basic question. I have multiple GLTF files which I've loaded into my scene and I want to place one of the objects on top of the other object (but it can be ...
- 159
0
votes
0
answers
20
views
Wrapping 2D mesh on top of another 3D mesh (BabylonJS/ThreeJS)
Is there a way to wrap (not just position and rotate) a 2D mesh (mesh with no depth - monogram) on top of some 3D mesh in BabylonJS or ThreeJS in a way that would distort the 2D mesh that would fit ...
1
vote
1
answer
79
views
Why is WebGPU performance so bad in my benchmark compared to WebGL?
Here's the code of my benchmark, tested it on Latest Chrome Canary on Win11 (with vsync disabled and fps unlocked).
WebGPU has around 1/3 the FPS of WebGL bench, I can't figure out why is that.
Code:
...
1
vote
0
answers
57
views
Three.js SVG Loader - can I simplify or fix geometry?
I have imported an SVG shape of the letter 'M' into Three.js using SVG Loader. The geometry that is being created seems unecessarily complex and is causing issues.
Is there a way to achieve cleaner, ...
0
votes
0
answers
21
views
imoprt glb file in react
Can anyone help me? The file sky.glb is not working in my project. but the another file work corectly
import { useGLTF } from '@react-three/drei'
import React from 'react'
import skyScene from '../...
0
votes
0
answers
45
views
What is the best way to clip (earcut) extruded geometry with two planes?
I'd like to clip or earcut the corners of an extruded mesh at a 45 degree angle so that it produces a trapezoid shape. Consider the following:
const loader = new SVGLoader();
const svg = ...
- 669
0
votes
0
answers
44
views
Robot hand movement dynamics in three js
I am currently a JavaScript developer, and due to a project at my company, I need to learn Three.js and build a project involving robot hand movement. Despite extensive research, I am still confused ...
- 1
0
votes
0
answers
28
views
re upload same texture into the object make the object texture different and low quality
i tried to update the texture on my glb file with some texture images and same texture image, but it was always like has some striped on my texture after update map texture
here is my current texture ...
- 51
0
votes
0
answers
22
views
Animate 3D model on scroll | React.js
I am trying to make the 3d component listen to the user's scrolling, such that scrolling down plays the animation forward. When the user stops scrolling, the animation should also stop, and when the ...
- 11
0
votes
0
answers
18
views
How to make the camera smoothly transition from one curved movement to another? (Theatre.js)
I'm working on a 3D animation using React Three Fiber and Theatre.js, where the camera is moving in 3D space on scroll, mostly in consecutive quarter curves over different axes (e.g. a quarter curve ...
0
votes
2
answers
54
views
Unable to Load HDRI image as environment with Three.js
I'm new to Three and am currently working on a project where I want to use an HDRI file for environment mapping for lighting and reflections purposes. I've been trying to load HDRI files using ...
- 1,008
0
votes
0
answers
19
views
Octree not detecting collisons with objects that are at a 90deg angle to the floor
A collision with any object that is not 90deg from the floor it detects but when I have for example a border or a cube in the scene it just goes straight through the mesh. The floor works fine.
...
0
votes
0
answers
12
views
THREE.RGBELoader Bad File Format: bad initial token || loading Hdri image to my three.js viewer getting this error
trying to add HDRI in my configurator but not able to load ended with error.
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { PMREMGenerator } from 'three/src/extras/...
-1
votes
0
answers
11
views
How to make a Raw file work in VSCode using vite?
I have this fps controller https://github.com/mrdoob/three.js/blob/master/examples/games_fps.html but it is in a raw file format and I have no idea how to put it into a vite prject or even get it to ...
0
votes
0
answers
24
views
Using VideoTexture with ShaderMaterial
I'm currently trying to implement a scroll effect with THREE.js that meets the following conditions.
When the page is loaded the three element should be scaled down to 0.3.
When the page is scrolled ...
-1
votes
0
answers
22
views
THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN problem
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unknown-property */
import React, { Suspense, useEffect, useRef, useState } from 'react';
import { Canvas, events } from '@react-three/...
- 1
0
votes
1
answer
47
views
How can I clone a GLTF model loaded in the Autodesk Viewer?
I am trying to dynamically clone a loaded GLB model and allow the user to position it in the scene. However, when I use the model.clone() method, the model appears in the scene at the same position as ...
1
vote
0
answers
23
views
Fix skewed image when camera is rotated in three.js (R3F)
Here is a code snippet of what I have done so far
const Sphere = () => {
// url is an panoramic image of type .png, jpeg, webp, or jpg.
const texture = useLoader(THREE.TextureLoader, url);
...
- 101
0
votes
1
answer
51
views
How to make 2 objects to collide each other?
Description
I am trying to make 2 objects to collide each other. The collision I am trying to make detects weather the 2 objects are touching / intersecting each other by first calculating their Box3(...
- 475
0
votes
0
answers
13
views
How Can I replace a shape if specific marker arrive in A-Frame
I want to show a chemical reaction with A frame. If user shows marker of Hydrozen and Oxygen then it will show Water molicule . Water molicule will show up in repalce of Oxgen marker. And It would ...
0
votes
0
answers
39
views
Making Vertex Shader face Camera like billboard in THREE.JS
Im attempting to make a vertex shader that i can apply to a mesh to make all its quads turn into billboards. I found this code is the closest i could get it however it does not fully face the camera ...
0
votes
0
answers
106
views
Expo with Threejs: RangeError: Property storage exceeds 196607 properties
When loading an OBJ model into a Threejs scene in an Expo app, it can fail with the error:
RangeError: Property storage exceeds 196607 properties
Is might be because the OBJ is too complex for the ...
- 1,343
0
votes
0
answers
22
views
CannonJS takes allot of force to start moving body
I'm making a movement system with cannonjs and threejs and I have reached a road block.
Basicly, when the player presses the W key it requires alot of force to start and keep moving.
To make the ...
- 1
0
votes
0
answers
37
views
I am facing an issue (no output) implementing raycaster in three js here is the code:
I created the sphere with a material using three.js, and I tried to make it clickable (via raycasting) but it does not work.
Camera, scene and lights and imported GLFT are there working properly but ...
0
votes
0
answers
28
views
Displaying the movement of a 3D model with data from an ESP32 gyroscope
I'm having a problem showing the movement of my ESP32 using the three.js library. The code reads the data generated by the gyroscope and implements it to the 3D model. It is not fluid and even the ...
0
votes
0
answers
16
views
Textures imported and mapped to MeshBasicMaterial appear considerably lighter than they should
I have a tile engine that imports a tilesheet and then creates tiles to display them, but they appear much lighter and are somehow being altered. I’ve not changed the initial variables of the scene or ...
0
votes
0
answers
42
views
Sphere coordinates display discontinuous images
As the title says, the program uses threejs.
Code below:
const mouse = new THREE.Vector2();
const pointer = new THREE.Vector2();
window.addEventListener( 'mousemove', onMouseMove );
function ...
- 1
0
votes
0
answers
24
views
How to make the animation of multi-gltf model?
I am working on a DOTA2 website and try to add heros' 3D model in the web. I extracted a hero's model, but it includes many gltf files and textures. One of files is the hero's body and the rest are ...
-1
votes
0
answers
64
views
How can I make this animation slowly?
https://codepen.io/VyacheslavY/pen/WNBdRQz
The current animation is very fast, I want to make it a bit slow and smooth. I'm changing the FPS, but it doesn't help.
I tried decreasing the speed of ...
- 131