Align on normals

Place an object on a mesh and align it along normal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/threex.windowresize/master/threex.windowresize.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

div {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: black;
}

JavaScript

var T = THREE;

var container, width, height;
var animationId;
var renderer, scene;
var controls, camera, camLookAt;
var ray, mouse;
var light1, light2, light3;
var skybox, skyboxGeometry, skyboxMaterial;
var cone, coneGeometry, coneMaterial;
var box, boxGeometry, boxMaterial;
var surface, surfaceGeometry, surfaceMaterial;
var point = {
	position: {
		x: 0.0,
		y: 0.0,
		z: 0.0
	},
	normal: {
		x: 0.0,
		y: 0.0,
		z: 0.0
	}
}

init();
animate();

function init() {

	width = window.innerWidth;
	height = window.innerHeight;

	container = document.createElement('div');
	document.body.appendChild(container);

	renderer = new T.WebGLRenderer({antialias: true});
	renderer.setSize(width, height);
	container.appendChild(renderer.domElement);

	scene = new T.Scene();

	camera = new T.PerspectiveCamera(45, width / height, 1, 20000);
	camera.position.x = 0;
	camera.position.y = 0;
	camera.position.z = 5;
	camera.lookAt(new T.Vector3(0, 0, 0));
	scene.add(camera);


	// WindowResize
	THREEx.WindowResize(renderer, camera);


	// Controls
	controls = new T.OrbitControls(camera, renderer.domElement);


	// Lights
	light1 = new T.PointLight(0xffffff);
	light1.position.set(0, 0, 15);
	light1.castShadow = true;
	light1.intensity = .2;

	light2 = new T.PointLight(0xffeeee);
	light2.position.set(-15, 15, 15);
	light2.castShadow = true;
	light2.intensity = .2;

	light3 = new T.PointLight(0xeeeeff);
	light3.position.set(15, 10, 8);
	light3.castShadow = true;
	light3.intensity = .8;

	camera.add(light1, light2, light3);


	// Skybox
	skyboxGeometry = new T.CubeGeometry(10000, 10000, 10000);
	skyboxMaterial = new T.MeshBasicMaterial({
		color: 0x000000,
		side: T.BackSide
	});
	skybox = new T.Mesh(skyboxGeometry, skyboxMaterial);
	skybox.name = 'Skybox';
	scene.add(skybox);


	// Surface on which cones will point
	surfaceMaterial = new T.MeshLambertMaterial({
		color: 0xeeeeee,
		transparent: true,
		opacity: .7,
		wireframe: false
	});
	surfaceGeometry = new T.SphereGeometry(1,32, 32...