How can a clipping plane be setup so that all child objects on baseObject are clipped when outside the baseObject?
In this example the childObject should only show the region inside the parent and not show anything outside the parent's bounds.
Here is a jsfiddle
var geometry = new THREE.PlaneGeometry( 100, 100 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var baseObject = new THREE.Mesh( geometry, material );
var geometry = new THREE.PlaneGeometry( 20, 20 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide} );
var childObject = new THREE.Mesh( geometry, material );
// Set the child object to straddle the baseObject's border.
childObject.position.set(50, 0, 0)
baseObject.add(childObject)
Related
I'm trying to make a plane in three.js that one side is a texture and the other side is a color. I tried:
var material = new THREE.MeshBasicMaterial({color: 0xff0000, side: THREE.FrontSide, map: texture});
var geometry = new THREE.PlaneGeometry(width, height);
plane = new THREE.Mesh(geometry, material);
However this makes a plane that only one side has the texture and the other side is completely transparent. If I go:
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
Then both sides have the color. Is there a way to make it so one side has a texture and the other side has the color?
Here is one patten you can follow if you want a different material on the front and back of a mesh:
var group = new THREE.Group();
scene.add( group );
group.add( new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) ) );
group.add( new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide } ) ) );
Another approach is to write your own custom ShaderMaterial, but the above is the easiest if you are just getting started with three.js
three.js r.104
I'm working off an example from the site and would like to add a textured cube to the scene and ideally have it in a specific position. This is what I've tried so far but it's not appearing:
var frametexture = new THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
var artwork = new THREE.BoxBufferGeometry( 200, 200, 20 );
var material = new THREE.MeshBasicMaterial( { map: frametexture } );
artframe = new THREE.Mesh( artwork, frametexture );
scene.add( artframe );
artwork.scale( - 1, 1, 1 );
Here's my JSFIDDLE
var frametexture = new THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
Should instead be
var frametexture = THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
and
artframe = new THREE.Mesh( artwork, frametexture );
needs to be
artframe = new THREE.Mesh( artwork, material);
I had created a shape using extrude geometry , and now with the extrude settings i need to increase the thickness i had used bevelThickness it increases the thickness along y axis , but need to increase it along x and z axis.
Here my working jsfiddle
Below is my code for extrude settings ,
var extrusionSettings = {
curveSegments:5,
steps: 10,
amount: 10,
bevelEnabled: true,
bevelThickness: 120,
bevelSize: 0,
bevelSegments: 8,
material: 0,
extrudeMaterial: 1
};
var geometry1 = new THREE.ExtrudeGeometry( shape1, extrusionSettings );
var materialLeft = new THREE.MeshLambertMaterial({
color: 0xd6d6d6,// red
transparent:true,
side: THREE.DoubleSide,
ambient: 0xea6767,
opacity:-0.5
});
var materialRight = new THREE.MeshLambertMaterial({
color: 0xcc49c3,//violet
side: THREE.DoubleSide,
ambient: 0xcc49c3
});
var materials = [ materialLeft, materialRight
];
var material = new THREE.MeshFaceMaterial( materials );
var mesh1 = new THREE.Mesh( geometry1, material );
object.add( mesh1 );
object.rotation.x = Math.PI / 2;
scene.add( object );
Below is sample image
is there any setting to increase it ? Can any one guide me ?
Finally i did the trick to fix it, What i did is just i cloned a Mesh add added the position to cloned mesh, so i got the wall nearby another inner wall, by this way i have added multiple clone with the loop, multiple inner wall nearby other created the wall thickens,
Demo : Fiddle
//outer wall mesh
var mesh1 = new THREE.Mesh( geometry1, material );
object.add( mesh1 );
var mesh_arr=new Array();
for(i=0.1;i<15;i++)
{
//cloned mesh,add position to the cloning mesh
mesh_arr[i] = mesh1.clone();
mesh_arr[i].position.set(i,i,i);
mesh_arr[i].updateMatrix();
object.add( mesh_arr[i] );
}
I have some generated geometries, where I want to see the faces from 2 sides.
So when looking from the front of one of the face's in the geometry, it is using material1 but viewed from the back you see material2.
I have experimentet with THREE.FrontSide, THREE.BackSide & THREE.DoubleSide, but none of them seem to give the wanted result. DoubleSide will just mirror the material on front and back.
Should I clone my geometry and create to meshes with two different materials ( mat1 = front & mat2 = back ) or what would you guys do?
Yes, two meshes with different materials should do the trick:.....
var material1 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var material2 = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.BackSide } );
var object1 = new THREE.Mesh( geometry, material1 );
var object2 = new THREE.Mesh( geometry, material2 );
i have a cube geometry and a mesh, and i don't know how to get the width. This is the code:
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
You can use scale instead.
geometry = new THREE.CubeGeometry( 1, 1, 1 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = 200;
mesh.scale.y = 200;
mesh.scale.z = 200;
Not sure I understand your question correctly, but you just specified your cube with the dimensions 200 by 200 by 200, so you got your width and height right there.