Mirror Reflector performance down

Questions
1

Hi everyone,
Iam new with three.js and I have problem with performance after I add one Mirror to scene.

When I look at the scene, where is mirror visible, FPS is lower, when I look to another side, where is mirror not visible, FPS is okay.

My mirrors code:

var geometry = new THREE.PlaneBufferGeometry(280, 55);	geometry.translate( 0, 0.5, 0 );
    var mesh = new Reflector( geometry, {
    clipBias: 0.004,
    textureWidth: window.innerWidth * window.devicePixelRatio,
    textureHeight: window.innerHeight * window.devicePixelRatio,
    color: 0x487892,
    recursion: 1
} );

I dont know if it problem with this mirror (if I use this wrong) or I have wrong all scene, so the performance down? :slight_smile:

My scene is a lof of boxes (100+):

// box1
var box_position = [175,1700,0];
var box_scale = [225,50,220];
var prekazka_pruhlednost = 0;
	var material = new THREE.MeshPhongMaterial( { color: color, flatShading: true } );
	var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );	geometry.translate( 0, 0.5, 0 );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.x = (box_position[1])+(box_scale[1]/2)+(podlaha_x/2)*-1;
	mesh.position.z = (box_position[0]*(-1))+(box_scale[0]/2)+(podlaha_z/2)-box_scale[0];
	mesh.position.y = box_position[2]+5;
	mesh.scale.x = box_scale[1];
	mesh.scale.z = box_scale[0];
	mesh.scale.y = box_scale[2];
		if(box_scale[2]<=120) {
			var edges = new THREE.EdgesGeometry( geometry );
			var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: color2, linewidth: 1 } ) );
			line.position.x = mesh.position.x;	line.position.z = mesh.position.z;	line.position.y = mesh.position.y;
			line.scale.x = mesh.scale.x;	line.scale.z = mesh.scale.z;	line.scale.y = mesh.scale.y;
			scene.add( line );
		}
	mesh.updateMatrix();
	mesh.matrixAutoUpdate = false;
	scene.add(mesh);

// box2
var box_position = [175,1700,0];
var box_scale = [225,50,220];
var prekazka_pruhlednost = 0;
	var material = new THREE.MeshPhongMaterial( { color: color, flatShading: true } );
	var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );	geometry.translate( 0, 0.5, 0 );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.x = (box_position[1])+(box_scale[1]/2)+(podlaha_x/2)*-1;
	mesh.position.z = (box_position[0]*(-1))+(box_scale[0]/2)+(podlaha_z/2)-box_scale[0];
	mesh.position.y = box_position[2]+5;
	mesh.scale.x = box_scale[1];
	mesh.scale.z = box_scale[0];
	mesh.scale.y = box_scale[2];
		if(box_scale[2]<=120) {
			var edges = new THREE.EdgesGeometry( geometry );
			var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: color2, linewidth: 1 } ) );
			line.position.x = mesh.position.x;	line.position.z = mesh.position.z;	line.position.y = mesh.position.y;
			line.scale.x = mesh.scale.x;	line.scale.z = mesh.scale.z;	line.scale.y = mesh.scale.y;
			scene.add( line );
		}
	mesh.updateMatrix();
	mesh.matrixAutoUpdate = false;
	scene.add(mesh);

Any ideas pls? :slight_smile:
Thanks

1 Like