In a three.js scene, I would like to have an object that's not visible, but still occludes other objects in the scene as if it was visible.
Is this possible with the three.js library? Here is an example:
Suppose I have a three.js scene that contains 3 objects: object a, object b and object c and a camera. I would like object c to be invisible to the camera, but still occlude object b... Scenario 1:
In scenario 1, here is what I would like the camera to see:
Scenario 2:
In scenario 2, here is what I would like the camera to see:
Can anyone tell suggest a technique use to achieve such an effect?
Yes, in three.js you can create an object that is invisible, but still occludes other objects as if it were visible.
To do that, you need to use two features available in three.js: Object3D.renderOrder and Material.colorWrite.
You need to make sure the invisible object is rendered prior to the object(s) it must occlude.
You control the rendering order with the renderOrder property.
You make the occluding object invisible by setting its material's colorWrite property to false.
// material
var material = new THREE.MeshPhongMaterial();
// mesh a
var geometry = new THREE.PlaneGeometry( 10, 10, 4, 4 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0xff0000 );
mesh.renderOrder = 0; // <===================
mesh.position.z = - 10;
scene.add( mesh );
// mesh b
var geometry = new THREE.BoxGeometry( 2, 2, 2 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x606060 );
mesh.renderOrder = 3;
mesh.position.z = 0;
scene.add( mesh );
// mesh c
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x0000ff );
mesh.material.colorWrite = false; // <=================
mesh.renderOrder = 2;
mesh.position.z = 10;
scene.add( mesh );
three.js r.143
Related
I wonder if a textured geometry can take lighting in three.js. In my scene, all materials get great lighting with spotLight and directionalLight except for materials with texture assignment like this:
var geometry = new THREE.OctahedronGeometry(1, 0)
var orange = new THREE.TextureLoader().load( 'img/orange.jpg' );
orange.wrapS = THREE.RepeatWrapping;
orange.wrapT = THREE.RepeatWrapping;
orange.repeat.set( 4, 2);
var material = new THREE.MeshBasicMaterial({
map:orange, side:THREE.DoubleSide
});
var oct0 = new THREE.Mesh( geometry, material );
oct0.castShadow = true; //default is false
oct0.receiveShadow = false; //default
scene.add( oct0 );
oct0.position.x = 0;
oct0.position.y = 5;
oct0.position.z = 0;
I am using Chrome. Safari and three.js r89. Thanks for any advice!
MeshBasicMaterial does not respond to lights.
There are other built-in materials that do. For example, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial.
three.js r.89
I would to apply a transparent material on front-side faces of a geometry. It's quite easy:
var normal = new THREE.MeshNormalMaterial();
normal.side = THREE.BackSide;
var materials = [
normal,
new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
];
for( var i = 0; i < geometry.faces.length; i++ ) {
geometry.faces[ i ].materialIndex = 0;
}
//a 'hole' to look inside
geometry.faces[ 0 ].materialIndex = 1;
geometry.faces[ 1 ].materialIndex = 1;
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
Codepen to example above: http://codepen.io/pyort/pen/egqbLY
But there is a catch: when looking on a front-side of a face, I would like to show what's underneath this geometry, not back-side.
I'm not sure how to explain that in easy language, here is visual explanation
What is my goal is this kind of 'portal' thing, so when you look from one side, it appears to have depth, but from other angles it's look super thin. How to achieve such an effect? Use some kind of shader? Use mirror techniques?
Thanks.
Try something like this:
// the inside of the hole
let geometry1 = new THREE.CubeGeometry(2,2,2);
let material1 = new THREE.MeshLambertMaterial({
transparent : true,
color: 0xff0000,
side: THREE.BackSide
});
mesh1 = new THREE.Mesh( geometry1, material1 );
scene.add( mesh1 );
// the invisibility cloak (box with a hole)
let geometry0 = new THREE.BoxGeometry(2,2,2);
geometry0.faces.splice(4, 2); // make hole by removing top two triangles
let material0 = new THREE.MeshBasicMaterial({
colorWrite: false
});
let mesh0 = new THREE.Mesh( geometry0, material0 );
mesh0.scale.set(1,1,1).multiplyScalar(1.01); // slightly larger than inside cube
scene.add(mesh0);
Live examples are at https://stemkoski.github.io/AR-Examples/
I am learning OOP while using Three.js. I know, a hard way to do it. So i created a box in the scene. Now i want to change color of one face of that cube.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);
var geo = new THREE.BoxGeometry(5,2,5);
var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, side:THREE.DoubleSide});
var mesh = new THREE.Mesh( geo, mat);
scene.add(mesh);
//Right there i want to chance color of the face. Its not working
mesh.geometry.faces[5].color.setHex( 0xffffff );
var edge = new THREE.WireframeHelper( mesh, 0x00ff00 );
scene.add(edge);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);
EDIT: the reason it did not work for me was the color i used 0xffffff. This program will work unless color is 0xffffff.
In your case, if you want to change the color of one face of the cube, you will need to specify vertexColors in your material.
var geo = new THREE.BoxGeometry( 5, 2, 5 );
var mat = new THREE.MeshBasicMaterial( { color:0xff0ff0, vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geo, mat );
mesh.geometry.faces[ 5 ].color.setHex( 0x00ffff );
The rendered face color will be the specified face color tinted by the material color.
If you change a face color after the mesh has been rendered at least once, you will have to set:
mesh.geometry.colorsNeedUpdate = true;
three.js r.80
I have a loop where I create a multiple Mesh with different geometry, because each mesh has one texture:
var geoCube = new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize);
var geometry = new THREE.Geometry();
for( var i = 0; i < voxels.length; i++ ){
var voxel = voxels[i];
var object;
color = voxel.color;
texture = almacen.textPlaneTexture(voxel.texto,color,voxelSize);
//Return the texture with a color and a text for each face of the geometry
material = new THREE.MeshBasicMaterial({ map: texture });
object = new THREE.Mesh(geoCube, material);
THREE.GeometryUtils.merge( geometry, object );
}
//Add geometry merged at scene
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();
mesh.geometry.computeTangents();
scene.add( mesh );
But now I have this error in the javascript code Three.js
Uncaught TypeError: Cannot read property 'map' of undefined
In the function:
function bufferGuessUVType ( material ) {
}
Update:
Finally I have removed the merged solution and I can use an unique geometry for the all voxels. Altough I think that If I use merge meshes the app would have a better performance.
For r53+ the code should be something like this:
var geoCube = new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize);
var geometry = new THREE.Geometry();
var materials = [];
for( var i = 0; i < voxels.length; i++ ){
for ( var j = 0; j < geoCube.faces.length; j ++ ) {
geoCube.faces[ j ].materialIndex = i;
}
var object = new THREE.Mesh( geoCube );
// here I assume you'll me positioning the object.
THREE.GeometryUtils.merge( geometry, object );
var voxel = voxels[i];
var texture = almacen.textPlaneTexture(voxel.texto,voxel.color,voxelSize);
materials.push( new THREE.MeshBasicMaterial( { map: texture } ) );
}
// Add geometry to scene
var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();
scene.add( mesh );
Some methods are expecting the materials array to be in the mesh face material. For example:
function getBufferMaterial( object, geometryGroup ) {
return object.material instanceof THREE.MeshFaceMaterial
? object.material.materials[ geometryGroup.materialIndex ]
: object.material;
};
Its possible to handle this by referencing the materials array both in the geometry and in the mesh face material. So the line where the mesh is created would look something like:
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(geometry.materials) );
and in the loop processing the voxels:
geometry.materials.push( new THREE.MeshBasicMaterial({ map: texture }));
Each face in the geometry also needs to have a materialIndex assigned or there will be an error. Looping through geometry.faces[] and assigning a materialIndex might be a good way if you know how many faces each of the voxels has.
I want to make parts of a mesh invisible at runtime. Can I set these parts invisible/transparent, e.g. by changing attributes of single faces? The mesh itself uses only one material.
Exemplary illustration as the editor understands this question: Imagine a mesh (here with a geometry of 20 vertices) where each quad of four vertices builds up a Face4. Now, some parts of the mesh should be made invisible (here two faces are invisible).
Note: This answer applies to legacy versions of three.js
You can assign a different material to each face. Here is an example where the faces share a material, but some faces are transparent:
// geometry
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
// materials
materials = [
new THREE.MeshLambertMaterial( { color: 0xffff00, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
];
// assign material to each face
for( var i = 0; i < geometry.faces.length; i++ ) {
geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
}
geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls
// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
three.js r.87