Three.js: various control improvements.
Specifically: * touchscreen devices are now supported; * rotation is now more like what SolveSpace itself does. The code is split in two parts because MSVC can't handle string literals longer than 16Ki.
This commit is contained in:
whitequark
parent
e1f614101f
commit
affc88f342
692
src/export.cpp
692
src/export.cpp
|
|
@ -843,197 +843,501 @@ void SolveSpaceUI::ExportMeshAsThreeJsTo(FILE *f, const std::string &filename,
|
||||||
STriangle *tr;
|
STriangle *tr;
|
||||||
SEdge *e;
|
SEdge *e;
|
||||||
Vector bndl, bndh;
|
Vector bndl, bndh;
|
||||||
const char htmlbegin[] =
|
const char htmlbegin0[] = R"(
|
||||||
"<!DOCTYPE html>\n"
|
<!DOCTYPE html>
|
||||||
"<html lang=\"en\">\n"
|
<html lang="en">
|
||||||
" <head>\n"
|
<head>
|
||||||
" <meta charset=\"utf-8\"></meta>\n"
|
<meta charset="utf-8"></meta>
|
||||||
" <title>Three.js Solvespace Mesh</title>\n"
|
<title>Three.js Solvespace Mesh</title>
|
||||||
" <script src=\"http://threejs.org/build/three.min.js\"></script>\n"
|
<script src="http://threejs.org/build/three.js"></script>
|
||||||
" <script src=\"http://threejs.org/examples/js/controls/OrthographicTrackballControls.js\"></script>\n"
|
<script src="http://hammerjs.github.io/dist/hammer.js"></script>
|
||||||
" <style type=\"text/css\">\n"
|
<style type="text/css">
|
||||||
" body { margin: 0; overflow: hidden; }\n"
|
body { margin: 0; overflow: hidden; }
|
||||||
" </style>\n"
|
</style>
|
||||||
" </head>\n"
|
</head>
|
||||||
" <body>\n"
|
<body>
|
||||||
" <script>\n"
|
<script>
|
||||||
" window.solvespace = function(obj, params) {\n"
|
</script>
|
||||||
" var scene, edgeScene, camera, edgeCamera, renderer;\n"
|
<script>
|
||||||
" var geometry, controls, material, mesh, edges;\n"
|
SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset) {
|
||||||
" var width, height, edgeBias;\n"
|
THREE.Camera.call(this);
|
||||||
" var directionalLightArray = [];\n"
|
|
||||||
"\n"
|
this.type = 'SolvespaceCamera';
|
||||||
" if(typeof params === \"undefined\" || !(\"width\" in params)) {\n"
|
|
||||||
" width = window.innerWidth;\n"
|
this.renderWidth = renderWidth;
|
||||||
" } else {\n"
|
this.renderHeight = renderHeight;
|
||||||
" width = params.width;\n"
|
this.zoomScale = scale; /* Avoid namespace collision w/ THREE.Object.scale */
|
||||||
" }\n"
|
this.up = up;
|
||||||
"\n"
|
this.right = right;
|
||||||
" if(typeof params === \"undefined\" || !(\"height\" in params)) {\n"
|
this.offset = offset;
|
||||||
" height = window.innerHeight;\n"
|
this.depthBias = 0;
|
||||||
" } else {\n"
|
|
||||||
" height = params.height;\n"
|
this.updateProjectionMatrix();
|
||||||
" }\n"
|
};
|
||||||
" edgeBias = obj.bounds.edgeBias;\n"
|
|
||||||
"\n"
|
SolvespaceCamera.prototype = Object.create(THREE.Camera.prototype);
|
||||||
" domElement = init();\n"
|
SolvespaceCamera.prototype.constructor = SolvespaceCamera;
|
||||||
" render();\n"
|
SolvespaceCamera.prototype.updateProjectionMatrix = function() {
|
||||||
" return domElement;\n"
|
var temp = new THREE.Matrix4();
|
||||||
"\n"
|
var offset = new THREE.Matrix4().makeTranslation(this.offset.x, this.offset.y, this.offset.z);
|
||||||
" function init() {\n"
|
// Convert to right handed- do up cross right instead.
|
||||||
" scene = new THREE.Scene();\n"
|
var n = new THREE.Vector3().crossVectors(this.up, this.right);
|
||||||
" edgeScene = new THREE.Scene();\n"
|
var rotate = new THREE.Matrix4().makeBasis(this.right, this.up, n);
|
||||||
"\n"
|
rotate.transpose();
|
||||||
" var ratio = (width/height);\n"
|
/* FIXME: At some point we ended up using row-major.
|
||||||
" camera = new THREE.OrthographicCamera(-obj.bounds.x * ratio,\n"
|
THREE.js wants column major. Scale/depth correct unaffected b/c diagonal
|
||||||
" obj.bounds.x * ratio, obj.bounds.y, -obj.bounds.y, obj.bounds.near,\n"
|
matrices remain the same when transposed. makeTranslation also makes
|
||||||
" obj.bounds.far*10);\n"
|
a column-major matrix. */
|
||||||
" camera.position.z = obj.bounds.z*3;\n"
|
|
||||||
"\n"
|
/* TODO: If we want perspective, we need an additional matrix
|
||||||
" mesh = createMesh(obj);\n"
|
here which will modify w for perspective divide. */
|
||||||
" scene.add(mesh);\n"
|
var scale = new THREE.Matrix4().makeScale(2 * this.zoomScale / this.renderWidth,
|
||||||
" edges = createEdges(obj);\n"
|
2 * this.zoomScale / this.renderHeight, this.zoomScale / 30000.0);
|
||||||
" edgeScene.add(edges);\n"
|
|
||||||
"\n"
|
temp.multiply(scale);
|
||||||
" for(var i = 0; i < obj.lights.d.length; i++) {\n"
|
temp.multiply(rotate);
|
||||||
" var lightColor = new THREE.Color(obj.lights.d[i].intensity,\n"
|
temp.multiply(offset);
|
||||||
" obj.lights.d[i].intensity, obj.lights.d[i].intensity);\n"
|
|
||||||
" var directionalLight = new THREE.DirectionalLight(lightColor, 1);\n"
|
this.projectionMatrix.copy(temp);
|
||||||
" directionalLight.position.set(obj.lights.d[i].direction[0],\n"
|
};
|
||||||
" obj.lights.d[i].direction[1], obj.lights.d[i].direction[2]);\n"
|
|
||||||
" directionalLightArray.push(directionalLight);\n"
|
SolvespaceCamera.prototype.NormalizeProjectionVectors = function() {
|
||||||
" scene.add(directionalLight);\n"
|
/* After rotating, up and right may no longer be orthogonal.
|
||||||
" }\n"
|
However, their cross product will produce the correct
|
||||||
"\n"
|
rotated plane, and we can recover an orthogonal basis. */
|
||||||
" var lightColor = new THREE.Color(obj.lights.a, obj.lights.a, obj.lights.a);\n"
|
var n = new THREE.Vector3().crossVectors(this.right, this.up);
|
||||||
" var ambientLight = new THREE.AmbientLight(lightColor.getHex());\n"
|
this.up = new THREE.Vector3().crossVectors(n, this.right);
|
||||||
" scene.add(ambientLight);\n"
|
this.right.normalize();
|
||||||
"\n"
|
this.up.normalize();
|
||||||
" renderer = new THREE.WebGLRenderer();\n"
|
};
|
||||||
" renderer.setPixelRatio(window.devicePixelRatio);\n"
|
|
||||||
" renderer.setSize(width, height);\n"
|
SolvespaceCamera.prototype.rotate = function(right, up) {
|
||||||
" renderer.autoClear = false;\n"
|
var oldRight = new THREE.Vector3().copy(this.right).normalize();
|
||||||
"\n"
|
var oldUp = new THREE.Vector3().copy(this.up).normalize();
|
||||||
" controls = new THREE.OrthographicTrackballControls(camera, renderer.domElement);\n"
|
this.up.applyAxisAngle(oldRight, up);
|
||||||
" controls.screen.width = width;\n"
|
this.right.applyAxisAngle(oldUp, right);
|
||||||
" controls.screen.height = height;\n"
|
this.NormalizeProjectionVectors();
|
||||||
" controls.radius = (width + height)/4;\n"
|
}
|
||||||
" controls.rotateSpeed = 2.0;\n"
|
|
||||||
" controls.zoomSpeed = 2.0;\n"
|
SolvespaceCamera.prototype.offsetProj = function(right, up) {
|
||||||
" controls.panSpeed = 1.0;\n"
|
var shift = new THREE.Vector3(right * this.right.x + up * this.up.x,
|
||||||
" controls.staticMoving = true;\n"
|
right * this.right.y + up * this.up.y,
|
||||||
" controls.addEventListener(\"change\", render);\n"
|
right * this.right.z + up * this.up.z);
|
||||||
" controls.addEventListener(\"change\", lightUpdate);\n"
|
this.offset.add(shift);
|
||||||
" controls.addEventListener(\"change\", setControlsCenter);\n"
|
}
|
||||||
"\n"
|
|
||||||
" animate();\n"
|
/* Calculate the offset in terms of up and right projection vectors
|
||||||
" return renderer.domElement;\n"
|
that will preserve the world coordinates of the current mouse position after
|
||||||
" }\n"
|
the zoom. */
|
||||||
"\n"
|
SolvespaceCamera.prototype.zoomTo = function(x, y, delta) {
|
||||||
" function animate() {\n"
|
// Get offset components in world coordinates, in terms of up/right.
|
||||||
" requestAnimationFrame(animate);\n"
|
var projOffsetX = this.offset.dot(this.right);
|
||||||
" controls.update();\n"
|
var projOffsetY = this.offset.dot(this.up);
|
||||||
" }\n"
|
|
||||||
"\n"
|
/* Remove offset before scaling so, that mouse position changes
|
||||||
" function render() {\n"
|
proportionally to the model and independent of current offset. */
|
||||||
" renderer.clear();\n"
|
var centerRightI = x/this.zoomScale - projOffsetX;
|
||||||
" renderer.render(scene, camera);\n"
|
var centerUpI = y/this.zoomScale - projOffsetY;
|
||||||
" var oldFar = camera.far\n"
|
var zoomFactor;
|
||||||
" camera.far = camera.far + edgeBias;\n"
|
|
||||||
" camera.updateProjectionMatrix();\n"
|
/* Zoom 20% every 100 delta. */
|
||||||
" renderer.render(edgeScene, camera);\n"
|
if(delta < 0) {
|
||||||
" camera.far = oldFar;\n"
|
zoomFactor = (-delta * 0.002 + 1);
|
||||||
" camera.updateProjectionMatrix();\n"
|
}
|
||||||
" }\n"
|
else if(delta > 0) {
|
||||||
"\n"
|
zoomFactor = (delta * (-1.0/600.0) + 1)
|
||||||
" function lightUpdate() {\n"
|
}
|
||||||
" var projRight = new THREE.Vector3();\n"
|
else {
|
||||||
" var projZ = new THREE.Vector3();\n"
|
return;
|
||||||
" var changeBasis = new THREE.Matrix3();\n"
|
}
|
||||||
"\n"
|
|
||||||
" // The original light positions were in camera space.\n"
|
this.zoomScale = this.zoomScale * zoomFactor;
|
||||||
" // Project them into standard space using camera's basis\n"
|
var centerRightF = x/this.zoomScale - projOffsetX;
|
||||||
" // vectors (up, target, and their cross product).\n"
|
var centerUpF = y/this.zoomScale - projOffsetY;
|
||||||
" projRight.copy(camera.up);\n"
|
|
||||||
" projZ.copy(camera.position).sub(controls.target).normalize();\n"
|
this.offset.addScaledVector(this.right, centerRightF - centerRightI);
|
||||||
" projRight.cross(projZ).normalize();\n"
|
this.offset.addScaledVector(this.up, centerUpF - centerUpI);
|
||||||
" changeBasis.set(projRight.x, camera.up.x, controls.target.x,\n"
|
}
|
||||||
" projRight.y, camera.up.y, controls.target.y,\n"
|
|
||||||
" projRight.z, camera.up.z, controls.target.z);\n"
|
|
||||||
"\n"
|
SolvespaceControls = function(object, domElement) {
|
||||||
" for(var i = 0; i < obj.lights.d.length; i++) {\n"
|
var _this = this;
|
||||||
" var newLightPos = changeBasis.applyToVector3Array(\n"
|
this.object = object;
|
||||||
" [obj.lights.d[i].direction[0], obj.lights.d[i].direction[1],\n"
|
this.domElement = ( domElement !== undefined ) ? domElement : document;
|
||||||
" obj.lights.d[i].direction[2]]);\n"
|
|
||||||
" directionalLightArray[i].position.set(newLightPos[0],\n"
|
var threePan = new Hammer.Pan({event : 'threepan', pointers : 3, enable : false});
|
||||||
" newLightPos[1], newLightPos[2]);\n"
|
var panAfterTap = new Hammer.Pan({event : 'panaftertap', enable : false});
|
||||||
" }\n"
|
|
||||||
" }\n"
|
this.touchControls = new Hammer.Manager(domElement, {
|
||||||
"\n"
|
recognizers: [
|
||||||
" function setControlsCenter() {\n"
|
[Hammer.Pinch, { enable: true }],
|
||||||
" var rect = renderer.domElement.getBoundingClientRect()\n"
|
[Hammer.Pan],
|
||||||
" controls.screen.left = rect.left + document.body.scrollLeft;\n"
|
[Hammer.Tap],
|
||||||
" controls.screen.top = rect.top + document.body.scrollTop;\n"
|
]
|
||||||
" }\n"
|
});
|
||||||
"\n"
|
|
||||||
" function createMesh(mesh_obj) {\n"
|
this.touchControls.add(threePan);
|
||||||
" var geometry = new THREE.Geometry();\n"
|
this.touchControls.add(panAfterTap);
|
||||||
" var materialIndex = 0, materialList = [];\n"
|
|
||||||
" var opacitiesSeen = {};\n"
|
var changeEvent = {
|
||||||
"\n"
|
type: 'change'
|
||||||
" for(var i = 0; i < mesh_obj.points.length; i++) {\n"
|
};
|
||||||
" geometry.vertices.push(new THREE.Vector3(mesh_obj.points[i][0],\n"
|
var startEvent = {
|
||||||
" mesh_obj.points[i][1], mesh_obj.points[i][2]));\n"
|
type: 'start'
|
||||||
" }\n"
|
};
|
||||||
"\n"
|
var endEvent = {
|
||||||
" for(var i = 0; i < mesh_obj.faces.length; i++) {\n"
|
type: 'end'
|
||||||
" var currOpacity = ((mesh_obj.colors[i] & 0xFF000000) >>> 24)/255.0;\n"
|
};
|
||||||
" if(opacitiesSeen[currOpacity] === undefined) {\n"
|
|
||||||
" opacitiesSeen[currOpacity] = materialIndex;\n"
|
var _changed = false;
|
||||||
" materialIndex++;\n"
|
var _mouseMoved = false;
|
||||||
" materialList.push(new THREE.MeshLambertMaterial(\n"
|
//var _touchPoints = new Array();
|
||||||
" {vertexColors: THREE.FaceColors, opacity: currOpacity,\n"
|
var _offsetPrev = new THREE.Vector2(0, 0);
|
||||||
" transparent: true}));\n"
|
var _offsetCur = new THREE.Vector2(0, 0);
|
||||||
" }\n"
|
var _rotatePrev = new THREE.Vector2(0, 0);
|
||||||
"\n"
|
var _rotateCur = new THREE.Vector2(0, 0);
|
||||||
" geometry.faces.push(new THREE.Face3(mesh_obj.faces[i][0],\n"
|
|
||||||
" mesh_obj.faces[i][1], mesh_obj.faces[i][2],\n"
|
// Used during touch events.
|
||||||
" [new THREE.Vector3(mesh_obj.normals[i][0][0],\n"
|
var _rotateOrig = new THREE.Vector2(0, 0);
|
||||||
" mesh_obj.normals[i][0][1], mesh_obj.normals[i][0][2]),\n"
|
var _offsetOrig = new THREE.Vector2(0, 0);
|
||||||
" new THREE.Vector3(mesh_obj.normals[i][1][0],\n"
|
var _prevScale = 1.0;
|
||||||
" mesh_obj.normals[i][1][1], mesh_obj.normals[i][1][2]),\n"
|
|
||||||
" new THREE.Vector3(mesh_obj.normals[i][2][0],\n"
|
this.handleEvent = function(event) {
|
||||||
" mesh_obj.normals[i][2][1], mesh_obj.normals[i][2][2])],\n"
|
if (typeof this[event.type] == 'function') {
|
||||||
" new THREE.Color(mesh_obj.colors[i] & 0x00FFFFFF),\n"
|
this[event.type](event);
|
||||||
" opacitiesSeen[currOpacity]));\n"
|
}
|
||||||
" }\n"
|
}
|
||||||
"\n"
|
|
||||||
" geometry.computeBoundingSphere();\n"
|
function mousedown(event) {
|
||||||
" return new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materialList));\n"
|
event.preventDefault();
|
||||||
" }\n"
|
event.stopPropagation();
|
||||||
"\n"
|
|
||||||
" function createEdges(mesh_obj) {\n"
|
switch (event.button) {
|
||||||
" var geometry = new THREE.Geometry();\n"
|
case 0:
|
||||||
" var material = new THREE.LineBasicMaterial();\n"
|
_rotateCur.set(event.screenX, event.screenY);
|
||||||
"\n"
|
_rotatePrev.copy(_rotateCur);
|
||||||
" for(var i = 0; i < mesh_obj.edges.length; i++) {\n"
|
document.addEventListener('mousemove', mousemove, false);
|
||||||
" geometry.vertices.push(new THREE.Vector3(mesh_obj.edges[i][0][0],\n"
|
document.addEventListener('mouseup', mouseup, false);
|
||||||
" mesh_obj.edges[i][0][1], mesh_obj.edges[i][0][2]),\n"
|
break;
|
||||||
" new THREE.Vector3(mesh_obj.edges[i][1][0],\n"
|
case 2:
|
||||||
" mesh_obj.edges[i][1][1], mesh_obj.edges[i][1][2]));\n"
|
_offsetCur.set(event.screenX, event.screenY);
|
||||||
" }\n"
|
_offsetPrev.copy(_offsetCur);
|
||||||
"\n"
|
document.addEventListener('mousemove', mousemove, false);
|
||||||
" return new THREE.Line(geometry, material, THREE.LinePieces);\n"
|
document.addEventListener('mouseup', mouseup, false);
|
||||||
" }\n"
|
break;
|
||||||
" };\n"
|
default:
|
||||||
"\n"
|
break;
|
||||||
" </script>\n"
|
}
|
||||||
" <script>\n";
|
}
|
||||||
const char htmlend[] =
|
|
||||||
" document.body.appendChild(solvespace(solvespace_model_%s));\n"
|
function wheel( event ) {
|
||||||
" </script>\n"
|
event.preventDefault();
|
||||||
" </body>\n"
|
/* FIXME: Width and height might not be supported universally, but
|
||||||
"</html>\n";
|
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, event.screenY);
|
||||||
|
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, event.screenY);
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
domElement = init();
|
||||||
|
render();
|
||||||
|
return domElement;
|
||||||
|
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
edgeScene = new THREE.Scene();
|
||||||
|
|
||||||
|
camera = new SolvespaceCamera(width,
|
||||||
|
height, 5, new THREE.Vector3(0, 1, 0),
|
||||||
|
new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0));
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
controls = new SolvespaceControls(camera, renderer.domElement);
|
||||||
|
controls.addEventListener("change", render);
|
||||||
|
controls.addEventListener("change", lightUpdate);
|
||||||
|
|
||||||
|
animate();
|
||||||
|
return renderer.domElement;
|
||||||
|
})";
|
||||||
|
const char htmlbegin1[] = R"(
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
)";
|
||||||
|
const char htmlend[] = R"(
|
||||||
|
document.body.appendChild(solvespace(solvespace_model_%s));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)";
|
||||||
|
|
||||||
// A default three.js viewer with OrthographicTrackballControls is
|
// A default three.js viewer with OrthographicTrackballControls is
|
||||||
// generated as a comment preceding the data.
|
// generated as a comment preceding the data.
|
||||||
|
|
@ -1073,8 +1377,10 @@ void SolveSpaceUI::ExportMeshAsThreeJsTo(FILE *f, const std::string &filename,
|
||||||
baseFilename[i] = '_';
|
baseFilename[i] = '_';
|
||||||
}
|
}
|
||||||
|
|
||||||
if(extension == "html")
|
if(extension == "html") {
|
||||||
fputs(htmlbegin, f);
|
fputs(htmlbegin0, f);
|
||||||
|
fputs(htmlbegin1, f);
|
||||||
|
}
|
||||||
|
|
||||||
fprintf(f, "var solvespace_model_%s = {\n"
|
fprintf(f, "var solvespace_model_%s = {\n"
|
||||||
" bounds: {\n"
|
" bounds: {\n"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user