I've managed to set the colour of a mesh face using:
geometry.faces[i].color.setHex('0xff00ff');
Is there a function to set the transparency to true and opacity to say 0.5?
I'm sure there is one, just have no idea of the syntax.
Actually, you cannot achieve that by changing your geometry. Because transparency controlled by materials.
But there's way to do this.
First, each face has materialIndex (Face manual).
Next, Each mesh, drawn within three.js scene has material. And there's special material of type THREE.MeshFaceMaterial (MeshFaceMaterial manual), which takes array of materials as argument.
When faces are drawn, three.js renderer takes face's materialIndex and uses corresponding material from this material array or, if mesh contains single material type.
So you could do something like:
var opacMaterial = new THREE.MeshLambertMaterial({
transparent:true,
opacity:0.7
});
var solidMaterial = new THREE.MeshLambertMaterial({
transparent:false,
color:new THREE.Color(1,0,0)
});
var mesh = new THREE.Mesh(
geometry,
new THREE.MultiMaterial([solidMaterial, opacMaterial])
);
By default, if your geometry have materialIndex == 0 for each faces, you will see solidMaterial drawn.
If you want to make it transparent do something like this;
geometry.faces[i].materialIndex = 1;
Don't forget to update geometry in mesh: (How to update geometry in mesh question.)
Also, aware, if you have materialIndex in your faces greater than length of material array, you will get awkward error inside of deep of THREE.js
Related
I'm trying to add lights to a scene where there is a Mesh created by BufferGeometry. The mesh.drawMode is THREE.TriangleStripDrawMode. I don't know why light is not applying to the mesh.
There is an example bellow:
https://jsbin.com/jofasabeji/edit?js,output
Is there a flag to be activated (like face culling)?
Thanks!
Your geometry is missing vertex normals.
You can specify the normals yourself, or -- if you find the result acceptable -- you can call:
geometry.computeVertexNormals();
Alternatively, you can avoid setting vertex normals if you set the material property to flat-shading (and your material supports it):
material.shading = THREE.FlatShading;
Also, you need to set a reasonable intensity for your light:
var light = new THREE.PointLight( 0xffffff, 1 );
three.js r.85
When I add an EdgesHelper of a cube to the scene, then rotate the cube, the EdgesHelper follows the rotation.
But if I add EdgesHelper as child of cube, it rotates at double speed.
https://jsfiddle.net/aj3cv4tx/4/ +49
var cube = new THREE.Mesh( geometry, mesh );
var egh = new THREE.EdgesHelper( cube, 0x00ffff );
cube.add(egh); // causes different ratation speed
//scene.add(egh); // this one is ok
How can I fix its rotation speed?
What you are seeing is a consequence of how EdgesHelper (and some of the other helpers) have been implemented.
If you want to use EdgesHelper, you have to adhere to two rules:
EdgesHelper must be added to the scene, directly.
The scene can't have a transform applied (for example, be rotated).
three.js r.74
I'm creating a 3d world map in three.js and for better quality and precision I'd like to load the texture by tiles dependent on current zoom level.
I'd like to achieve something similar as this but in three.js.
Currently I have one big texture, see fiddle.
var mesh = THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('https://raw.githubusercontent.com/turban/webgl-earth/master/images/2_no_clouds_4k.jpg'),
bumpScale: 0.005,
specular: new THREE.Color('grey')
})
);
But I'd like to request the texture in tiles from here.
Are there any similar solutions done in three.js or does anyone know how can I stitch the texture from tiles.
I'm using EdgesHelper on a simple model that I exported from SketchUp. It is showing some diagonal lines like this:
How do I prevent those lines from appearing, so that the edges looks like what it appears in SketchUp? I tried setting the thresholdAngle but it doesn't help.
Update:
Working demo: http://jsfiddle.net/alan0xd7/6vLm5xsa/
This is the look I am trying to achieve:
You are rendering both the model and the edges helper in a scene without lights. Remove the model and you can see the helper clearly. All edges are rendered properly.
The reason for the extra edges is because you have two edges concurrent in your model -- a short edge and a long edge. You need to change your geometry. This is not a problem with three.js
If you want to show the edges, but have hidden edges truly hidden, you need to make use of the webgl feature polygonOffset. You can use a pattern similar to the following:
var mesh = dae.children[0].children[0];
mesh.scale.set( 20, 20, 20 );
// replace the material
mesh.material = new THREE.MeshBasicMaterial( {
color: 0x000000,
polygonOffset: true,
polygonOffsetFactor: 1, // positive value pushes polygon further away
polygonOffsetUnits: 1
} );
scene.add( mesh )
var helper = new THREE.EdgesHelper( mesh, 0xffffff );
helper.material.linewidth = 2;
scene.add( helper );
updated fiddle: http://jsfiddle.net/6vLm5xsa/15/
three.js r.71
I'm creating text labels that appear on a 3D cube using the following pattern:
canvas = createTextCanvas(text, color, font, size);
texture = new THREE.Texture(canvas);
geom = new THREE.PlaneBufferGeometry(canvas.width, canvas.height, segW, segH);
material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
mesh = new THREE.Mesh(geom, material);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
texture.needsUpdate = true;
The labels and their positions get set within a for loop for each edge of the cube. This results in labels appearing similar to this:
But then when I rotate the cube (using OrbitControls), you'll see that the label no longer appears vertically like above:
So using the Cost label as an example, I would want the text to remain vertically oriented whenever the cube is rotated. Basically, I'm trying to mimic the behavior of axis labeling in VTK.
So I believe the solution here is to set the up vector of the label to a vector that's always orthogonal to the plane. But I'm not sure how to implement this. Any suggestions or examples would be greatly appreciated.
If it helps, I'm constructing the cube using a BoxGeometry and MeshNormalMaterial.
Do you mean the label keeps moving with the cube or not?
If not, there is a example: http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html. The label keeps facing to you but may not vertical.
Else ,you may need a canvas texture,the label is a object just like the cube and you can set its position to keep it vertical.But it doesn't look good sometime.the example:http://stemkoski.github.io/Three.js/Texture-From-Canvas.html.
I think you just want the label always facing to you when you change your sight.