I'm facing a issue to render cubes using CanvasRenderer, depends the camera position any cubes lost same parts and show a part of face other cube, as the below images:
In this example, there are two cubes, when the camera in front there aren't problem:
But, when I change de camera:
To render I use a array of materials, this is one of:
new THREE.MeshLambertMaterial({ color: 0x006600, ambient: 0xffff00, side: THREE.DoubleSide, overdraw: 0.5 }),
What you are seeing is an artifact of CanvasRenderer. The best you can do is tessellate your geometry. For example,
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
Or better yet, switch to WebGLRenderer.
three.js r.70
Related
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
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
In my scene I'm using an orthographic camera and a WebGLRenderer (new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true })). Two spheres are created by this code:
new THREE.Mesh(
new THREE.SphereGeometry(1, 64, 64),
new THREE.MeshLambertMaterial({ color: 0xffffff })
)
I shifted them away from each other with another code snippet, and for some reason they shine through each other, as marked in the picture even though they have the same size and the same location except from one axis.
Does anyone know why this is the case and how I can fix it?
Your orthogarphic camera parameters are in the wrong order. Do this:
camera = new THREE.OrthographicCamera( -5, 5, 5, -5, 1, 11 );
camea.position.set( 0, 0, 6 );
Also, your near parameter should be positive, as it is a distance in front of the camera.
The camera is looking down the negative z-axis. In your case, do not rotate it.
three.js r.68
I wanted to rotate a plane, but I can't figure out how to set the rotation axis. I'd like to rotate a plane around its edge.
I've seen solutions suggesting matrix transformations but they lacked explanation so I couldn't apply them.
Ok I figured it out. What you have to do is create a parent 3D object and add the plane to it. Once, added, you have to translate it by 50% and start rotating the parent object.
var object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 200, 50, 4, 4 ), [material] );
var parent = new THREE.Object3D();
object.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 25, 0 ) );
parent.add(object);
parent.rotation.x = 1;
scene.add(parent)