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,115
questions
0
votes
0
answers
25
views
How to change shape in three.js angular
I am new to three.js with no prior experience. I am able to show geometric shape. I would like to allow the user with means to modify the starting shape of the primitives, by for example moving some ...
1
vote
0
answers
25
views
GLSL shader difference between desktop and mobile - varyings or noise function?
Context
I'm building a WebGL GLSL shader using a 3d Perlin Noise function to warp the vertices as well as color the fragments so they line up with the vertices.
I'm running the Perlin Noise function ...
0
votes
0
answers
14
views
How do I convert camera angle in first person perspective to velocity in order to throw an object away from the camera?
I am using rapier physics with R3f, using pmndrs Ecctrl.
// returns the current player position or a default position
const calculatePosition = useCallback((pos, addMe) => {
if (ecctrlRef....
1
vote
0
answers
30
views
heightmap generation in JavaScript
<!--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
2
answers
45
views
What is the best tech stack to build a small 3D browser game? [closed]
I want to build a 3D website. It will have a 3D room with desks and stuff and then when hovering with a pointer over each desk will take you to the desk so that you can interact with objects on it. (...
-1
votes
0
answers
17
views
How to have a 3D model lookAt my mouse cursor outside of the canvas? [closed]
I'm quite new to Three.js and React to be honest and I need some help with one of my projects.
So basically, I want to have a 3D model that follows my mouse cursor (lookAt). I've found this code in ...
0
votes
0
answers
12
views
Can't see material on BufferGeometry
so i'm new to threejs and i was trying to render a basic rectangle using BufferGeometry but i can't see the material that was applied to the geometry.
the material would only show if i set the side ...
0
votes
0
answers
16
views
Inverse Kinematics issues in three.js
I am trying to use inverse kinematics on a hand model.
I have downloaded a pre-rigged model from github.
I modify the model in Blender, adding target-bones and inverse kinematics constraints, and ...
0
votes
0
answers
10
views
Can't access object in nested loop (JS and three.js) [duplicate]
I have a question about JavaScript and Threejs.
I made an object title_and_coord that stores sentences and their Vector3 coordinates (for wherever each sentence appears in my scene). I am trying to ...
0
votes
0
answers
14
views
React Three.js unable to display the mesh with apropriate texture
I exported a glb file from blender. It has texture applied. But when I load it on web through R3F, it looks too much exposed and texture is very weird and low quality with no color. But when I load ...
0
votes
0
answers
31
views
Getting Object To Look At Mouse Cursor with TresJS or TroisJS
I am a threejs noob trying to get a 3D object to look at the mouse cursor based on this
example, it's exactly what I want to do but in my vue project instead of react and using TresJs or TroisJS ...
0
votes
0
answers
14
views
After slicing the 2:1 picture, using canvas and CanvasTexture to draw it, overlap appeared in the stitching
After slicing the 2:1 picture, using canvas and CanvasTexture to draw it, I pasted it on a panorama ball, and there was overlap at the concatenation.
enter image description here
This is not a problem ...
0
votes
0
answers
22
views
Can you colorize the texture of a MeshBasicMaterial white?
Just like you’d set the color of a material to red and it colorizes the material’s texture to red. Is it possible to colorize to complete white? Since applying white as the color is the default to ...
0
votes
1
answer
40
views
How to make a Prismoid in Three.js?
I'm using Three.js and I'm trying to make a pyramid, but with its top cut off, and its base is a rectangle, and the top is also a rectangle, but not in the same proportions.
Heres the pic from ...
0
votes
1
answer
29
views
Object array type property is undefined in different file
I am in the process of refactoring a js file in which I used the THREE.js library to draw a truck visualization based on the parameters provided in the form. The code worked, but I need to extend it ...
0
votes
0
answers
24
views
Three.js checkers game
I am in very early stages of making a Three.js checkers game. I have the board made, and now i want to put the board on top of a table, how can I do it? Here is my code so far. (the comments are in ...
-1
votes
0
answers
18
views
Can't add model [closed]
Can't add headphones file, but another 2 work well
i don`t have any errors
model from Sketchfab
enter image description here
const loader = new GLTFLoader();
let mixer = null;
loader.load(
// './...
0
votes
1
answer
25
views
Why is the bounding box my code generates always at the origin, and not rendering at the cursor position when mouse is down?
I am trying to create a bounding box zoom, over a three js render, where the user can drag a box and then the camera will zoom on the bounded area. However, the box is not generating correctly.
` ...
-1
votes
0
answers
22
views
Why are the phi and theta defined in Spherical and SphereGeometry of Three.js inconsistent? [closed]
as my knowledge, the x axis is from left to right (→), y is bottom to top (↑), z is inside to outside of the screen (·).
In Spherical, phi is start from the +y (↑), and stand for vertical angle. But ...
0
votes
0
answers
29
views
Three js not displaying anything
HTML:
<canvas id="car0" class="model"></canvas>
JavaScript:
import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
import { ...
0
votes
0
answers
21
views
How to create this arrow animation part of https://particle-love.com/ website? [closed]
After opening https://particle-love.com/ website and choosing quality.
Part where it has arrows and by clicking it changes position of camera and background is really cool and I was wondering is there ...
0
votes
0
answers
23
views
How do I match a threejs canvas and renderer to a picture on screen? [closed]
I have a pre-rendered image which I display on screen. It has identical width and height, and is styled by css. It changes size when the window is resized and changes aspect ratio, but is always in ...
2
votes
0
answers
22
views
In my three.js and react project getting error 'TypeError: fetch failed'
I got this error. how can i resolve this?
Parse
TypeError: fetch failed
at node:internal/deps/undici/undici:12618:11
at process.processTicksAndRejections (node:internal/process/task_queues:95:...
0
votes
0
answers
12
views
ADSBexchange API - Not receiving data for airplanes on the ground
This question is very niched to aviation-themed-programming, but I hope I can possibly get some answers here.
I am creating a hobby project using Mapbox, Three.js and the ADSBexchange API. I am ...
-1
votes
0
answers
17
views
Need to create a product customiser for e-commerce store [closed]
we are planning to create a custom product builder for Hat, T-shirts, etc to existing ecommerce website. One product can have multiple product type example: Hat can be Baseball cap, Beret, Fedora, ...
-1
votes
1
answer
41
views
How can I use a Three.js script in Vue? [closed]
I am trying to use a three.js script written in vanilla JavaScript in a Vue project. The script uses the three function objLoader to load an object from a local file. This script works fine in vanilla ...
0
votes
1
answer
9
views
How to make a cannon.js body copy a Three.js Object3D that's in the camera group?
I have a sword model in the camera using camera.add(sword), but how would I get cannon.js body to copy that sword position and quaternion? I tried adding the cannon.js body to another that is acting ...
0
votes
0
answers
18
views
Three.js glb mesh has weird black surface in certain places and is too bright
I'm quite new to three.js and I'm working on loading a SMPL body model which outputs a obj file and using python module Trimesh I convert it to GLB format. Then I import and render it using Threejs ...
0
votes
1
answer
15
views
how to get renderPass info with pmndrs/postprocessing?
I am used to using renderer.info to get the number of triangles in my scene in three.js. However with pmndrs/postprocessing https://github.com/pmndrs/postprocessing the renderer.info.triangles is ...
-1
votes
1
answer
28
views
Creating a new xr event
I am new to typescript and I am trying to implement the equivalent of a "double-click" event for a hand-input controller to interact with a mesh in my three-js app. I wish to do this the ...
0
votes
0
answers
13
views
How to load a URDF file in aframe?
I am trying to load a URDF file in aframe scene to visualize it on VR. The code for aframe component is:
<script type="importmap"> { "imports": {
"...
0
votes
1
answer
29
views
How should mesh data be distributed across accessors, bufferViews, buffers in a glTF file?
In the glTF format,
mesh object positions go through three levels of indirection:
mesh -> accessor -> bufferView -> buffer.
How should mesh data be distributed across the accessors,
...
0
votes
1
answer
33
views
Changing attributes on a cloned object changes all objects
I have loaded an OBJ file and from that original I .clone() it into an array. Later I wish to change the vertexColor of some of them to a different color, but changing one changes them all.
var oload =...
0
votes
0
answers
15
views
readRenderTargetPixels not working react three fiber GPU picking
I'm working on a GPU picking set up for instances in a 3D space using react three fiber - I've seen this done with threeJS, so essentially porting over.
I have set up a main scene with my instaces in ...
0
votes
2
answers
30
views
Starting Three.js from scratch for graphics based learning [closed]
I want to start learning Three.js and want to understand graphics in depth. Need guidance with the path for this.
I am currently following the Three.js website guide but want to go beyond that and ...
0
votes
1
answer
29
views
Cannot read properties of undefined (reading 'up') at CubeCamera.updateCoordinateSystem
It has been a few years since I had a look at this three.js project of mine (back when one typed out the full name PlaneBufferGeometry). It contains a number of vehicles that should reflect the ...
0
votes
1
answer
25
views
How to rotate a group based on camaras orientation?
I am making a game where you have a sword that you can swing, the sword is in a group with an offset so it is positioned right. I am trying to make it so that when I press Z the sword swings down and ...
0
votes
0
answers
11
views
Align Text to 3d Model based on position and normal
I'm attempting to position Text3D snugly on a 3D model in r3f. The user can rotate the model and right-click to place the text. However, I'm struggling with the math to ensure the text appears right-...
0
votes
0
answers
16
views
react-three-fiber different textures on front and back of a planeGeometry
I'm attempting to show two different textures on the two sides of a planeGeometry component. It's possible that I'm misunderstanding how planes work and this isn't possible, but I thought with the ...
0
votes
0
answers
24
views
How to keep a react three fiber canvas from scaling an object when resizing browser and always render object the same size?
I am using react fiber in one of our projects but the issue I am facing is that the GLB object gets scaled when resizing the browser or is adjusted depending on the browser's size. For example: MS ...
0
votes
0
answers
12
views
Three.js click and move logic with background image
Im currently working on a three.js project as stated, we move by clicking on the ground where we want our character to go and so on. Im using the navmesh library and building my ground floor in ...
0
votes
1
answer
20
views
Rotating an extruded shape with "filled holes" in Three.JS
I am pretty new to Three.js, so please forgive me if I a missing something obvious here.
My problem setting is the following: I have a 2D shape (e.g. a rectangle) with some holes in it:
const shape = ...
0
votes
0
answers
43
views
HTML 5 Canvas Animation messed up while changing resolution and not working on mobile
This is my canvas code, it's just a simple circle animation with some mousemove effect, but when i try to change my resolution it will make it bigger and messy. Also not working on mobile. IT usually ...
0
votes
1
answer
29
views
TypeError: "domElement" is read-only | THREE.WebGLRenderer
I'm getting an error when trying to initialize WebGLRenderer:
(I removed some unnecessary lines)
import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
import {...
0
votes
0
answers
28
views
Chromakey (green screen) video via shaders and custom material?
I have been unable to utilize custom shaders and a custom material to properly key out (remove) the green background from a video. The video used was here: https://youtu.be/ZXsQAXx_ao0?feature=shared
...
0
votes
0
answers
18
views
Try to load "glb" file from next.js, but, I got 500 error
I just try to load/show glb file on web page by Next.js, but, I have 500 error with "ERR_INVALID_URL".
I already put "diamond1.glb" file into the "public" folder.
"...
0
votes
0
answers
18
views
How to instance primitives in react three fiber?
I have been able to instance a cube made in R3F when I copy this setup, but for my palm element which is a primitive (which is just a low poly palm tree made in blender), it doesn't work - is there ...
1
vote
0
answers
16
views
THREE.js How to render canvas element with no repeat?
I am trying to build a box where I can draw the images myself through a canvas element.
Here is what I have so far:
Preview
The thing is, I do not want the canvas image to repeat every face, I want to ...
0
votes
0
answers
21
views
Why can't my Box3 bounding box detect an intersect between my GLTF/FBX models?
I'm new to ThreeJS so I don't know if the Box3 is commonly used for collision detection.
I've attached a Box3 bounding box to detect collision and prevent the character from walking into the bounding ...
0
votes
1
answer
20
views
How to have axes move with cube? (react-three-fiber/ Three.js)
I am using react-three-fiber(built on Three.js) and want to add x,y,z axes to my cube. The issue is that the axes do not move with the cube, they just stay aligned with the page. How do I get the axes ...