3d position + plane

by Master P

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<!-- My scene -->
<canvas id="scene"></canvas>
<div id=controls>
  <button id="btnMove">Move bottom-left</button>
  
</div>


<!--

CSS

body {
  padding: 10px;
}

#controls {
 
  display: block;
}

canvas {
  display: block;
  margin-bottom: 10px;
}

JavaScript

var scene, camera, renderer;
     var geometry, material, mesh;


     // explain this
     var raycaster = new THREE.Raycaster();
     var corner = new THREE.Vector2();
     var cornerPoint = new THREE.Vector3();


     //Get the height and the width of the window
     var ww = window.innerWidth;
     var wh = window.innerHeight;


     /* WEBGL RENDERER */

     //Create the webGl renderer from Three
     renderer = new THREE.WebGLRenderer({
       canvas: document.getElementById('scene')
     });
     //Set the background of our scene
     renderer.setClearColor(0x3F3F3F);
     //Set the size of my renderer, I want it to be fullscreen
     renderer.setSize(ww, wh - 50);


     //Create my scene
     scene = new THREE.Scene();

     /* CAMERA */

     camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 1000);
     //We set our camera at x:0,y:0 and z:1000
     camera.position.set(0, 0, 1000);
     //And finally we add our camera in our scene
     scene.add(camera);

     /* LIGHT */

     //Create a white 'directional light'
     light = new THREE.DirectionalLight(0xffffff, 1);
     //We the position of our light
     light.position.set(50, 250, 1000);
     //We add our light into the scene
     scene.add(light);


     /* The Cube */

     //We create a boxGeometry with three parameters: width, height and depth
     geometry = new THREE.BoxGeometry(200, 200, 200);

     //We create a texture for our cube, here it's only a red texture
     material = new THREE.MeshLambertMaterial({
       color: 0x00ff00
     });

     //We create the Mesh which contains our geometry (the cube) and its texture
     mesh = new THREE.Mesh(geometry, material);


     //And finally we add the cube to our scene
     scene.add(mesh);

     // explain this
     var plane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 100));


		 // attach the function to the button
     document.getElementById("btnMove").addEventListener("click",...