Set arrow direction from intersect face normal

by Thanos Saringelos

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/master/ThreeCSG.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

CSS

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

JavaScript

/* THREE.Object3D.DefaultUp.set(0,0,1); */

// three.js info box follows shape
var renderer, scene, camera, controls;
var angle = 0;
var arrow;
var rayCaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var axis = new THREE.Vector3();
// material
var material = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  shading: THREE.FlatShading
});

init();
animate();

function init() {
  // info
  var info = document.createElement('div');
  info.style.position = 'absolute';
  info.style.top = '30px';
  info.style.width = '100%';
  info.style.textAlign = 'center';
  info.style.color = '#fff';
  info.style.fontWeight = 'bold';
  info.style.backgroundColor = 'transparent';
  info.style.zIndex = '1';
  info.style.fontFamily = 'Monospace';
  info.innerHTML = "three.js - set arrow direction from intersect face normal";
  document.body.appendChild(info);

  // renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

  var geometry = new THREE.BoxBufferGeometry(0.8, 0.2, 0.1);
  var material = new THREE.MeshBasicMaterial({
    color: 0xffff00
  });

  var cubeA = new THREE.Mesh(geometry, material);
  cubeA.position.set(0, 0, 0);

  var cubeB = new THREE.Mesh(new THREE.BoxBufferGeometry(0.11, 0.23, 0.2), material);
  cubeB.position.set(0.45, 0, 0);

  //create a group and add the two cubes
  //These cubes can now be rotated / scaled etc as a group
  var group = new THREE.Group();
  group.add(cubeA);
  group.add(cubeB);

  scene.add(group);

  //
  var geometry = new THREE.BoxBufferGeometry(0.8, 0.2, 0.1);
  var material = new THREE.MeshBasicMaterial({
    color: 0xff0000
  });

  var cubeA2 = new THREE.Mesh(geometry, material);
  cubeA2.position.set(0, 0, 0);

  var cubeB2 = new THREE.Mesh(new THREE.BoxBufferGeometry(0.11, 0.1, 0.7), material);
 ...