I’ve got a gltf file. When I import it inside the Three.js editor (https://threejs.org/editor/) I get a correct result when I add an environment map. On the other hand, when I import my gltf in my project scene I’ve a different result. Even when I use the very same HDRI image. The metalness is way too shinny in this case.
Tag: three.js
How to control .glb model animations in A-FRAME via Three.js
I’m trying to play a glb animation in A-FRAME with Three.js, now it works just for a second and then it stop, could someone help me please? this is my code: Answer Wait until the model is loaded with: update the animation in the renderloop – on each tick. You could use an interval or something else, but aframe has
OrbitControls on a shared camera cannot handle panning
I am trying to create two renderers on two different div containers. Each renderer wish has its own OrbitControls for updating the associated camera. The camera is shared between the two renderers. The goal is to sync the camera for OrbitControl (so that two containers can have the same camera view) and render between the two render loops. I noticed
my three.js scene is not rendering. not sure why
my main.js file contains :- and my index.html :- All that appears on my screen is :- [what displays on my browser][1] [1]: https://i.stack.imgur.com/PQmJu.png I checked and my main.js file is definitely executing, but nothing is rendering on the screen Answer You have a few issues. This would select elements with the class canvas, but your DOM has no such
only one particle showing in the scene with three.js
I am trying to create a sphere with particles randomly floating on its surface. It will move depends on the position on mousemove. something like this Strangely, it is only displaying one particle on canvas. I am debugging with console.log(vertices), but it clearly shows all the vertices in the array. My code in CodeSandBox Answer The problem is with your
Three.js extrude vertically
I am new to three.js and I want to extrude a shape vertically. I can set the points of the 2D shape, but when I extrude it, the extrusion happens along the z axis. I want to extrude the shape along the y axis, how can I make this happen in the simplest way?(In this example I know could use
Javscript – Three.js Disable panning on mobile devices?
So I’m making a 3d project with three.js. Everything works as expected on my laptop. I’m using OrbitControls to allow camera movement, but i have disabled right click panning, because I want the camera just to rotate. When switching to a mobile device (iphone), using two fingers I’m able to move the camera (not rotate). Is there a way to
How to make emissiveMap lighting only in dark areas in three.js?
With three.js, I render earth with textures. I also add an emissive texture to add the city light. But I have an issue, even the light areas of earth emit the cities light. Exemple: It is possible to render the emissive texture lighting only in dark areas? I don’t find any ways. My texture is set like this: Answer I’ve
Three.js basics – Can’t find variable – GLTFLoader animation
I’ve got very basic knowledge of JS. Following three.js docs Loading 3D models I have succesfully rendered 3D object and centered it: I would like to animate it now, begining with simple rotation: But the problem is console returns: Answer You have declared model variable inside the functional scope, try to declare it outside Hopefully, this will work! Edited as
Make HTML Content Clickable Over Three.js Content
I am making an animation with moving objects in Three.js. In this animation, I create a text bubble when an object is clicked, and it has an “X” button to close it. However, if the x button overlays a 3D Object from Three.js, then the button is ignored entirely and the 3D Object gets clicked instead. How can I avoid