Three.js - parenting samples

Starting point for working with parenting and coordinate systems

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://www.rockonflash.com/webGL/three/neo.js"></script>
<script src="http://www.rockonflash.com/webGL/three/MouseHandler.js"></script>
<script src="http://www.rockonflash.com/webGL/three/RotationCamera.js"></script>

CSS

html, canvas, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #212121;
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;

Neo.JackIntoThree();

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));		        

scene = new THREE.Scene();

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-10, 10, 10);
scene.add(light);
    
var p1 = new THREE.Object3D();
p1.DrawAxis(Neo.axisZ,1, 0x00FF00);
var p2 = new THREE.Object3D();
p2.DrawAxis(Neo.axisZ,1, 0xFF0000);

var geometry = new THREE.CubeGeometry( 0.25, 0.25, 0.25 );
var material = new THREE.MeshPhongMaterial( {color: 0xcccccc} );
p3 = new THREE.Mesh( geometry, material );

var camObj = new THREE.Object3D();
camObj.DrawAllAxis();

p1.add(camObj);
p2.add(p1);
p3.add(p2);// p3 is the only object in world space
scene.add(p3);

 p2.rotateOnAxis(Neo.axisX, 45*Neo.toRADIANS);
camObj.translateOnAxis(Neo.axisZ, -1.5);

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
    
var mouseHandler = new Neo.MouseHandler(renderer.domElement);
mouseHandler.addEventListener("wheel", handleWheelEvent);
mouseHandler.addEventListener("move", handleMoveEvent);

var controller = new Neo.RotationCamera(Neo.Vector3Zero.clone(), scene, camera);
controller.yMaxLimit = 90*Neo.toRADIANS;
controller.yMinLimit = -90*Neo.toRADIANS;
controller.minDistance = 1;
controller.maxDistance = 20;

var ray = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3());
var rayOrigin = new THREE.Object3D();
rayOrigin.DrawAllAxis();
console.log(Neo);
console.log(rayOrigin);
rayOrigin.translateOnAxis(Neo.axisX, 3);
//rayOrigin.translateOnAxis(Neo.axisY, 3);
//rayOrigin.translateOnAxis(Neo.axisZ, 3);
var rayArrow = null;

scene.add(rayOrigin);

animate();

function handleWheelEvent(evt)
{    
    controller.WheelDelta = evt.wheelDelta;
}

function...