window.devicePixelRatio = window.devicePixelRatio || 1; SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset) { THREE.Camera.call(this); this.type = 'SolvespaceCamera'; this.renderWidth = renderWidth; this.renderHeight = renderHeight; this.zoomScale = scale; /* Avoid namespace collision w/ THREE.Object.scale */ this.up = up; this.right = right; this.offset = offset; this.depthBias = 0; this.updateProjectionMatrix(); }; SolvespaceCamera.prototype = Object.create(THREE.Camera.prototype); SolvespaceCamera.prototype.constructor = SolvespaceCamera; SolvespaceCamera.prototype.updateProjectionMatrix = function() { var temp = new THREE.Matrix4(); var offset = new THREE.Matrix4().makeTranslation(this.offset.x, this.offset.y, this.offset.z); // Convert to right handed- do up cross right instead. var n = new THREE.Vector3().crossVectors(this.up, this.right); var rotate = new THREE.Matrix4().makeBasis(this.right, this.up, n); rotate.transpose(); /* FIXME: At some point we ended up using row-major. THREE.js wants column major. Scale/depth correct unaffected b/c diagonal matrices remain the same when transposed. makeTranslation also makes a column-major matrix. */ /* TODO: If we want perspective, we need an additional matrix here which will modify w for perspective divide. */ var scale = new THREE.Matrix4().makeScale(2 * this.zoomScale / this.renderWidth, 2 * this.zoomScale / this.renderHeight, this.zoomScale / 30000.0); temp.multiply(scale); temp.multiply(rotate); temp.multiply(offset); this.projectionMatrix.copy(temp); }; SolvespaceCamera.prototype.NormalizeProjectionVectors = function() { /* After rotating, up and right may no longer be orthogonal. However, their cross product will produce the correct rotated plane, and we can recover an orthogonal basis. */ var n = new THREE.Vector3().crossVectors(this.right, this.up); this.up = new THREE.Vector3().crossVectors(n, this.right); this.right.normalize(); this.up.normalize(); }; SolvespaceCamera.prototype.rotate = function(right, up) { var oldRight = new THREE.Vector3().copy(this.right).normalize(); var oldUp = new THREE.Vector3().copy(this.up).normalize(); this.up.applyAxisAngle(oldRight, up); this.right.applyAxisAngle(oldUp, right); this.NormalizeProjectionVectors(); } SolvespaceCamera.prototype.offsetProj = function(right, up) { var shift = new THREE.Vector3(right * this.right.x + up * this.up.x, right * this.right.y + up * this.up.y, right * this.right.z + up * this.up.z); this.offset.add(shift); } /* Calculate the offset in terms of up and right projection vectors that will preserve the world coordinates of the current mouse position after the zoom. */ SolvespaceCamera.prototype.zoomTo = function(x, y, delta) { // Get offset components in world coordinates, in terms of up/right. var projOffsetX = this.offset.dot(this.right); var projOffsetY = this.offset.dot(this.up); /* Remove offset before scaling so, that mouse position changes proportionally to the model and independent of current offset. */ var centerRightI = x/this.zoomScale - projOffsetX; var centerUpI = y/this.zoomScale - projOffsetY; var zoomFactor; /* Zoom 20% every 100 delta. */ if(delta < 0) { zoomFactor = (-delta * 0.002 + 1); } else if(delta > 0) { zoomFactor = (delta * (-1.0/600.0) + 1) } else { return; } this.zoomScale = this.zoomScale * zoomFactor; var centerRightF = x/this.zoomScale - projOffsetX; var centerUpF = y/this.zoomScale - projOffsetY; this.offset.addScaledVector(this.right, centerRightF - centerRightI); this.offset.addScaledVector(this.up, centerUpF - centerUpI); } SolvespaceControls = function(object, domElement) { var _this = this; this.object = object; this.domElement = ( domElement !== undefined ) ? domElement : document; var threePan = new Hammer.Pan({event : 'threepan', pointers : 3, enable : false}); var panAfterTap = new Hammer.Pan({event : 'panaftertap', enable : false}); this.touchControls = new Hammer.Manager(domElement, { recognizers: [ [Hammer.Pinch, { enable: true }], [Hammer.Pan], [Hammer.Tap], ] }); this.touchControls.add(threePan); this.touchControls.add(panAfterTap); var changeEvent = { type: 'change' }; var startEvent = { type: 'start' }; var endEvent = { type: 'end' }; var _changed = false; var _mouseMoved = false; //var _touchPoints = new Array(); var _offsetPrev = new THREE.Vector2(0, 0); var _offsetCur = new THREE.Vector2(0, 0); var _rotatePrev = new THREE.Vector2(0, 0); var _rotateCur = new THREE.Vector2(0, 0); // Used during touch events. var _rotateOrig = new THREE.Vector2(0, 0); var _offsetOrig = new THREE.Vector2(0, 0); var _prevScale = 1.0; this.handleEvent = function(event) { if (typeof this[event.type] == 'function') { this[event.type](event); } } function mousedown(event) { event.preventDefault(); event.stopPropagation(); switch (event.button) { case 0: _rotateCur.set(event.screenX/window.devicePixelRatio, event.screenY/window.devicePixelRatio); _rotatePrev.copy(_rotateCur); document.addEventListener('mousemove', mousemove, false); document.addEventListener('mouseup', mouseup, false); break; case 2: _offsetCur.set(event.screenX/window.devicePixelRatio, event.screenY/window.devicePixelRatio); _offsetPrev.copy(_offsetCur); document.addEventListener('mousemove', mousemove, false); document.addEventListener('mouseup', mouseup, false); break; default: break; } } function wheel( event ) { event.preventDefault(); /* FIXME: Width and height might not be supported universally, but can be calculated? */ var box = _this.domElement.getBoundingClientRect(); object.zoomTo(event.clientX - box.width/2 - box.left, -(event.clientY - box.height/2 - box.top), event.deltaY); _changed = true; } function mousemove(event) { switch (event.button) { case 0: _rotateCur.set(event.screenX/window.devicePixelRatio, event.screenY/window.devicePixelRatio); var diff = new THREE.Vector2().subVectors(_rotateCur, _rotatePrev) .multiplyScalar(1 / object.zoomScale); object.rotate(-0.3 * Math.PI / 180 * diff.x * object.zoomScale, -0.3 * Math.PI / 180 * diff.y * object.zoomScale); _changed = true; _rotatePrev.copy(_rotateCur); break; case 2: _mouseMoved = true; _offsetCur.set(event.screenX/window.devicePixelRatio, event.screenY/window.devicePixelRatio); var diff = new THREE.Vector2().subVectors(_offsetCur, _offsetPrev) .multiplyScalar(1 / object.zoomScale); object.offsetProj(diff.x, -diff.y); _changed = true; _offsetPrev.copy(_offsetCur) break; } } function mouseup(event) { /* TODO: Opera mouse gestures will intercept this event, making it possible to have multiple mousedown events consecutively without a corresponding mouseup (so multiple viewports can be rotated/panned simultaneously). Disable mouse gestures for now. */ event.preventDefault(); event.stopPropagation(); document.removeEventListener('mousemove', mousemove); document.removeEventListener('mouseup', mouseup); _this.dispatchEvent(endEvent); } function pan(event) { /* neWcur - prev does not necessarily equal (cur + diff) - prev. Floating point is not associative. */ touchDiff = new THREE.Vector2(event.deltaX, event.deltaY); _rotateCur.addVectors(_rotateOrig, touchDiff); incDiff = new THREE.Vector2().subVectors(_rotateCur, _rotatePrev) .multiplyScalar(1 / object.zoomScale); object.rotate(-0.3 * Math.PI / 180 * incDiff.x * object.zoomScale, -0.3 * Math.PI / 180 * incDiff.y * object.zoomScale); _changed = true; _rotatePrev.copy(_rotateCur); } function panstart(event) { /* TODO: Dynamically enable pan function? */ _rotateOrig.copy(_rotateCur); } function pinchstart(event) { _prevScale = event.scale; } function pinch(event) { /* FIXME: Width and height might not be supported universally, but can be calculated? */ var box = _this.domElement.getBoundingClientRect(); /* 16.6... pixels chosen heuristically... matches my touchpad. */ if (event.scale < _prevScale) { object.zoomTo(event.center.x - box.width/2 - box.left, -(event.center.y - box.height/2 - box.top), 100/6.0); _changed = true; } else if (event.scale > _prevScale) { object.zoomTo(event.center.x - box.width/2 - box.left, -(event.center.y - box.height/2 - box.top), -100/6.0); _changed = true; } _prevScale = event.scale; } /* A tap will enable panning/disable rotate. */ function tap(event) { panAfterTap.set({enable : true}); _this.touchControls.get('pan').set({enable : false}); } function panaftertap(event) { touchDiff = new THREE.Vector2(event.deltaX, event.deltaY); _offsetCur.addVectors(_offsetOrig, touchDiff); incDiff = new THREE.Vector2().subVectors(_offsetCur, _offsetPrev) .multiplyScalar(1 / object.zoomScale); object.offsetProj(incDiff.x, -incDiff.y); _changed = true; _offsetPrev.copy(_offsetCur); } function panaftertapstart(event) { _offsetOrig.copy(_offsetCur); } function panaftertapend(event) { panAfterTap.set({enable : false}); _this.touchControls.get('pan').set({enable : true}); } function contextmenu(event) { event.preventDefault(); } this.update = function() { if (_changed) { _this.dispatchEvent(changeEvent); _changed = false; } } this.domElement.addEventListener('mousedown', mousedown, false); this.domElement.addEventListener('wheel', wheel, false); this.domElement.addEventListener('contextmenu', contextmenu, false); /* Hammer.on wraps addEventListener */ // Rotate this.touchControls.on('pan', pan); this.touchControls.on('panstart', panstart); // Zoom this.touchControls.on('pinch', pinch); this.touchControls.on('pinchstart', pinchstart); //Pan this.touchControls.on('tap', tap); this.touchControls.on('panaftertapstart', panaftertapstart); this.touchControls.on('panaftertap', panaftertap); this.touchControls.on('panaftertapend', panaftertapend); } SolvespaceControls.prototype = Object.create(THREE.EventDispatcher.prototype); SolvespaceControls.prototype.constructor = SolvespaceControls; solvespace = function(obj, params) { var scene, edgeScene, camera, edgeCamera, renderer; var geometry, controls, material, mesh, edges; var width, height, scale, offset; var directionalLightArray = []; if (typeof params === "undefined" || !("width" in params)) { width = window.innerWidth; } else { width = params.width; } if (typeof params === "undefined" || !("height" in params)) { height = window.innerHeight; } else { height = params.height; } if (typeof params === "undefined" || !("scale" in params)) { scale = 5; } else { scale = params.scale; } if (typeof params === "undefined" || !("offset" in params)) { offset = new THREE.Vector3(0, 0, 0); } else { offset = params.offset; } width *= window.devicePixelRatio; height *= window.devicePixelRatio; domElement = init(); render(); return domElement; function init() { scene = new THREE.Scene(); edgeScene = new THREE.Scene(); camera = new SolvespaceCamera(width/window.devicePixelRatio, height/window.devicePixelRatio, scale, new THREE.Vector3(0, 1, 0), new THREE.Vector3(0.5, 0, -0.5).normalize(), offset); mesh = createMesh(obj); scene.add(mesh); edges = createEdges(obj); edgeScene.add(edges); for (var i = 0; i < obj.lights.d.length; i++) { var lightColor = new THREE.Color(obj.lights.d[i].intensity, obj.lights.d[i].intensity, obj.lights.d[i].intensity); var directionalLight = new THREE.DirectionalLight(lightColor, 1); directionalLight.position.set(obj.lights.d[i].direction[0], obj.lights.d[i].direction[1], obj.lights.d[i].direction[2]); directionalLightArray.push(directionalLight); scene.add(directionalLight); } var lightColor = new THREE.Color(obj.lights.a, obj.lights.a, obj.lights.a); var ambientLight = new THREE.AmbientLight(lightColor.getHex()); scene.add(ambientLight); renderer = new THREE.WebGLRenderer({ antialias: true}); renderer.setSize(width, height); renderer.autoClear = false; renderer.domElement.style = "width:"+width/window.devicePixelRatio+"px;height:"+height/window.devicePixelRatio+"px;"; controls = new SolvespaceControls(camera, renderer.domElement); controls.addEventListener("change", render); controls.addEventListener("change", lightUpdate); animate(); return renderer.domElement; } function animate() { requestAnimationFrame(animate); controls.update(); } function render() { var context = renderer.getContext(); camera.updateProjectionMatrix(); renderer.clear(); context.depthRange(0.1, 1); renderer.render(scene, camera); context.depthRange(0.1-(2/60000.0), 1-(2/60000.0)); renderer.render(edgeScene, camera); } function lightUpdate() { var changeBasis = new THREE.Matrix4(); // The original light positions were in camera space. // Project them into standard space using camera's basis // vectors (up, target, and their cross product). n = new THREE.Vector3().crossVectors(camera.up, camera.right); changeBasis.makeBasis(camera.right, camera.up, n); for (var i = 0; i < 2; i++) { var newLightPos = changeBasis.applyToVector3Array( [obj.lights.d[i].direction[0], obj.lights.d[i].direction[1], obj.lights.d[i].direction[2]]); directionalLightArray[i].position.set(newLightPos[0], newLightPos[1], newLightPos[2]); } } function createMesh(meshObj) { var geometry = new THREE.Geometry(); var materialIndex = 0; var materialList = []; var opacitiesSeen = {}; for (var i = 0; i < meshObj.points.length; i++) { geometry.vertices.push(new THREE.Vector3(meshObj.points[i][0], meshObj.points[i][1], meshObj.points[i][2])); } for (var i = 0; i < meshObj.faces.length; i++) { var currOpacity = ((meshObj.colors[i] & 0xFF000000) >>> 24) / 255.0; if (opacitiesSeen[currOpacity] === undefined) { opacitiesSeen[currOpacity] = materialIndex; materialIndex++; materialList.push(new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors, opacity: currOpacity, transparent: true, side: THREE.DoubleSide })); } geometry.faces.push(new THREE.Face3(meshObj.faces[i][0], meshObj.faces[i][1], meshObj.faces[i][2], [new THREE.Vector3(meshObj.normals[i][0][0], meshObj.normals[i][0][1], meshObj.normals[i][0][2]), new THREE.Vector3(meshObj.normals[i][1][0], meshObj.normals[i][1][1], meshObj.normals[i][1][2]), new THREE.Vector3(meshObj.normals[i][2][0], meshObj.normals[i][2][1], meshObj.normals[i][2][2])], new THREE.Color(meshObj.colors[i] & 0x00FFFFFF), opacitiesSeen[currOpacity])); } geometry.computeBoundingSphere(); return new THREE.Mesh(geometry, new THREE.MultiMaterial(materialList)); } function createEdges(meshObj) { var geometry = new THREE.Geometry(); var material = new THREE.LineBasicMaterial(); for (var i = 0; i < meshObj.edges.length; i++) { geometry.vertices.push(new THREE.Vector3(meshObj.edges[i][0][0], meshObj.edges[i][0][1], meshObj.edges[i][0][2]), new THREE.Vector3(meshObj.edges[i][1][0], meshObj.edges[i][1][1], meshObj.edges[i][1][2])); } geometry.computeBoundingSphere(); return new THREE.LineSegments(geometry, material); } };