Search code examples
htmlthree.jsgame-physicsphysics-engine

how to apply physics using physi.js with mirror.js on the plane in three.js


I create mirror plane using mirror.js in three.js. now i want to apply gravity over that plane. i have try this code but get error

var planeGeo = new THREE.PlaneBufferGeometry( 300, 300 );
		var groundMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT, color: 0x777777 } );
				var Material = new Physijs.createMaterial(groundMirror);
				var cube = new Physijs.BoxMesh(planeGeo,Material,0 );
				cube.add( groundMirror );
                scene.add(cube);


Solution

  • CubeCamera is a bit of a waste for a single plane, you could always use a single perspective camera and align it with your plane. The basic idea is to take plane normal, position your camera behind the plane in aligned on the normal going through the center of the plane, and orient it (rotate) to be aligned with the normal. Make sure you set near value of your camera to be the same as distance between the camera and the plane, so that reflections can be captured at to the point of contact. Question on scale is resolved by ensuring your viewport is the same size at the plane.

    For reference, have a look at he CubeCamera source code: https://github.com/mrdoob/three.js/blob/master/src/cameras/CubeCamera.js

    EDIT:

    After looking through examples again, i found that Slayvin has implemented just that: http://threejs.org/examples/webgl_mirror.html

    here's a relevant snippet:

    var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
    
    // MIRORR planes
    groundMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT, color: 0x777777 } );
    
    var mirrorMesh = new THREE.Mesh( planeGeo, groundMirror.material );
    mirrorMesh.add( groundMirror );
    mirrorMesh.rotateX( - Math.PI / 2 );
    scene.add( mirrorMesh );