Multiple images with hinged mirror using threejs

Questions
1

Just want to show two mirrors at different angles and want to count no. of images formed by object at different angles of mirror.

My problem is that I try many codes but mirror is not apperaing.
Can you just give how to show mirror and put into some angles??
Please help…

the description of the activity want to show ----->
Show two mirrors hinged at a right angle. Now show an object and it’s multiple images. Illustrate with a step by step diagram showing how images are being created.
Allow student to change the angle by dragging the mirrors and keep showing multiple images when the student completes the drag.
The student has to fill a table showing how many images are formed with each of the common angles.

Is it sufficient or not???

3

Hi!

Should we use our telepathic abilities to see how your code looks like, how it works and what happens there?

4

@nav thanks for updating, but no, it is still not sufficient.

You always need to include your code when asking questions like this, and preferably give a live example using Codepen.

Here’s a template to get you started:

5

I try this code to create a mirror but It doesn’t work,

verticalMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: 1024, textureHeight: 1024, color:0x889999 } );

var verticalMirrorMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 300, 300 ), verticalMirror.material );
verticalMirrorMesh.add( verticalMirror );
verticalMirrorMesh.position.y = 100;
verticalMirrorMesh.position.z = -500;
scene.add( verticalMirrorMesh );


renderer.render( scene, camera );
verticalMirror.render();

Please help…

6

Your code is a little bit deprecated. With R90 it should look like this:

var verticalMirror = new THREE.Reflector( geometry, {
   clipBias: 0.003,
   textureWidth: WIDTH * window.devicePixelRatio,
   textureHeight: HEIGHT * window.devicePixelRatio,
   color: 0x889999
} );
verticalMirror.position.y = 100;
verticalMirror.position.z = - 500;
scene.add( verticalMirror );

No need to create a separate instance of Mesh. Check out the official example for more information:

https://threejs.org/examples/webgl_mirror.html

7

I had try the same code but the mirror is not appearing and the black screen occurs.

The error is occured in the file of Reflector.js which I copied from the same source.

The error is-
Threejs.getRender Target is not a function. in reflector.js

I try to remove that error but it won’t work.
Screenshot%20(4)

Please solve this.

8

You are using an old three.js version (R83). Please update to the latest one so it matches to the version of Reflector.

9

Thank you so much .
I need one more help how can I set mirror on angles .
I add two mirrors as a code.
I want to change angles of both mirrors like 30,45,60,120,180 etc.
from common end.
When I change Math.PIE value it affects position and not get attached from same wall.
Please help me.
The code is -

var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var verticalMirror = new THREE.Reflector( geometry, {
	clipBias: 0.003,
	textureWidth: WIDTH * window.devicePixelRatio,
	textureHeight: HEIGHT * window.devicePixelRatio,
	color: 0x889999,
	recursion: 1
} );
verticalMirror.position.y = 50;
verticalMirror.position.z = - 50;
scene.add( verticalMirror );
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var verticalMirror = new THREE.Reflector( geometry, {
	clipBias: 0.003,
	textureWidth: WIDTH * window.devicePixelRatio,
	textureHeight: HEIGHT * window.devicePixelRatio,
	color: 0x889999,
	recursion: 1
} );
verticalMirror.rotateY(  Math.PI/3);
verticalMirror.position.x = -50;
verticalMirror.position.y = 50;
verticalMirror.position.z =  -10;
scene.add( verticalMirror );
10

Maybe this little examples illustrates the usage of rotateY().

https://jsfiddle.net/f2Lommf5/2345/

If the demo is not helpful to you, please explain in more detail, what you want to achieve.

11

Thanks for the demo.
I can try the changing the rotateY() values according to angles but it is a big mirror and I want to show it to attched the same wall.
Code is same as previous only angle changes.
You can see It.
When angle is 90 -
Screenshot%20(5)

When angle is 45 , it looks like -
Screenshot%20(6)

I want to attach from the same position as previous I try to change same x,y,z coordinate but it doesn’t work.
Please help.

12

When you have several variables of the same name, it’s hard to understand which geometry belongs to which mirror object.
Looks like you’re asking about translation of vertices in a geometry, thus you’ll get a differen pivot point.

https://jsfiddle.net/prisoner849/49bk8h0f/

13

Thanks but I want the mirror from same pole in different angles.
I also used different variable names.
I want to show multiple images of object from same point when mirror are placed at different angles.

1 Like