|
// Localize our variables |
|
var Vector3 = THREE.Vector3; |
|
var vec3 = window.vec3; /* via glMatrix */ |
|
|
|
// Define helper methods |
|
Vector3.fromArray = function (arr) { |
|
return new Vector3(arr[0], arr[1], arr[2]); |
|
}; |
|
|
|
// Define our scene and perspective camera |
|
var scene = new THREE.Scene(); |
|
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500); |
|
camera.position.set(0, 10, 10); |
|
camera.lookAt(new THREE.Vector3(0, 0, 0)); |
|
|
|
// Define our renderer |
|
var renderer = new THREE.WebGLRenderer(); |
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
|
// Append our rendered result to the DOM |
|
document.body.appendChild(renderer.domElement); |
|
|
|
// Bind orbit controls to our scene |
|
// https://github.com/mrdoob/three.js/blob/r87/examples/webgl_animation_cloth.html#L284-L288 |
|
var controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
controls.maxPolarAngle = Math.PI * 0.5; |
|
controls.minDistance = 10; |
|
controls.maxDistance = 1000; |
|
|
|
// Define a vector drawing helper |
|
function drawVector(startVertex, endVertex, color) { |
|
color = color || 0xCCCCCC; |
|
var lineMaterial = new THREE.LineBasicMaterial({ |
|
color: color |
|
}); |
|
var lineGeometry = new THREE.Geometry(); |
|
lineGeometry.vertices.push(startVertex); |
|
lineGeometry.vertices.push(endVertex); |
|
var line = new THREE.Line(lineGeometry, lineMaterial); |
|
scene.add(line); |
|
return line; |
|
} |
|
|
|
// Define our problem set we're dealing with |
|
// Define our axis and an offshoot vector where we want to remove the axis component |
|
var axisVector = vec3.fromValues(0, 3, 0); |
|
var offshootVector = vec3.fromValues(1, 1, 0); |
|
|
|
// Isolate and vectorize the projection of our offshoot onto the axis |
|
// dot = |axis||offshoot|cos(theta) |
|
// projectionScalar = |offshoot|cos(theta) |
|
// projectionVector = axisUnitVector * |offshoot|cos(theta) |
|
var axisOffshootDot = vec3.dot(axisVector, offshootVector); |
|
var axisVectorLength = vec3.length(axisVector); |
|
var projectionScalar = axisOffshootDot / axisVectorLength; |
|
var axisUnitVector = vec3.clone(axisVector); |
|
vec3.normalize(axisUnitVector, axisUnitVector); |
|
var projectionVector = vec3.clone(axisUnitVector); |
|
vec3.scale(projectionVector, projectionVector, projectionScalar); |
|
|
|
// Calculate the resulting vector via vector addition |
|
var orthoVector = vec3.create(); |
|
vec3.sub(orthoVector, offshootVector, projectionVector); |
|
|
|
// Draw our results |
|
drawVector(new Vector3(0, 0, 0), Vector3.fromArray(axisVector), 0XFF0000); |
|
drawVector(new Vector3(0, 0, 0), Vector3.fromArray(offshootVector), 0x00FF00); |
|
drawVector(new Vector3(0, 0, 0), Vector3.fromArray(projectionVector), 0xFFFF00); |
|
drawVector(new Vector3(0, 0, 0), Vector3.fromArray(orthoVector), 0x0000FF); |
|
|
|
// Add a grid |
|
var gridHelper = new THREE.GridHelper( |
|
200 /* Size , 20 /* Subdivisions */, 0x0000FF /* Center line color */, 0x8080FF /* Non-center lines color */); |
|
gridHelper.position.x = 0; |
|
gridHelper.position.y = -1; |
|
gridHelper.position.z = 0; |
|
scene.add(gridHelper); |
|
|
|
// Define our render and update loop |
|
function animate() { |
|
// Queue up render after our serial logic completes |
|
requestAnimationFrame(animate); |
|
|
|
// Run a render update |
|
renderer.render(scene, camera); |
|
} |
|
// Start our render/update loop |
|
animate(); |