Question: Is it possible to flip/mirror a Three.js sprites texture?
Background: Using the current DEV branch of three.js
Findings so far: I first try'd to change it's 3d rotation without any effect. Then I inspected the sprites code and saw that the rotation is reseted in this line in Sprite.js:
this.rotation3d.set( 0, 0, this.rotation );
Changing the values there didn't had any effect. Digging deeper I ended up in the SpriteRenderer plugin where I got completely lost.
My understanding is that three.js is using shaders to render sprites and that this is a huge performance plus. So writing my own sprite implementation using simple faces feels like the wrong direction.
Okey, this is a long shot, but try setting your sprite's scale to -1 (in the directions you want to flip it).
Just posting it as an alternative:
texture = new three60.THREE.Texture(video);
texture.repeat.set(-1, 1);
texture.offset.set( 1, 0);
the easiest way to flip a texture is actually to flip the texture image before uploading to the GPU.
Related
I'm trying to get a sprite sheet texture in THREE.PointsMaterial to use offsets, so point particles can have different visuals.
Apparently this should be possible using THREE.ShaderMaterial, instead of PointsMaterial.
This answer seems to get so close to my solution, but the fiddle is broken and I'm having a hard time reconstructing it.
Shaders are new to me and I could use some help achieving the goal: get point particles to use different sections of a sprite sheet.
With a single image texture it's easy, like this, but trying to use a sprite sheet with offsets is killing me ;)
Transparency artefact problem
Hello,
I have an issue with three.js. I import a "big" glb model on my scene which is not transparent, but if the model is covered by itself on the camera view, the foreground become transparent. (as you can see on the picture, the background montain is on foreground)
I tried some solutions like :
depthTest to false on glb material
sortOrder to false
Use logarithmicDepthBuffer
Change material transparent to false
Change alphaTest from 0 to 1 by 0.1 steps
But nothing works. If someone have the solution :)
Thank you !
Rendering of transparent objects cannot be done quite properly. You first need to render any non-transparent objects, and then render transparent surfaces from back to front, so that any new ones blend on top of what was behind it. There are a number of cases where this cannot be done, especially when rendering transparent objects that may overlap themselves.
Fixing this would involve cutting the problematic objects (even single triangles) into smaller pieces so that the ordering can be preserved, and that is often nearly impossible. Since you are working with Three.js, see if you could alter your design so that this isn't a problem, or that the artifacts of incorrect rendering order aren't too much noticeable.
Thanks to donmccurdy which have find my solution on the three.js forum.
Finally my glb file was Transparent :( So there is two solutions.
Solution 1:
Find how the model is transparent and fix it.
Solution 2:
Changing it back to opaque, and restoring the default depthWrite value.
mesh = content.getObjectByName('mesh_0');
mesh.material.transparent = false;
mesh.material.depthWrite = true;
I use an equirectangular EXR image to light my scenes. To achieve this, I re-used the code found in this threejs example. This works as expected.
Now, I want users to be able to rotate this map around the vertical axis in real time.
After looking at the code of the loader EquirectangularToCubeGenerator.js, I figured out that I could rotate the boxMesh around the Y-axis using this simple code:
var radRotation = Math.PI;
this.boxMesh.rotateY(radRotation);
That works OK for a set angle however it doesn't work for angles changing in real time. It is too slow as it reloads the texture and goes through the generation process for every new value.
Is there a simple and fast way to change the rotation for an environment map already generated?
Thank you for your help.
I have created a simple human figure. The eyelashes use a texture with transparency.
However as soon as I turn on transparency for the face texture there is created transparency where it shouldn't be.
You can look through the face texture in the part that lies below the eye lashes.
See the effect by toggling face transparency with this line:
mesh.material.materials[3].transparent = false
mesh.material.materials[3].transparent = true
I wish to have transparency turned on for the face texture, so how can I solve this problem?
Demo:
http://dev.udart.dk/transparencyProblemStackOverflow/
(wait for model to load)
Code:
https://github.com/vibber/transparencyProblemStackOverflow/blob/gh-pages/index.html
Transparent geometry gets manually depth-sorted, for more information see this canonical answer by Toji: Transparent textures behaviour in WebGL.
If you want this scenario to work properly, you'll have to split up your model, and render the eyelashes as a separate (sub)mesh. This way three.js can render the rest of the face using the normal z-buffer approach, then apply the eyelashes separately (from the depth-sorted transaprent objects queue).
Is it possible in three.js to create transparent/invisible plane, which can receive shadows? My aim is to draw some object on 3d canvas without background (so I can see webpage behind the canvas element). I want the object to cast shadows on the background and I thought, if I could make an invisble plane, then webpage background is still visible. Shadows are casted on the plane and it seems like shadows are on the webpage.
Right now I can make a white plane with opacity 0.5 (or similar), but this way the plane is visible. Ideally the plane should be completely invisble (except for shadows).
EDIT: I created an exampled (based on this): http://jsfiddle.net/s5YGu/2/
Here I have opacity 0.5, but you can see the plane. If I set opacity to 0, then the whole plane and the shadows disappear.
I made this work by hacking on basic shader, here is working shader code http://pastie.org/5088640
It has no drawbacks AFAIK, like opacity: 0.1
Yes, you can achieve the effect you want, and it looks pretty good on my machine at least. :-)
Here is a fiddle: http://jsfiddle.net/ZXdV3/25/
There are a couple of issues. First, you will have to set alpha: true in the renderer constructor args.
Second, although I assume you'd like the plane to be completely transparent, you'll have to settle for material.opacity = 0.1, or so.
Third, if you are placing a canvas over the webpage, and you want the web page to be interactive, you are going to have to suppress pointer events in the canvas (I'm not sure if IE supports this, though): container.style.pointerEvents = 'none';
three.js r.67