Threejs - Ray Detection Box2

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

JavaScript

/**
This is an example of using THREE.Box2.
Box2 is litterally a 2d box collision. nothing like the box2D library.
The shape will always be engulf within a box shape of 4 points, no matter the complexity of the 2d shape.

We can see that red and green shape still hits, as the collision is based around a box.


Change uvs on a regular geometry is more tedious than doing it on a BufferGeometry

// to move texture use mesh.material.map.offset.x += .1;

// rotating uvs 45 on regular geometry, a plane with two triangles faces
//face1
geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.5, 1.0 );
geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 1.0, 0.5 );
//face2
geometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].set( 0.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].set( 0.5, 0.0 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].set( 1.0, 0.5 );  

// rotating uvs 45 on buffer geometry, a plane with two triangles faces
//only have to worry about the 4 points
geometry.attributes.uv.setXY( 0, 0.5, 1.0 );
geometry.attributes.uv.setXY( 1, 1.0, 0.5 );
geometry.attributes.uv.setXY( 2, 0.0, 0.5 );
geometry.attributes.uv.setXY( 3, 0.5, 0.0 );

// the trick though for one sided plane regardless of vertices is to utilize a regular geometry and a buffer geometry. Rotate the vertices from the regular geometry and re-apply the new XY points to the buffer geometries's uvs.

for extruded shapes, UVs will have to be recreated differently, as extruded geos are not buffer geos. It follows a similar pattern, except you have to use the geometry uvs method.
*/
var mod = {};
var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera,...