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
Related
Attempting to use an alpha map to reveal reveal an underlying model according to the alpha maps. Currently the alpha map overrides the model texture and shows as all white.
I've tried loading the alpha map alone and applying it to a material which then gets attached to the object --> Shows the relevant alpha map as white, does not reveal the underlying model as expected
I've tried loading up the alpha map and also the texture into a MeshBasicMaterial --> Shows the full texture with none of it transparent
let material = new THREE.MeshBasicMaterial({
// map: iceTexture,
color: '0xffffff',
transparent : false,
side: THREE.DoubleSide,
alphaTest: 0.5,
alphaMap: this.alphaMaps[0]
});
The current result is that the alpha map shows as all white --> Current Output
This is the underlying texture I expect to be showing (just where the alpha map allows it to) --> Underlying Texture
NOTE: I am currently not using any shaders, the underlying model is a simple glb with the ice texture above applied
NOTE 2: In this answer It says to add in a second object behind the first object...that does not work, it just shows the object on top with no transparency applied
I think the line that's messing you up is transparent: false, when it should be transparent: true. I just tried the code below (click here for a live CodePen demo), and the transparency works as expected. I also don't think you need alphaTest: 0.5, since it seems you have an animation sequence that moves the gradient.
In the demo, I use this image as the alphaMap:
... and this image as the regular map:
The essence of the code is below:
// Load the textures
const texLoader = new THREE.TextureLoader();
var alphaTexture = texLoader.load("https://i.imgur.com/aH0jI5N.png");
var mapTexture = texLoader.load("https://i.imgur.com/qdWJkbc.jpg");
// Create geometry
var geometry = new THREE.PlaneBufferGeometry(10, 10, 10, 10);
// Create a basic material
var material = new THREE.MeshBasicMaterial({
map: mapTexture,
alphaMap: alphaTexture,
transparent: true
});
var plane = new THREE.Mesh( geometry, material );
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 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
I want to use a map/texture which isn't affected by lighting/shading. Which Three.js shader should I choose? In other 3D programs, you would probably use a map on the ambient color.
You need to use MeshBasicMaterial. It is not affected by lights.
material = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture } );