Skip to main content
2024 Developer survey is here and we would like to hear from you!
Take the 2024 Developer Survey

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
0 votes
0 answers
10 views

React Three Fiber + postprocessing - Trying to show outline of child mesh on hover but <Select> only works if applied to the main mesh

I am a React Three Fiber novice and am using postprocessing effects to try and highlight interactable objects (child meshes) on a main mesh. I am using raycaster to determine the exact location of the ...
fatbigcat's user avatar
-1 votes
0 answers
19 views

Three.js vs WebGL [closed]

I am trying to learn to make three-dimensional objects using HTML, CSS, and JavaScript and I am wondering which one is better to learn for an intermediate knowledge of JavaScript. I know that WebGL ...
aquatic_anqel's user avatar
0 votes
0 answers
22 views

How to use custom models in this animation

import React, { useRef, useEffect, useState } from 'react'; import { Canvas, useFrame, useThree } from '@react-three/fiber'; import { OrbitControls } from '@react-three/drei'; import * as THREE from '...
Marc Newsom's user avatar
0 votes
1 answer
62 views

Threejs canvas does not scale back when phone rotated back

I am using three js library, when i rotate my phone my component basically increases its size, but when i flip my phone back it does not change back, it distorts my page and half of the component goes ...
Takeshi Szentagothai's user avatar
0 votes
0 answers
22 views

R3F mask is not limiting the rendering area of the text

I was trying to recreate this sample from r3f https://codesandbox.io/p/sandbox/condescending-tereshkova-r7f742?file=%2Fsrc%2FPrice.js%3A32%2C4 My issue is related with the Mask since the Text is not ...
MiguelG's user avatar
  • 115
0 votes
0 answers
15 views

@react-three/fiber create a sphere with diameter equals to the width of the canvas

I am new to the library and I would like to do something that i think is simple to have a sphere of diameter the same as the canvas. I thought what I was doing was simple, but I was mistaken, I tried ...
Lorenzo Gilardi's user avatar
0 votes
0 answers
27 views

Decals not working with instanced meshes, in Three.js

Been dabbling around with decals for a while. While it works like a charm with normal meshes, it doesn’t work with instanced meshes. How can I make it work with an instanced mesh? Does it require ...
Soham Bhaumik's user avatar
-2 votes
0 answers
19 views

WebGLRenderer: Context Lost Error in Three.js [closed]

