People who code: we want your input. Take the 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.

Filter by
Sorted by
Tagged with
0
votes
0answers
5 views

why does this code add dummy DOM element for animating an three object along a path?

I'm trying to move objects along side a path in three.js. I could find an example from gsap website and the code is doing something that I don't understand. See the code below. var path = [{x: 0, y: 0,...
0
votes
0answers
24 views

Something wrong with PointCloud indexes

I have set up a point cloud with the intention of changing a vertex colour when the point is clicked. I have worked out how to set up the vertex colours and the index required but it just does not ...
0
votes
0answers
7 views

using three force-graph and errors with typescript

anyone here used react force graph with typescript? i dont know anything about typescript. assigned a job i virtually know nothing about. basically i have to change the template to a 3d model. seems ...
0
votes
0answers
16 views

Handling Collisions for Drag and Drop in Entity Component System

I'm currently working on an ECS for a little 3D Configurator with three.js and typescript using ReactApp. I worked a with unity and liked the way to work with entities and components. So I decided to ...
0
votes
1answer
16 views

three js object traverse does not update child

I traverse child nodes of an object and want to set them visible. But the child is not updated (still visible=false) mymesh.traverse((child) => { if (child?.userData?.type === "...
0
votes
1answer
20 views

Three raycaster, why do I have to go with index zero?

I tried to get the index of the particle I crossed with my mouse cursor while using raycaster. however, When I log intersects, it returns a millions of object even if I only came across one point. I ...
0
votes
0answers
14 views

React Three.js dynamic variable to change mesh count “Cannot read property 'id' of null”

I'm new to react and want to change the number of rendered particles using a variable so that it can be changed. It will take data from another component that will define the number of particles it ...
1
vote
1answer
11 views

can`t use three.js texture loader in javascript worker

I'm trying to use three.js to load the texture. main.js: const worker = new Worker('../workers/worker.js', { type: 'module' }); and this is the simple worker.js: import * as THREE from '...
0
votes
0answers
14 views

Is there any way of making a canvas sprite, and adding to the sprite some background color at the same moment?

how are you all doing? I tried already a lot of approaches that I found here, but I couldn’t get whats I want. I have a Sprite that has a canvas as its texture. But, this canvas renders a graphic, and ...
-3
votes
0answers
16 views

How to deploy a Three.js site to netlify / vercel

I recently made a Three.js site and now I want to deploy it .. I made it with vite which means my run command was npm run devand this opens the site on localhost now I want to deploy it to netlify . ...
0
votes
1answer
20 views

Avoid propagating keydown events from dat.GUI to Three.js scene

I have this code (see bellow) with 2 event listeners: renderer.domElement.addEventListener("pointerdown", changeColor, false); document.addEventListener("keydown", changeColor, ...
0
votes
0answers
23 views

ThreeJS: How to load a SVG file which has text in it

I have an SVG file with some text content in three.js. when I try to load it using SVGLoader, it loader the SVG content but misses the text content while rendering. Is there any way to render the text ...
0
votes
1answer
13 views

How to get all Object3D's from a Canvas in three-react-fiber

I'm working on my first App using react-three-fiber. I currently generate the Viewport like this: const Viewport = (props) => { return ( <Canvas onCreated={({ gl, raycaster }) =>...
2
votes
1answer
21 views

Why I can't create Face3 in ThreeJS Typescript project

I am trying to create Mesh by using Face3. I am using Threejs in typescript project. There are several problems I am facing. const points = [ new Face3(-1, 1, -1),//c new Face3(-1, -1, 1),//...
1
vote
1answer
28 views

A-frame object onclick function

I have an object in my scene and I would like it so that when I click on the object, a function called myFunction occurs. How can this be done? I have also assigned an id of #plane1 to my object in ...
0
votes
1answer
32 views

Three.js: Cannot display mesh created with texture array

I'm building a very original game based in cubes you place in a sandbox world (a totally unique concept that will revolutionize gaming as we know it) and I'm working with the chunk generation. Here's ...
0
votes
0answers
14 views

How to render multiple models from useFBX? @react-three/drei

I am trying to display multiple components using useFBX in @react-three/drei. Though I am calling the function twice I am getting only one component inside the scene. I have the following code to ...
0
votes
0answers
17 views

Drag and drop upload any object file and display it in threejs

I'm wanting to load an object file of any type and show it with the browser side three js library. I have included a basic template for html that includes a drag and drop box with an upload button ...
0
votes
0answers
14 views

How do I change the position of an object with dat.GUI in threejs?

I am pretty new to three.js. I want to change the position of a plane geometry (move it along the Y axis) using dat.GUI. I managed to change various other parameters or variables like light intensity ...
0
votes
0answers
10 views

THREE.js pointerlock controls not moving camera around on mouse movement

I tried to follow the source code at https://threejs.org/examples/misc_controls_pointerlock.html without the divs, but it didn't work. I then tried following the code here https://sbcode.net/threejs/...
-1
votes
0answers
25 views

Can't iterate through Object in JavaScript [closed]

I'm trying to create a game using ThreeJs and CannonJs I'm importing multiple models and I'm trying to store it in an dictionary but I just can't loop through it . List = { 0:{name: "something 1&...
0
votes
0answers
18 views

How can I Interact with my html code in a-frame

I am using an a-frame component to insert 2d html into my scene on a plane. For some reason, none of my html is interactable. I currently am trying to create a whiteboard and insert it into my scene ...
0
votes
1answer
6 views

Attach link to 3d-force-graph node

Is there a way to attach a link to the nodes in 3d-force-graph (https://github.com/vasturiano/3d-force-graph) so that if a user clicks on a node they are taken away to a specific (or customised) url?
0
votes
0answers
18 views

ThreeJs black screen in VueJs application

I have been studying some basics of Three.js into a Vue.JS application. I am following a tutorial and the code is the same as the original autor. A cube geometry was added as a initial test, but my ...
0
votes
0answers
11 views

For three js raycaster with modal, can I use THREE.Points or do I have to make series of individual spheres?

Ultimately I want to render series of dots which can interact with raycaster and shows corresponding modal for each intersection. However, I'm not sure if it's possible to achieve that by THREE.Points....
0
votes
0answers
22 views

three.js, How do I get a CSS3DObject to show up? (what am I doing wrong)

I set up a CSS3DRenderer, a scene, a camera, in my HTML document I have an element that I am trying to turn into a CSS3DObject, and I have my CSS3DRenderer using .render in a game loop. I created a ...
1
vote
1answer
20 views

BufferGeometry doesn't update even after needsupdate is set true

I'm struggling with updating point geometry in Three JS. I tried to move individual points and eventually move to a point I want. To keep things clean, I created a class constructor. And it is ...
0
votes
0answers
19 views

Three JS color, metalness, lights, shaders are not working on my mobile

This is my code with Three.js. Here I've written a simple code for a red colored, point light and a textured torus with a simple animation. But I got only a black colored torus rotating. The things ...
-1
votes
0answers
25 views

Change in mesh visibility and quality on camera movement

Can someone help me to find the issue here? I am losing the quality/ visibility when I zoom out. Below giving two images Initial Image Image after Zoom out Since I need to change the lineWidth I am ...
0
votes
0answers
14 views

Modal image popup in Web Based Augmented Reality (AR) with A-Frame/AR JS

I developing a web-based AR application with hit test, object positioning. The application detects the surface with a camera and puts the glb 3D picture on that surface by click/touch event. Now, ...
0
votes
0answers
27 views

Scale cartesian coordinates to a plane

I have a group of coordinates in cartesian, im trying to show in a plane, but shows all together. I do to show: //coordinates var coords = [{x: 38.312994420265, z: -6.73293614518871 }, { x:...
0
votes
1answer
41 views

How to import javascript files in html with Flask

I have an Html page with a javascript part in which I include some other .js files : <script type="module"> import * as THREE from "../build/three.module.js"; ...
0
votes
1answer
14 views

Adding different animations to existing mixamo FBX models three.js

I have copied code for loading an animation (dancing twerk from mixamo) onto an existing fbx model (Douglas from mixamo) from the tutorial here https://www.youtube.com/watch?v=8n_v1aJmLmc but it does ...
0
votes
0answers
15 views

Mixamo model used in FBX Loader three.js presents multiple material.skinning =false errors

Image of errors My FBX Loader code is as follows (my separate FBX animation does not work currently, that is another problem I need to solve): const loader = new FBXLoader(); //load model ...
0
votes
0answers
21 views

Using Class constructor in Three JS

I wonder if it's common practice use JavaScript class inn three js as well. I searched some opinions about this and most people said 'using prototype' is more common. Since I'm relatively more ...
0
votes
0answers
16 views

@react-three/postprocessing SelectiveBloom is not updating object selection

I dont know if this is a bug or if it is an intended behaviour I am not understanding correctly, but it seems that when changing the object selection of the SelectiveBloom effect it adds it to the ...
0
votes
0answers
21 views

Drawing a plane in ThreeJS with Point and Normal Vector

I would like to draw a plane in ThreeJS with a point (e. g. 0, 10, 20) and a normal vector for the plane orientation. I simply just do no get the position or the orientation right. Please help me out. ...
0
votes
1answer
16 views

Rendering three.js canvas in VUE without using let variables outside nor appendChild

I tried to render three js canvas within vue set up. But due to Vue's statemanagement pattern, it could be done only when I set the canvas related variables outside of vue state management. I saw an ...
0
votes
0answers
11 views

Three.js Raycaster only selects sections of an imported gltf model based off materials

I'm very new to Three.js and I'm having trouble with using Three.Raycaster to select my gltf models. Instead of selecting the the full models I'm only able to select parts of the models based of what ...
0
votes
1answer
22 views

How can I use ThreeJS ES6 native modules with Typescript?

I am using ThreeJS ES6 native modules directly in the browser. It's a really cool feature where you can just import ThreeJS from your javascript files without any module bundler. The following works ...
0
votes
1answer
31 views

Cannot change colour of vertex for three.js PointCloud

I am having trouble changing the colour of a vertex on a mouse click using three.js and Angular. I have been reading around this and I think I should be setting up vertex colours and then when I ...
0
votes
1answer
23 views

React JS changing words in spherical word cloud

https://codesandbox.io/s/basic-demo-forked-yup2o?file=/src/App.js I have the above sandbox of a spherical word cloud consisting of random words - I'm trying to modify the code so rather than random ...
0
votes
0answers
31 views

A-frame png sequences texture animation preloader?

I've accomplished my goal using PNG sequence for texture animation on <a-plane> to create 2d animation with ARJS according to answer on this question Animating a series of PNG images in a-frame /...
0
votes
0answers
24 views

How to stop threejs animation when using setTimeout?

In order to set the frames-per-second rate (fps), I use the common pattern: function animate() { setTimeout( function() { id = requestAnimationFrame( animate ); }, 1000 / fps ); ...
1
vote
1answer
30 views

Three.js “THREE.EffectComposer relies on THREE.ShaderPass” issue

Hi I'm a big newbie to three.js and I'm trying to use the effect composer function so that I can achieve a bloom effect on my object using UnrealBloomPass.js. Unfortunately I've reached a couple ...
0
votes
0answers
23 views

Displacement map from normal map in JS/Threejs

I want to dynamically generate displacement map from a normal map to use it in three.js I want to write a text on a normal map. So when I looked on the web, I saw that I should have a displacement map,...
2
votes
1answer
39 views

How to change gltf material to cartoon material?

I'm not familiar with three.js and shader. I export a gltf dragon model with texture from C4d and load it into meshstandard material in three.js. I want to change them into cartoon material. With the ...
0
votes
0answers
17 views

Cannot read property 'position' of undefined of a camera in three Js [duplicate]

In this function console .log(this.camera.position); console .log(this.controls.target); this.position = new Three.Vector3().copy( this.camera.position ...
0
votes
0answers
43 views

WebGL ERROR: “too many uniforms” when adding volume boxes potree three.js

I'm using potree (WebGL three.js) to add a large number of volume boxes to the scene, but I get a "too many uniforms" error after adding about 230 boxes. I'm new to 3d programming, so ...
0
votes
1answer
18 views

Three.js Camera always undefined when setting up ray tracing

I have created a three.js element to show a number of points on the screen and I have been tasked with clicking on two and calculating the distance between them. I am doing this in a Angular (8) app ...

1
2 3 4 5
354