Clipping intersection

Questions
1

I made a demo according to https://threejs.org/examples/#webgl_clipping_intersection. It works.But when red box show, there have some white line just like this.box. It looks like white box edge. I do not know why. And here is my code.
`

var camera, scene, renderer;

var isTransformRoom = false, roomIndex = 1, tween;

var planeConstant = {constant: 5.1};

var clipPlanes = [
new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), -20.1 ),
new THREE.Plane( new THREE.Vector3( 0, -1, 0 ), 5.1 ),
new THREE.Plane( new THREE.Vector3( 0, 0, -1 ), -5.1 )
];

var clipPlanes1 = [
	new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), -5.1 ),
	new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), -5.1),
	new THREE.Plane( new THREE.Vector3( 0, 0, -1), -5.1 )
];
init();
render();
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick=function(){  // show white box
	if(roomIndex==1){return};
	isTransformRoom = true;
	planeConstant = {constant: 5.1};
	tween = new TWEEN.Tween(planeConstant);
	tween.easing(TWEEN.Easing.Quadratic.Out);
	tween.to({constant: -5.1}, 800);
	tween.start();
};
btn2.onclick=function(){ // show red box
	if(roomIndex==2){return};
	isTransformRoom = true;
	planeConstant = {constant: 5.1};
	tween = new TWEEN.Tween(planeConstant);
	tween.easing(TWEEN.Easing.Quadratic.Out);
	tween.to({constant: -5.1}, 800);
	tween.start();
};

function init() {
			
renderer = new THREE.WebGLRenderer( { antialias: true } );
			
renderer.setPixelRatio( window.devicePixelRatio );
			
renderer.setSize( window.innerWidth, window.innerHeight );
			
 renderer.localClippingEnabled = true;
			
 document.body.appendChild( renderer.domElement );
			
 scene = new THREE.Scene();
			
 camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );

camera.position.set( - 20, 30, 40 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
			
var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1 );
scene.add( light );
scene.add( new THREE.AmbientLight( 0xffffff) );
var pointLight = new THREE.PointLight(0xffffff, 0.4);
pointLight.position.set(20,20,20);
scene.add(pointLight)

var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var material = new THREE.MeshStandardMaterial( {
	color: new THREE.Color(0xffffff),
	side: THREE.DoubleSide,
	clippingPlanes: clipPlanes,
	clipIntersection: true
} );
var box = new THREE.Mesh(geometry, material);
scene.add(box);
var geometry3 = new THREE.BoxGeometry( 5, 5, 5 );
var material3 = new THREE.MeshStandardMaterial( {
	color: new THREE.Color(0xffffff),
	side: THREE.DoubleSide,
	clippingPlanes: clipPlanes,
	clipIntersection: true
} );
var box3 = new THREE.Mesh(geometry3, material3);
box3.position.set(10,0,0);
scene.add(box3);
			
var geometry1 = new THREE.BoxGeometry( 6, 6, 6 );
var material1 = new THREE.MeshStandardMaterial( {
	color: new THREE.Color(0xff0000),
	side: THREE.DoubleSide,
	clippingPlanes: clipPlanes1,
	clipIntersection: true
} );
var box1 = new THREE.Mesh(geometry1, material1);
scene.add(box1);
};
function render() {
	requestAnimationFrame(render);
	renderer.render( scene, camera );
	if(isTransformRoom){
		TWEEN.update();
		if(roomIndex ==1){
			clipPlanes[1].constant = planeConstant.constant;
			clipPlanes1[1].constant = -planeConstant.constant;
			if(clipPlanes[1].constant<=-5.1){isTransformRoom = false; roomIndex=2}
		}else{
			clipPlanes[1].constant = -planeConstant.constant;
			clipPlanes1[1].constant = planeConstant.constant;
			if(clipPlanes[1].constant>=5.1){isTransformRoom = false; roomIndex=1}
		}
	}
}
2

Can you please provide a simplified live demo for debugging?

3

I create a live demo https://jsfiddle.net/chenxiaoleizi/k89e45L8/

4

Pretty sure it’s just that your clipping planes are too tight to the white box. I’ve expanded them a bit here and the artefacts seem to be gone: https://jsfiddle.net/k89e45L8/6/

1 Like
5

thanks! the white line gone now :grinning: