I use threejs to add a pointCloud to the screen , and set texture map, But I find that the top point can cover the one behind it.
after I add AdditiveBlending , It's much better, but still have some problem.
Because I have another objects so I can't add depthTest:false , how can I solve this problem?
below is the code and the texture
var geometryBig = new THREE.Geometry();
var meshBig = new THREE.PointCloud(geometryBig, new THREE.PointCloudMaterial({
size: 4,
color: 0xFFFFFF,
transparent: true,
blending: THREE.AdditiveBlending,
// depthTest: false,
transparent: true,
sizeAttenuation: true,
map: THREE.ImageUtils.loadTexture(
"img/particle.png"
),
}));
Add to your PointCloudMaterial:
depthWrite: false
Related
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] )
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
})
I have THREE.Points with Material:
var material = new THREE.PointsMaterial( { sizeAttenuation: false, visible: true, size: 128, color: 0xffffff, depthTest: false, depthWrite: false, opacity: 0.5, blending: THREE.AdditiveBlending, transparent: true, map: texture } );
This material works fine.
When I put another THREE.Points with the similar material, this material starts to be invisible, when I have both in camera view.
When I rotate the camera to position, where is visible only one THREE.Points, material starts to be visible again.
When is loaded and present in the camera view field some another object, or mesh, pointClouds(Points in r73) are invisible again ...
Problem starts with update to r73.
EDIT: IT HAPENS WHEN PLANET OBJECT IS VISIBLE set visible false, and all works great...
EDIT2 it happens only on some GPU, on INTEL HD4000/DELL NTB, error not occuring on ATI Mobility Radeon
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
I try to load a imageData to create texture in threeJS.
I try like this, but it does not work.
pMaterial =
new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.DataTexture(
myimageData
),
blending: THREE.AdditiveBlending,
transparent: true
});
Thanks for your help.
It works with the following code.
var texture = new THREE.Texture(myImageData);
texture.needsUpdate = true;
particles = new THREE.Geometry(),
pMaterial =
new THREE.ParticleBasicMaterial({
size: 20,
map: texture,
blending: THREE.AdditiveBlending,
transparent: true
});