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.
Related
I was using CanvasRenderer in my scenes to render a brain with neurons.
The problem is that when I draw the neurons (every neuron consists of many many lines) the scene is really slow because I render a lot of neurons. So I switched into WebGLRenderer and it is much faster and smoother, but the scene looked completely different! No opacity is applied any more which made the neurons hidden inside the brain
Here is a comparison between the two scenes:
CanvasRenderer:
The brain has some transparency, and there is a green sphere represents a region of interest (ROI) also has transparency.
WebGLRenderer:
The transparency has completely gone!
I am using the following materials for the brain model and the ROI model:
var brain_material = new THREE.MeshPhongMaterial({
wireframe: false,
color: 0xaaaaaa,
specular: 0xcccccc,
opacity: 0.4
});
var roi_material = new THREE.MeshBasicMaterial({
color: selected_roi_color,
opacity: 0.2,
visible: true
})
and here is my renderer:
renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setClearColor(renderer_clear_color);
renderer.setPixelRatio(viewport_width / viewport_height);
renderer.setSize(viewport_width, viewport_height);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
How can I get a similar result to the CanvasRenderer using the WebGLRenderer?
Thank you very much
If you use opacity, then you have to use it with transparent:
var brain_material = new THREE.MeshPhongMaterial({
wireframe: false,
color: 0xaaaaaa,
specular: 0xcccccc,
transparent: true, // here
opacity: 0.4
});
var roi_material = new THREE.MeshBasicMaterial({
color: selected_roi_color,
transparent: true, // here
opacity: 0.2,
visible: true
})
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
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 create a wheel from cylinder (because importing 3D models makes it slower). But I cannot use multiple materials with cylinder geometry. It uses only the first material in an array.
var geometry = new THREE.CylinderGeometry(this.diameterWheel/2,this.diameterWheel/2,this.lastikGenisligi, 20, 4);
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { color: 0x000000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '../textures/wheel.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { color: 0x0000FF }));
materialArray.push(new THREE.MeshBasicMaterial( { color: 0xFF0000 }));
var material = new THREE.MeshFaceMaterial(materialArray);
var mesh = new THREE.Mesh(geometry, material);
What I want to create is a wheel which will have wheel.png wheel image on upper and bottom sides and black coverage on between them.
You need to loop through each face on the cylinder and tell which of the array materials the face uses.
geometry.faces[a].materialIndex = b;
Where a is the face index. You need to figure out yourself which face is which to choose the correct material through some system, ie. faces 0-10 with one color, etc. This depends on the cylindergeometry parameters. And b is the material index.
I've the custom geometry with sqaure-base and it looks like a cone. here is jsfiddle link: http://jsfiddle.net/suvKg/18/
I've obtained transparency to the whole object at here:
var meshMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0.6, depthWrite: false, depthTest: false, vertexColors: THREE.VertexColors } );
But I don't want transparency to be applied to base of the cone, but only side faces should have it. How to do that?
you need to use THREE.MeshFaceMaterial() for your entire mesh. For example if your geometry have X faces and 2 differents materials :
var materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0.6, depthWrite: false, depthTest: false, vertexColors: THREE.VertexColors } ),
new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1, depthWrite: false, depthTest: false, vertexColors: THREE.VertexColors } )
]; // the two materials
var mesh = new THREE.Mesh(yourGeometry, new THREE.MeshFaceMaterial(materials)); //tell three.js that you will have several materials in your geometry
Then, you will need to determine materialIndex manualy in each of your faces based on the materials indexes
yourGeometry.faces[0].materialIndex = 0;
yourGeometry.faces[1].materialIndex = 0;
yourGeometry.faces[2].materialIndex = 1; // <= the cone base
...
yourGeometry.faces[lastFaceIndex].materialIndex = 0;
NB: default parameter for materialIndex is 0 so you will need to determine only one face to its material index in your case