I’m using threejs to render some models (gltf/glb). All of them are of different sizes, some are big and some are small. Now I want scale all of them to the same size. if i use mesh.scale() that would scale the object relative to it’s own size. Is there any way to achieve this without manually calculating each model’s scale?
Tag: three.js
Why are all particles positioned in the center on x axis in THREE.JS
I’m new to THREE.JS and I’m trying to figure out how to make particle system and I can’t get it to work properly. As title says all of the particles are positioned in the center on X axis, it seems that Y and Z are ok. Picture of the result: https://i.stack.imgur.com/xUuAn.png What I want to achieve: https://i.stack.imgur.com/vA0tL.jpg Code: Answer The
How to access a variable outside a subfunction in javascript
I have the following function that uses a GLTF loader to load a model into the scene (imported from another class): And I call that function from another class like this, wanting to push to the players array (meant to keep the players meshes) the gltf.scene mesh returned from the CreateMesh function. My problem is that I cannot access that
three.js over cdn using svelte or react
Is there any way of building my svelte or react application in a way, that the three.js module (which I usually import using npm) will be declared as a script tag which will call the module from a CDN? I would like to keep the advantages of a framework but also be able to reduce my final bundle size, since
WebGL – Black Canvas and console errors with Three.JS and Blazor
I’ve created a blazor web assembly project and am trying to use the JSInterop to use Three.JS to draw a line, following their tutorial’s located Here. I’ve installed Three.JS using npm and webpack with a prebuild event in my csproj file. The issue is that the canvas renders as black, with nothing else, while the console shows several errors. Any
three.js Highlighting the edge of a cube on hover LineSegmentsGeometry
I am using LineSegmentsGeometry and LineMaterial to create thick cube edges. I want to change the color of the edge on hover. This code only works if using thin lines with LineBasicMaterial. Can I do it somehow with bold lines? I also have other shapes with this logic sandbox here https://codesandbox Answer You can do it with fat lines! LineSegmentsGeometry
Three.js Zoom-to-Fit with offset
I’m trying to come up with a zoom-to-fit function that ensures that a list of points are perfectly fit into the drawing area, while also adding configurable offsets on all sides of the image. I.e. zoom-to-fit an area of the frame rather than the whole viewer area: (note that the offsets in this image are not accurate) I’m using a
Three.js webglrenderer.render issue
I’m developing a site with three.js and Nuxt.js. When i try to use the EffectComposer, the console give me a lot of warnings like this: three.webglrenderer.render(): the rendertarget argument has been removed. use .setrendertarget() instead. In my case, I understand that it’s an issue with the newest versions of three.js, because if I use an earlier version of three.js(101) it’s
Import camera from gltf
How to do I use camera from gltf in three-js? I am using the gltf loader as show in this example Answer As mentioned in the documentation, you extract the camera from the gltf.cameras array. It’s an array since it’s possible to export multiple cameras to glTF. You normally want to assign the camera to a variable which is declared
Setting the position of a text geometry?
I have looked through stack overflow and google and I have found how to CENTER a text geometry but that is not what I want to do. I have a scene that just has a block of text that says “Buy Here!”. Using the documentation in the three.js website and examples here I was able to do that after some