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,129
questions
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 ...
-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 ...
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 '...
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 ...
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 ...
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 ...
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 ...
-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....
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....
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 ...
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)....
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, ...
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 ...
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 ...
-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 ...
-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 ...
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 ...
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 ...
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 ...
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();
...
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 ...
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 ...
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,
]);
...
-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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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.
...
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....
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+...
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 ...
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 ...
-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 ...
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 ...
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 ...
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 ...
-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.
...
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 ...
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 ...
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 ...
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 ...
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 ...
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">
<...
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 ...
-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-...
-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 ...
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 ...
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>
<...