I’m trying to load an .stl file into three.js. Everything works fine and I get the model as BufferGeometry using this code: To make it easier to further manipulate the model I would like to have the geometry as regular THREE.Geometry instead of THREE.BufferGeometry. Is it possible to either load the .stl in a way so I receive it as
Tag: three.js
Render objects on top using renderDepth with Three.js
I’m trying to render objects on top of other objects. In the fiddle, get the green torus knots to render on top of the red boxes and floor. I’ve been trying mesh.renderDepth = 0, 1, 1000 and changes nothing. The material has been created like so: How can I achieve this using renderDepth? Am I missing any other setting? Using
How to add markers as sprite bitmap Panorama viewer in three.js
We have developed a panorama viewer in three.js. A texture bitmap is added to Sphere and camera position is moved inside. We want to add markers into this as sprites. When we add the sprite to the scene it is not getting rendered. Why doesn’t the sprite get rendered? Answer Here is the solution:
How to Set WebGLRender background to transparent
I’m trying to put objects in front of CSS3DObjects with the THREE.NoBlending hack. But I only see the black plane without the CSS3DObject in the newest revisions (tried r65 and r66). A small example I made looks like this: index.html: moo.html: This is the result: Revision 58: http://i.imgur.com/tCszJ8X.jpg Revision 66: http://i.imgur.com/kfppVwF.jpg I’ve tried to understand why, it’s probably something very
Transparent background with three.js
The code work, but I’m having a problem setting transparent background to the canvas with three.js. I use: But then the background gets black. How do I change it to be transparent? The code: Answer If you want a transparent background in three.js, you need pass in the alpha parameter to the WebGLRenderer constructor. You can leave the clear color
Three.js – Rotating a sphere around a certain axis
I have a problem. In Three.js, I want to rotate a sphere (Earth) around axis tilted by 23.5 degs. I found sphere.rotation.x, sphere.rotation.y and sphere.rotation.z, but when I combine them in the correct ratio, the sphere’s rotation is quite weird – it has no permanent rotation axis. I think I need a function like sphere.rotation.vector(1,0,-1). Does anyone know how this
Three.js Using 2D texturesprite for animation (planeGeometry)
I’m quite new in html5 and three.js. I’ve been experimenting a bit with it, and basically what I want done is to have a Mesh (I’m using planeGeometry, as the tutorial I followed used it). The Mesh shows different Textures, which can change later on. Here’s what my code looks like: The problem is that whenever I offset, the Mesh
THREE.js Ray Intersect fails by adding div
My Three.js script runs fine when there is only one target div on the page (which holds renderer.domElement). As soon as I add another div with fixed height and width above the target div, ray.intersectObjects returns null. I doubt that the vector that I am creating for ray is causing the problem. Here is the code. Any ideas on how
Three.js WebGL texture shows up black on plane
So basically, I have a scene in WebGL with 2 planes. One of them has a transparent texture on it and it shows up fine. The other is supposed to have a high res, non-transparent texture loaded up on it and it is used as a background. I can’t figure out why the background plane isn’t working, since I directly
three.js transparent maps issue
I’m creating loads of particles (80.000 to be exact) and I have set a transparent map, though, not all particles are transparent. I’m using a transparent PNG image: (it’s barely visible but it’s there alright) as the material map, though it shows a black background as seen here: If you look closely, some particles blend together well (no overlapping black