talented webgl developers. I have faced the error called "webgl renderer : context lost" in three.js development. I am so glad if who help me, [enter image description here](https://i....
ssswhite's user avatar
0 votes
0 answers
16 views

Rotating camera around object while keeping object in the center using THREE.js

I would like to camera in 3D around object in Three.js based on current mouse position. From user's perspective - I would like object to stay in the center of the screen and just see it rotating in 3D....
Quarol's user avatar
  • 11
0 votes
0 answers
26 views

Decal geometry not appearing on instancedmesh in Three.js

I have an instanced mesh set up in Three.js as follows: const numPoints = 100; const points = []; for(let i = 0 ; i < numPoints; i++) { const randomX = getRandomInteger(1, 6); const randomY ...
Soham Bhaumik's user avatar
0 votes
0 answers
6 views

I am trying to use urdf-loader in Next js 14.2.3 but its not working

useEffect(() => { const loadRobot = async () => { useLoader(URDFLoader, filepath, (loader) => { loader.loadMeshCb = (path, manager, done) => { new STLLoader(manager)....
ASHWANI SHARMA's user avatar
0 votes
1 answer
36 views

R3F Decal with specific shapes

I want to be able to change the shape of Decal mesh such that the image appears cropped according to the given shape. My attempt was to make it a triangle. const Image = ({ position, image, scale, ...
Chamud Pathirana's user avatar
0 votes
0 answers
17 views

Image Wrapped full 3D Mesh

I don't want to wrap the full mesh. How can embed the image on 3D Tshirt mesh. Here is my 3D Tshirt UV Map. Here is my 3D Tshirt Mesh Output The image wrap full mesh as you see here. The uploaded ...
Tharuneshwar S's user avatar
0 votes
0 answers
19 views

Vector3 rotation influenced by parent of parent

I have the following function trying to rotate the last joint of a finger using mediapipe results. However, the joint rotates even when the actual joint has remained straight, but one other in its ...
Lkjam's user avatar
  • 1
-1 votes
0 answers
33 views

Angular 16: CSS disappeared after build but works in development

I have a big Angular v16 application that uses ThreeJS for one component to render a 3d workflow. In order to add a lot of text labels I use the CSS3DRenderer. This uses a HTML DIV Component already ...
Pianoman's user avatar
  • 333
-1 votes
0 answers
20 views

Error loadings Three.js: i.default.Scene is not a constructor

I have tried to use THREE JS as a 3rd party module in lwc, after uploading it as a static resource. But I am not able to load the module using loadscript. It gives the error: i.default.Scene is not a ...
Harshvardhan agrawal's user avatar
0 votes
0 answers
30 views

Trouble Highlighting IFCOPENINGELEMENTs in three.js 3D View

I'm utilizing the IFC loader to import an IFC file into three.js for 3D visualization. My current task involves highlighting all opening elements (IFCOPENINGELEMENT) in red within the 3D view. Below ...
pavithra rox's user avatar
  • 1,076
0 votes
1 answer
47 views

How to get sharp edge with particles

This is my current output: Torus with crooked edges As you can see, the edges are “blocky”. This is already using round particles through discarding pixels in the Points material custom fragment ...
Nameless's user avatar
0 votes
0 answers
24 views

Cannon js raycast vehicle odd behaviour

I'm creating a simple globe and user controlled car using cannon.js and three.js. The car currently doesn't move forwards or backwards, but on pressing up/down while the car is in air the car jumps ...
Azan's user avatar
  • 37
0 votes
1 answer
107 views

How to convert a google font for use with ThreeJS

How does one convert a downloaded google font from ttf to json for use with ThreeJS FontLoader / TextGeometry? import LatoFont from '../assets/fonts/lato-bold.json' const loader = new FontLoader(); ...
BAR's user avatar
  • 16.6k
0 votes
0 answers
34 views

How to fill countries with color on three js sphere

So I'm trying to make a Globe component with map on it where I can paint countries in different color. I managed to make it so border color is changeable but all the time I try to paint inside with ...
i.surin's user avatar
0 votes
0 answers
32 views

3D object rotation based on tensorflow handpose landmarks

So I am currently working on a project that is using @tensorflow-models/handpose to detect hand landmarks and then I am matching the x and y of the landmark 0 to a 3d model. However. I am using info ...
sanoful's user avatar
0 votes
1 answer
33 views

MeshPhysicalMaterial properties is not applying

I am trying to create a glass like triangle for my project in 3js, but it is not working. let vertices = new Float32Array([ -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, ]); ...
Proma's user avatar
  • 1
-1 votes
0 answers
159 views

npm warnings when using npm install using Vite

I am new to using Vite and I am running into these warnings when trying to scaffold my project. npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check ...
Res's user avatar
  • 1
0 votes
1 answer
32 views

Real time Cursor tracking in Autodesk Viewer

I am trying to setup real-time cursor tracking in Autodesk Viewer. Sometimes, there is distance between the cursor and the mesh. When I rotate the project (building model, in my case), the mesh ...
Aliyan Ishfaq's user avatar
1 vote
1 answer
39 views

How to extrude a certain triangle in a mesh in three.js

Description: My three.js scene is based upon a selection tool in which if we click and drag over the mesh it colors the triangles of the mesh red, I want to create a function that when runs checks the ...
AshhadDevLab's user avatar
0 votes
0 answers
25 views

Occasional black model when refreshing website - Three.js [closed]

I'm using a javascript application with three.js and the urdf-loaders package to display a robot model in another application via an iframe. When doing a website refresh occasionally the model is ...
Schmeckis's user avatar
0 votes
0 answers
28 views

Adding outlines for blender model with sharp edges

I've started learning some three.js and blender to achieve the cartoon effect. I've been working on some code to add black outlines to Blender objects. I've based my code on the tutorial I found on ...
Rayugo's user avatar
  • 15
1 vote
0 answers
62 views

"bake" light within three.js

In my three.js project, i have a static scene, that I want to add lighting and shadow to. Since its static, I dont need to re-calculate lights and shadow each frame. When it comes to shadows, I can ...
tennesea's user avatar
-1 votes
0 answers
16 views

change dimensions of imported model in react-three-fiber / drei

I am making a custom configurator using react-three-fiber for my webapp. I'm taking in input dimensions from the user and need to alter my imported model size based on the data entered by the user. ...
SHUBHANKAR KAUSHIK's user avatar
0 votes
3 answers
67 views

TypeError when trying to import OrbitControls. What do I do?

I get this error when trying to import the OrbitControls JS: import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' const scene = new THREE.Scene(); const camera = new THREE....
Taric_112's user avatar
0 votes
0 answers
22 views

Add xyz position to a Quaternion orientation

I have 3d point, with a Quaternion location (w,x,y,z) How to Add a position (x,y,z) to this quaternion matrix ? Is there any way to convert a Quaternion matrix into something like (Position+Rotation+...
Kane Pro's user avatar
0 votes
0 answers
34 views

Three.js Text Geometry not showing

I have been trying and googling but I can't find where the problem is with my code. I have an Angular project in which I am using Three.js for some animations. Just basic simple 2D animations. Based ...
DDimitrov's user avatar
0 votes
0 answers
18 views

R3F exported NodeToy shader is invisible

I am unable to get my glsl NodeToy dark pink shader to show up on the the arms and legs of the models of the caution symbol and X symbol. The flat dark pink shader that is currently visible is not the ...
Felt_Notebook's user avatar
-1 votes
0 answers
46 views

Three.js website isn't running when pushed to GitHub repository

I have been creating my portfolio website and I decided to use THREE.js to make it a more unique and fun project. It seemed to work fine when I was checking the website from the text editor but when I ...
Craigy's user avatar
  • 1
0 votes
0 answers
40 views

Autodesk Forge: set DataVisualisation sprite offset or other THREE js sprite parameters

Following this guide https://aps.autodesk.com/en/docs/dataviz/v1/developers_guide/examples/sprites/ i added a system in my forge viewer app to add sprite on mouse click My question is, appart from ...
walid_salah's user avatar
0 votes
0 answers
27 views

what can cause culled verticies in threejs?

I have recently encountered a weird problem with three js. In some situations it is not rendering all verticies (shown in the image below). Worth noting that the image is of a circle geometry created ...
munHunger's user avatar
  • 2,839
0 votes
1 answer
44 views

Lights (spotlight / directionalight) creating waves on my ground texture. How can I remove them?

I just encountered an issue with one of my three.js project. I've got a scene with some mapped objects. When I add some lights on the scene, some "waves" appeared on my scene. enter image ...
TEDSTEAM's user avatar
-1 votes
0 answers
30 views

How to do realistic sun light rays with WebGPU [closed]

I'm looking to use WebGPU to create super realistic sun rays like this^. There is this question about realistic lighting, but that was before (and not considering) the advantages of the WebGPU API. ...
Awtsmoos--עצמות's user avatar
0 votes
0 answers
16 views

Three.js concept to render/modify Data3DTextures?

I have an existing application that renders 3D voxel densities (D) and an overlay of 3D voxel labels (L). Those are saved in two pretty large THREE.Data3DTextures. I want to use render-to-texture to ...
Stiefel's user avatar
  • 2,744
0 votes
0 answers
36 views

shortest path between two points(mesh) in the glb file in three.js using React.js

I've a .glb file which is about to showcase the map. I need to find the shortest path between two points(mesh) and draw a line using Yuka . The solution should be in React.Js or R3F. Also camera ...
Techie's user avatar
  • 9
0 votes
1 answer
89 views

Cylinder rotation in React-three-fiber

I can't make the cylinder rotate straight. I wan't to create rotating coin with react-three-js. I decided to use low height cylinder geometry for that. To achieve the coin-like shape, I had to rotate ...
Alexei Belozertsev's user avatar
0 votes
0 answers
24 views

Calculate camera y position for horizon to be at a percentage of canvas height

I have the following three.js code that renders a cube hovering above a floor, with the camera looking at the cube: let renderer, camera, scene, light, floor, cube; init(); render(); function ...
XåpplI'-I0llwlg'I  -'s user avatar
0 votes
0 answers
27 views

Build a tree with branches in threejs with Dotnet

I am trying to build tree that you look like picture below with threejs and dotnet which has one main branch, can many branches attached to it the children branches can have many children or branches ...
Fabrice Ibols's user avatar
0 votes
1 answer
39 views

Proper way to GENERATE a height map based off of a mesh, in ThreeJS?

<!--B"H--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
Awtsmoos--עצמות's user avatar
0 votes
1 answer
42 views

How do I show countries using paths on a 3d globe - React Native

I'm trying to create an interactive world map in React Native. I have a file called countriesData.json and it comes with country information paths in the following format. The 3D globe I created with ...
adre's user avatar
  • 1
-1 votes
0 answers
25 views

How do i render the 3d model?

okey here i am, i just follow youtube video step by step and then once i try to render the 3d model my website become white here my code this is for island model i turn glb into jsx file. /* eslint-...
MUSLIIIII's user avatar
-1 votes
0 answers
62 views

Why is the texture set for PointsMaterial in Three.js so that the effect appears on the entire material instead of points?

I'm using Three.js PointsMaterial, and I want to add texture styles to it, but I find that the texture style effect is displayed on the entire material, not on the points.The version of Three.js I use ...
shunpeng gao's user avatar
0 votes
0 answers
23 views

Three JS, MindAR having issues casting a shadow from a GLTF

Ive tried traversing the GLTF and enabling shadows and also spawning in a plane for the shadow to be cast on. Am new to AR with MindAR so am not sure if am missing something, possibly with the ...
David Steven Mckinley's user avatar
0 votes
1 answer
24 views

Scrolling on div does not work after applying transformation (Matrix3d)

The problem is that when you try to scroll the #content div, it does not work. Scrolling with the scrollbar works, however: <!DOCTYPE html> <html lang="en"> <head> <...
Hanz Geiger's user avatar

1
2 3 4 5
423