I have a scene with a mesh (MeshPhongMaterial), box helper around this mesh, green spherical point markers (MeshLambertMaterial) and sprites (png images of "pins" with transparent backgrounds). And I am running into this issue:
http://imgur.com/nDQ3VRk
http://imgur.com/53NJhpK
Both my green markers and box helper lines are visible through the transparent background of my "pin" sprite, but my main mesh material isn't. In fact in the second image above the green marker that is visible through the png background is inside of the bronze mesh object and would not be visible otherwise.
Here are my materials:
1) Main mesh material JSON:
'Bronze': {
emissive: '#000000',
color: "#cd7f32",
specular: 0x83776B,
shininess: 100,
reflectivity: 1,
shading: THREE.SmoothShading,
metal: true,
envMap: textureEquirec, // our own hdri reflection image
transparent:true,
depthTest: true
}
2) Material for the green marker:
THREE.MeshLambertMaterial({ color: 0x00ff00 })
3) Material for the box helper:
THREE.LineBasicMaterial({ color: 0xdddddd })
4) Material/texture for the Sprite:
var textures = {
...
selectedPin: 'images/sprites/selected.png'
};
this.selectedPinTexture = THREE.ImageUtils.loadTexture( textures.selectedPin);
this.selectedPinMaterial = new THREE.SpriteMaterial( { map: this.selectedPinTexture } );
Please advise,
Thank you,
Anton.
If your pin sprite is drawing before the mesh, and writing depth (depthWrite:true) then the mesh will not appear.
Set .renderOrder of the sprite to always draw after the mesh if you want it to be transparent the mesh to be visible through it.
Add an alphaTest to you material like 0.5. For an explanation look at http://threejs.org/docs/#Reference/Materials/Material
Related
https://codepen.io/dottodot/pen/XWVEqgj
var materials = [
new THREE.MeshPhysicalMaterial({ color: 0xff0000 }),
new THREE.MeshPhysicalMaterial({ color: 0xff0000, flatShading: true }),
new THREE.MeshPhongMaterial({
color: 0xffffff,
map: texture,
transparent: true,
}),
];
text = new THREE.Mesh(geometry, materials);
When using extruded TextGeometry is appears that you can only apply 2 materials, the first is the main colour and the second for the extruded sides. However I would like to apply an optional 3rd material to the main colour which is a transparent texture for a repeated pattern, but adding it to the materials array has no effect. Are there any other ways an additional material can be applied to the text.
I have a 3d surface which I would like to make it transparent so the map under it is visible.
The problem is that some face hidden are rendered not making the transparency constant (highlighted). Is possible to render the yellow/green of the right image transparent without these artefacts?
Folling #WestLangley comment I was able to fix the issue rendering twice:
once colorWrite = false and then colorWrite = true . The simplest way I found is with a MultiMaterialObject.
let material = new THREE.MeshPhongMaterial(
{ color: 0xffffff88,
side: THREE.DoubleSide,
opacity: 0.4,
transparent: true,
colorWrite : false,
vertexColors: THREE.VertexColors,
shininess: 60
} )
let material_cw = material.clone()
material_cw.colorWrite = true
let mesh = THREE.SceneUtils.createMultiMaterialObject(
geometry,[material,material_cw] )
When we add text-spites on scene, we saw that our transparent planes hide sprites, but didn't hide any 3d Objects.
Why is this and how to make sprites visible under transparent planes?
To look PNG example click here
My plane is:
// transparent plane
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
depthFunc: THREE.LessDepth,
});
But it seems no work good.
So, for that examle i wrote some code on fiddle, to figure out the problem:
look fidddle example
three.js renders opaque objects first, then transparent objects.
You can use this pattern to prevent your transparent objects from writing to the depth buffer:
// transparent plane
geometry = new THREE.PlaneBufferGeometry( 200, 200, 1, 1 );
material = new THREE.MeshBasicMaterial( {
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
depthWrite: false
} );
three.js r.112
So I have a simple particle system using THREE.Points and THREE.ParticleBasicMaterial as the material.
All the points are rendered as billboards using this .png image.
When rendered I expect each particle to be a glowing sphere (not exactly glowing, but definitely having that effect due to the radial gradient fading out into transparency). How to get the transparency to work? The result looks like this:
My material looks like this (note that I tried using different types of blending modes, but they just make things worse).
this.material = new THREE.ParticleBasicMaterial({
color: 'transparent',
size: 0.8,
map: this.spriteImage,
transparent: true,
sizeAttenuation: true
});
Add "depthWrite: false" to your material, like this:
this.material = new THREE.ParticleBasicMaterial({
color: 'transparent',
size: 0.8,
map: this.spriteImage,
transparent: true,
opacity: 0.5, // should be less than 1.0
sizeAttenuation: true,
depthWrite: false
});
I have a plane with a MeshBasicMaterial and a cubecamera. I assign the cubecamera.renderTarget as an envmap to my material and a png image as a texture for my material. The png image is pransparent execept the center of it. What I would like to accomplish is to have the reflection - cubecamera envmap be visible only where the png is transparent.
Is this possible? and if so please guide me through because I'm new with three.js.
Currently my material looks like this:
productMaterial = new THREE.MeshBasicMaterial( {
map: productModelTexture,
envMap: that.cubeCamera.renderTarget,
combine: THREE.MixOperation,
reflectivity: 0.25,
color: that.models.settings.color,
specular: that.models.settings.specular,
side: THREE.FrontSide,
transparent: true,
fog: false
} );
Instead of having a transparent PNG, you should export your transparency alpha to its own image map, and use the alphaMap property of materials to set your transparency.
http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial