Skip to content

Instantly share code, notes, and snippets.

@fabiovalse

fabiovalse/README.md

Last active September 18, 2015 13:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fabiovalse/6cc36c2e238ca4710973 to your computer and use it in GitHub Desktop.
Save fabiovalse/6cc36c2e238ca4710973 to your computer and use it in GitHub Desktop.
Download ZIP
Three.js Edges Helper
Raw
README.md

This example tries to render the edges of a 3D model created by SketchUp as hard borders.

All toon shading techniques we found were unsuitable for long faces (they specify the width of the border as a fraction of the length of the face, causing more thick borders to appear when used on longer faces).

Three.js's Wireframe Helper is unable to correctly draw triangulated geometries, causing all diagonal lines to be rendered as borders.

Three.js's Edges Helper seems to be a better solution. It removes almost all the diagonal lines by performing a conplanarity check on faces (see this jsfiddle for an example). Concave volumes can also be correctly rendered by properly setting up WebGL's polygon offset in the mesh's material.

Unfortunately, as it can be seen in this example, some spurious borders remain, such as the diagonal line on the floor of the darker object, or the short vertical line on the side of the "stairs" of the cube-like object.

Raw
cube.dae
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
<asset>
<contributor>
<authoring_tool>SketchUp 15.3.331</authoring_tool>
</contributor>
<created>2015-07-21T18:28:51Z</created>
<modified>2015-07-21T18:28:51Z</modified>
<unit meter="0.0254" name="inch" />
<up_axis>Z_UP</up_axis>
</asset>
<library_visual_scenes>
<visual_scene id="ID1">
<node name="SketchUp">
<instance_geometry url="#ID2">
<bind_material>
<technique_common>
<instance_material symbol="Material2" target="#ID4">
<bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
</instance_material>
</technique_common>
</bind_material>
</instance_geometry>
<instance_geometry url="#ID10">
<bind_material>
<technique_common>
<instance_material symbol="Material2" target="#ID4">
<bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
</instance_material>
<instance_material symbol="Material3" target="#ID11">
<bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
</instance_material>
</technique_common>
</bind_material>
</instance_geometry>
<instance_geometry url="#ID18">
<bind_material>
<technique_common>
<instance_material symbol="Material2" target="#ID4">
<bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
</instance_material>
</technique_common>
</bind_material>
</instance_geometry>
</node>
</visual_scene>
</library_visual_scenes>
<library_geometries>
<geometry id="ID2">
<mesh>
<source id="ID5">
<float_array id="ID8" count="210">39.37008 39.37008 0 0 0 0 0 39.37008 0 39.37008 0 0 39.37008 0 0 39.37008 13.12336 7.480315 39.37008 0 39.37008 39.37008 39.37008 0 39.37008 39.37008 7.480315 39.37008 13.12336 39.37008 39.37008 0 39.37008 0 0 0 39.37008 0 0 0 0 39.37008 0 39.37008 39.37008 0 0 0 0 0 39.37008 0 39.37008 0 0 39.37008 0 13.12336 39.37008 11.81102 39.37008 39.37008 0 0 39.37008 39.37008 26.24672 39.37008 7.480315 13.12336 39.37008 39.37008 26.24672 39.37008 11.81102 39.37008 39.37008 7.480315 26.24672 13.12336 7.480315 26.24672 39.37008 7.480315 26.24672 26.24672 7.480315 39.37008 39.37008 7.480315 39.37008 13.12336 7.480315 13.12336 13.12336 39.37008 26.24672 13.12336 19.68504 13.12336 13.12336 19.68504 39.37008 13.12336 7.480315 26.24672 13.12336 7.480315 39.37008 13.12336 39.37008 0 0 39.37008 13.12336 13.12336 39.37008 0 39.37008 39.37008 39.37008 0 39.37008 13.12336 39.37008 39.37008 39.37008 13.12336 39.37008 13.12336 39.37008 11.81102 13.12336 26.24672 19.68504 13.12336 26.24672 11.81102 13.12336 13.12336 39.37008 13.12336 13.12336 19.68504 13.12336 39.37008 39.37008 26.24672 26.24672 11.81102 13.12336 39.37008 11.81102 13.12336 26.24672 11.81102 26.24672 39.37008 11.81102 26.24672 39.37008 7.480315 26.24672 26.24672 11.81102 26.24672 26.24672 7.480315 26.24672 39.37008 11.81102 26.24672 26.24672 7.480315 26.24672 13.12336 19.68504 26.24672 13.12336 7.480315 26.24672 26.24672 19.68504 26.24672 26.24672 11.81102 13.12336 13.12336 19.68504 26.24672 26.24672 19.68504 13.12336 26.24672 19.68504 26.24672 13.12336 19.68504 13.12336 26.24672 19.68504 26.24672 26.24672 11.81102 13.12336 26.24672 11.81102 26.24672 26.24672 19.68504</float_array>
<technique_common>
<accessor count="70" source="#ID8" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<source id="ID6">
<float_array id="ID9" count="210">0 0 -1 0 0 -1 0 0 -1 0 0 -1 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 1 0 0 1 0 0 1 0 0 1 0 0 1 2.707168e-016 -0 1 2.707168e-016 -0 1 2.707168e-016 -0 1 2.707168e-016 -0 1 2.707168e-016 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0</float_array>
<technique_common>
<accessor count="70" source="#ID9" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<vertices id="ID7">
<input semantic="POSITION" source="#ID5" />
<input semantic="NORMAL" source="#ID6" />
</vertices>
<triangles count="42" material="Material2">
<input offset="0" semantic="VERTEX" source="#ID7" />
<p>0 1 2 1 0 3 4 5 6 5 4 7 5 7 8 9 6 5 10 11 12 11 10 13 14 15 16 15 14 17 18 19 20 19 18 21 20 19 22 19 21 23 24 22 19 25 20 22 26 27 28 27 26 29 29 26 30 31 32 33 32 34 35 34 32 36 36 32 31 37 38 39 38 37 40 39 38 41 38 40 42 43 44 45 44 46 47 46 44 48 48 44 43 49 50 51 50 49 52 53 54 55 54 53 56 57 58 59 58 57 60 60 57 61 62 63 64 63 62 65 66 67 68 67 66 69</p>
</triangles>
</mesh>
</geometry>
<geometry id="ID10">
<mesh>
<source id="ID13">
<float_array id="ID16" count="228">41.18147 59.41722 12.59843 41.18147 -27.98435 0 41.18147 -27.98435 12.59843 41.18147 59.41722 0 41.18147 59.41722 0 42.59173 55.58378 0 41.18147 -27.98435 0 82.91375 59.41722 0 77.6311 55.58378 0 77.6311 -23.94378 0 42.59173 -23.94378 0 82.91375 -27.98435 0 82.91375 -27.98435 12.59843 41.18147 -27.98435 0 82.91375 -27.98435 0 41.18147 -27.98435 12.59843 41.18147 -27.98435 12.59843 42.59173 -23.94378 12.59843 41.18147 59.41722 12.59843 82.91375 -27.98435 12.59843 77.6311 -23.94378 12.59843 77.6311 55.58378 12.59843 69.23864 59.41722 12.59843 69.23864 55.58378 12.59843 82.91375 59.41722 12.59843 42.59173 55.58378 12.59843 53.56141 59.41722 12.59843 53.56141 55.58378 12.59843 41.18147 59.41722 0 53.56141 59.41722 4.724409 82.91375 59.41722 0 41.18147 59.41722 12.59843 53.56141 59.41722 12.59843 69.23864 59.41722 4.724409 82.91375 59.41722 12.59843 69.23864 59.41722 12.59843 82.91375 59.41722 0 82.91375 -27.98435 12.59843 82.91375 -27.98435 0 82.91375 59.41722 12.59843 77.6311 55.58378 0 69.23864 55.58378 4.724409 42.59173 55.58378 0 77.6311 55.58378 12.59843 69.23864 55.58378 12.59843 53.56141 55.58378 4.724409 42.59173 55.58378 12.59843 53.56141 55.58378 12.59843 53.56141 59.41722 4.724409 53.56141 55.58378 12.59843 53.56141 55.58378 4.724409 53.56141 59.41722 12.59843 69.23864 59.41722 12.59843 69.23864 55.58378 4.724409 69.23864 55.58378 12.59843 69.23864 59.41722 4.724409 77.6311 55.58378 12.59843 77.6311 -23.94378 0 77.6311 -23.94378 12.59843 77.6311 55.58378 0 42.59173 -23.94378 12.59843 77.6311 -23.94378 0 42.59173 -23.94378 0 77.6311 -23.94378 12.59843 42.59173 55.58378 0 42.59173 -23.94378 12.59843 42.59173 -23.94378 0 42.59173 55.58378 12.59843 69.23864 55.58378 4.724409 53.56141 59.41722 4.724409 53.56141 55.58378 4.724409 69.23864 59.41722 4.724409 77.6311 -23.94378 0 77.6311 55.58378 0 42.59173 -23.94378 0 42.59173 55.58378 0</float_array>
<technique_common>
<accessor count="76" source="#ID16" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<source id="ID14">
<float_array id="ID17" count="228">-1 0 0 -1 0 0 -1 0 0 -1 0 0 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 -1 0 0 -1 0 0 -1 0 0 -1 0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1</float_array>
<technique_common>
<accessor count="76" source="#ID17" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<vertices id="ID15">
<input semantic="POSITION" source="#ID13" />
<input semantic="NORMAL" source="#ID14" />
</vertices>
<triangles count="50" material="Material3">
<input offset="0" semantic="VERTEX" source="#ID15" />
<p>0 1 2 1 0 3 4 5 6 5 4 7 5 7 8 8 7 9 6 10 11 10 6 5 11 10 9 11 9 7 12 13 14 13 12 15 16 17 18 17 16 19 17 19 20 20 19 21 21 22 23 22 21 24 24 21 19 18 25 26 25 18 17 26 25 27 28 29 30 29 28 31 29 31 32 30 33 34 33 30 29 34 33 35 36 37 38 37 36 39 40 41 42 41 40 43 41 43 44 42 45 46 45 42 41 46 45 47 48 49 50 49 48 51 52 53 54 53 52 55 56 57 58 57 56 59 60 61 62 61 60 63 64 65 66 65 64 67 68 69 70 69 68 71 72 73 74 75 74 73</p>
</triangles>
<triangles count="2" material="Material2">
<input offset="0" semantic="VERTEX" source="#ID15" />
<p>8 10 5 10 8 9</p>
</triangles>
</mesh>
</geometry>
<geometry id="ID18">
<mesh>
<source id="ID19">
<float_array id="ID22" count="126">31.25294 64.1196 0 0.5442762 46.79676 0 0.5442762 64.1196 0 31.25294 46.79676 0 0.5442762 64.1196 33.85827 0.5442762 46.79676 0 0.5442762 46.79676 33.85827 0.5442762 64.1196 0 0.5442762 64.1196 33.85827 31.25294 64.1196 0 0.5442762 64.1196 0 17.86711 64.1196 17.71654 17.86711 64.1196 33.85827 31.25294 64.1196 17.71654 31.25294 46.79676 0 31.25294 49.55267 17.71654 31.25294 46.79676 33.85827 31.25294 64.1196 0 31.25294 64.1196 17.71654 31.25294 49.55267 33.85827 31.25294 46.79676 33.85827 0.5442762 46.79676 0 31.25294 46.79676 0 0.5442762 46.79676 33.85827 0.5442762 46.79676 33.85827 17.86711 49.55267 33.85827 0.5442762 64.1196 33.85827 31.25294 46.79676 33.85827 31.25294 49.55267 33.85827 17.86711 64.1196 33.85827 17.86711 64.1196 17.71654 17.86711 49.55267 33.85827 17.86711 49.55267 17.71654 17.86711 64.1196 33.85827 31.25294 49.55267 17.71654 17.86711 64.1196 17.71654 17.86711 49.55267 17.71654 31.25294 64.1196 17.71654 17.86711 49.55267 33.85827 31.25294 49.55267 17.71654 17.86711 49.55267 17.71654 31.25294 49.55267 33.85827</float_array>
<technique_common>
<accessor count="42" source="#ID22" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<source id="ID20">
<float_array id="ID23" count="126">0 0 -1 0 0 -1 0 0 -1 0 0 -1 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0</float_array>
<technique_common>
<accessor count="42" source="#ID23" stride="3">
<param name="X" type="float" />
<param name="Y" type="float" />
<param name="Z" type="float" />
</accessor>
</technique_common>
</source>
<vertices id="ID21">
<input semantic="POSITION" source="#ID19" />
<input semantic="NORMAL" source="#ID20" />
</vertices>
<triangles count="24" material="Material2">
<input offset="0" semantic="VERTEX" source="#ID21" />
<p>0 1 2 1 0 3 4 5 6 5 4 7 8 9 10 9 8 11 11 8 12 13 9 11 14 15 16 15 14 17 15 17 18 19 16 15 20 21 22 21 20 23 24 25 26 25 24 27 25 27 28 29 26 25 30 31 32 31 30 33 34 35 36 35 34 37 38 39 40 39 38 41</p>
</triangles>
</mesh>
</geometry>
</library_geometries>
<library_materials>
<material id="ID4" name="material">
<instance_effect url="#ID3" />
</material>
<material id="ID11" name="_0079_Teal">
<instance_effect url="#ID12" />
</material>
</library_materials>
<library_effects>
<effect id="ID3">
<profile_COMMON>
<technique sid="COMMON">
<lambert>
<diffuse>
<color>1 1 1 1</color>
</diffuse>
</lambert>
</technique>
</profile_COMMON>
</effect>
<effect id="ID12">
<profile_COMMON>
<technique sid="COMMON">
<lambert>
<diffuse>
<color>0 0.5019608 0.5019608 1</color>
</diffuse>
</lambert>
</technique>
</profile_COMMON>
</effect>
</library_effects>
<scene>
<instance_visual_scene url="#ID1" />
</scene>
</COLLADA>
Raw
index.coffee
width = 960
height = 500
aspect = width/height
D = 8
scene = new THREE.Scene()
camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000)
renderer = new THREE.WebGLRenderer
precision: 'highp'
antialias: true
alpha: true
renderer.setSize(width, height)
renderer.autoClear = true
document.body.appendChild(renderer.domElement)
# create the light
light = new THREE.DirectionalLight(0xffffff, 1.1)
light.position.set(10, 20, 15)
scene.add(light)
# set the camera
camera.position.set(20, 20, 20)
camera.lookAt(new THREE.Vector3( 0, 0, 0 ))
camera.rotation.z = 5/6*Math.PI
animate = () ->
requestAnimationFrame(animate)
renderer.render(scene, camera)
# load DAE
loader = new THREE.ColladaLoader()
loader.load 'cube.dae', (collada) ->
collada.scene.children[0].children.forEach (mesh) ->
mesh.material.polygonOffset = true
mesh.material.polygonOffsetFactor = 1
mesh.material.polygonOffsetUnits = 1
edges = new THREE.EdgesHelper(mesh, 0x333333)
edges.material.linewidth = 2
scene.add(edges)
collada.scene.scale.set(0.1,0.1,0.1)
scene.add collada.scene
animate()
Raw
index.css
html, body {
margin: 0;
padding: 0;
}
svg path {
shape-rendering: crispEdges;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js Wireframe</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r69/examples/js/loaders/ColladaLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r69/examples/js/renderers/Projector.js"></script>
<script src="threex.domevent.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// Generated by CoffeeScript 1.10.0
(function() {
var D, animate, aspect, camera, height, light, loader, renderer, scene, width;
width = 960;
height = 500;
aspect = width / height;
D = 8;
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);
renderer = new THREE.WebGLRenderer({
precision: 'highp',
antialias: true,
alpha: true
});
renderer.setSize(width, height);
renderer.autoClear = true;
document.body.appendChild(renderer.domElement);
light = new THREE.DirectionalLight(0xffffff, 1.1);
light.position.set(10, 20, 15);
scene.add(light);
camera.position.set(20, 20, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.rotation.z = 5 / 6 * Math.PI;
animate = function() {
requestAnimationFrame(animate);
return renderer.render(scene, camera);
};
loader = new THREE.ColladaLoader();
loader.load('cube.dae', function(collada) {
collada.scene.children[0].children.forEach(function(mesh) {
var edges;
mesh.material.polygonOffset = true;
mesh.material.polygonOffsetFactor = 1;
mesh.material.polygonOffsetUnits = 1;
edges = new THREE.EdgesHelper(mesh, 0x333333);
edges.material.linewidth = 2;
return scene.add(edges);
});
collada.scene.scale.set(0.1, 0.1, 0.1);
scene.add(collada.scene);
return animate();
});
}).call(this);
Raw
threex.domevent.js
// This THREEx helper makes it easy to handle the mouse events in your 3D scene
//
// * CHANGES NEEDED
// * handle drag/drop
// * notify events not object3D - like DOM
// * so single object with property
// * DONE bubling implement bubling/capturing
// * DONE implement event.stopPropagation()
// * DONE implement event.type = "click" and co
// * DONE implement event.target
//
// # Lets get started
//
// First you include it in your page
//
// ```<script src='threex.domevent.js'>< /script>```
//
// # use the object oriented api
//
// You bind an event like this
//
// ```mesh.on('click', function(object3d){ ... })```
//
// To unbind an event, just do
//
// ```mesh.off('click', function(object3d){ ... })```
//
// As an alternative, there is another naming closer DOM events.
// Pick the one you like, they are doing the same thing
//
// ```mesh.addEventListener('click', function(object3d){ ... })```
// ```mesh.removeEventListener('click', function(object3d){ ... })```
//
// # Supported Events
//
// Always in a effort to stay close to usual pratices, the events name are the same as in DOM.
// The semantic is the same too.
// Currently, the available events are
// [click, dblclick, mouseup, mousedown](http://www.quirksmode.org/dom/events/click.html),
// [mouseover and mouse out](http://www.quirksmode.org/dom/events/mouseover.html).
//
// # use the standalone api
//
// The object-oriented api modifies THREE.Object3D class.
// It is a global class, so it may be legitimatly considered unclean by some people.
// If this bother you, simply do ```THREEx.DomEvents.noConflict()``` and use the
// standalone API. In fact, the object oriented API is just a thin wrapper
// on top of the standalone API.
//
// First, you instanciate the object
//
// ```var domEvent = new THREEx.DomEvent();```
//
// Then you bind an event like this
//
// ```domEvent.bind(mesh, 'click', function(object3d){ object3d.scale.x *= 2; });```
//
// To unbind an event, just do
//
// ```domEvent.unbind(mesh, 'click', callback);```
//
//
// # Code
//
/** @namespace */
var THREEx = THREEx || {};
// # Constructor
THREEx.DomEvents = function(camera, domElement)
{
this._camera = camera || null;
this._domElement= domElement || document;
this._projector = new THREE.Projector();
this._selected = null;
this._boundObjs = {};
// Bind dom event for mouse and touch
var _this = this;
this._$onClick = function(){ _this._onClick.apply(_this, arguments); };
this._$onDblClick = function(){ _this._onDblClick.apply(_this, arguments); };
this._$onMouseMove = function(){ _this._onMouseMove.apply(_this, arguments); };
this._$onMouseDown = function(){ _this._onMouseDown.apply(_this, arguments); };
this._$onMouseUp = function(){ _this._onMouseUp.apply(_this, arguments); };
this._$onTouchMove = function(){ _this._onTouchMove.apply(_this, arguments); };
this._$onTouchStart = function(){ _this._onTouchStart.apply(_this, arguments); };
this._$onTouchEnd = function(){ _this._onTouchEnd.apply(_this, arguments); };
this._$onContextmenu = function(){ _this._onContextmenu.apply(_this, arguments); };
this._domElement.addEventListener( 'click' , this._$onClick , false );
this._domElement.addEventListener( 'dblclick' , this._$onDblClick , false );
this._domElement.addEventListener( 'mousemove' , this._$onMouseMove , false );
this._domElement.addEventListener( 'mousedown' , this._$onMouseDown , false );
this._domElement.addEventListener( 'mouseup' , this._$onMouseUp , false );
this._domElement.addEventListener( 'touchmove' , this._$onTouchMove , false );
this._domElement.addEventListener( 'touchstart' , this._$onTouchStart , false );
this._domElement.addEventListener( 'touchend' , this._$onTouchEnd , false );
this._domElement.addEventListener( 'contextmenu', this._$onContextmenu , false );
}
// # Destructor
THREEx.DomEvents.prototype.destroy = function()
{
// unBind dom event for mouse and touch
this._domElement.removeEventListener( 'click' , this._$onClick , false );
this._domElement.removeEventListener( 'dblclick' , this._$onDblClick , false );
this._domElement.removeEventListener( 'mousemove' , this._$onMouseMove , false );
this._domElement.removeEventListener( 'mousedown' , this._$onMouseDown , false );
this._domElement.removeEventListener( 'mouseup' , this._$onMouseUp , false );
this._domElement.removeEventListener( 'touchmove' , this._$onTouchMove , false );
this._domElement.removeEventListener( 'touchstart' , this._$onTouchStart , false );
this._domElement.removeEventListener( 'touchend' , this._$onTouchEnd , false );
this._domElement.removeEventListener( 'contextmenu' , this._$onContextmenu , false );
}
THREEx.DomEvents.eventNames = [
"click",
"dblclick",
"mouseover",
"mouseout",
"mousemove",
"mousedown",
"mouseup",
"contextmenu"
];
THREEx.DomEvents.prototype._getRelativeMouseXY = function(domEvent){
var element = domEvent.target || domEvent.srcElement;
if (element.nodeType === 3) {
element = element.parentNode; // Safari fix -- see http://www.quirksmode.org/js/events_properties.html
}
//get the real position of an element relative to the page starting point (0, 0)
//credits go to brainjam on answering http://stackoverflow.com/questions/5755312/getting-mouse-position-relative-to-content-area-of-an-element
var elPosition = { x : 0 , y : 0};
var tmpElement = element;
//store padding
var style = getComputedStyle(tmpElement, null);
elPosition.y += parseInt(style.getPropertyValue("padding-top"), 10);
elPosition.x += parseInt(style.getPropertyValue("padding-left"), 10);
//add positions
do {
elPosition.x += tmpElement.offsetLeft;
elPosition.y += tmpElement.offsetTop;
style = getComputedStyle(tmpElement, null);
elPosition.x += parseInt(style.getPropertyValue("border-left-width"), 10);
elPosition.y += parseInt(style.getPropertyValue("border-top-width"), 10);
} while(tmpElement = tmpElement.offsetParent);
var elDimension = {
width : (element === window) ? window.innerWidth : element.offsetWidth,
height : (element === window) ? window.innerHeight : element.offsetHeight
};
return {
x : +((domEvent.pageX - elPosition.x) / elDimension.width ) * 2 - 1,
y : -((domEvent.pageY - elPosition.y) / elDimension.height) * 2 + 1
};
};
/********************************************************************************/
/* domevent context */
/********************************************************************************/
// handle domevent context in object3d instance
THREEx.DomEvents.prototype._objectCtxInit = function(object3d){
object3d._3xDomEvent = {};
}
THREEx.DomEvents.prototype._objectCtxDeinit = function(object3d){
delete object3d._3xDomEvent;
}
THREEx.DomEvents.prototype._objectCtxIsInit = function(object3d){
return object3d._3xDomEvent ? true : false;
}
THREEx.DomEvents.prototype._objectCtxGet = function(object3d){
return object3d._3xDomEvent;
}
/********************************************************************************/
/* */
/********************************************************************************/
/**
* Getter/Setter for camera
*/
THREEx.DomEvents.prototype.camera = function(value)
{
if( value ) this._camera = value;
return this._camera;
}
THREEx.DomEvents.prototype.bind = function(object3d, eventName, callback, useCapture)
{
console.assert( THREEx.DomEvents.eventNames.indexOf(eventName) !== -1, "not available events:"+eventName );
if( !this._objectCtxIsInit(object3d) ) this._objectCtxInit(object3d);
var objectCtx = this._objectCtxGet(object3d);
if( !objectCtx[eventName+'Handlers'] ) objectCtx[eventName+'Handlers'] = [];
objectCtx[eventName+'Handlers'].push({
callback : callback,
useCapture : useCapture
});
// add this object in this._boundObjs
if( this._boundObjs[eventName] === undefined ){
this._boundObjs[eventName] = [];
}
this._boundObjs[eventName].push(object3d);
}
THREEx.DomEvents.prototype.addEventListener = THREEx.DomEvents.prototype.bind
THREEx.DomEvents.prototype.unbind = function(object3d, eventName, callback, useCapture)
{
console.assert( THREEx.DomEvents.eventNames.indexOf(eventName) !== -1, "not available events:"+eventName );
if( !this._objectCtxIsInit(object3d) ) this._objectCtxInit(object3d);
var objectCtx = this._objectCtxGet(object3d);
if( !objectCtx[eventName+'Handlers'] ) objectCtx[eventName+'Handlers'] = [];
var handlers = objectCtx[eventName+'Handlers'];
for(var i = 0; i < handlers.length; i++){
var handler = handlers[i];
if( callback != handler.callback ) continue;
if( useCapture != handler.useCapture ) continue;
handlers.splice(i, 1)
break;
}
// from this object from this._boundObjs
var index = this._boundObjs[eventName].indexOf(object3d);
console.assert( index !== -1 );
this._boundObjs[eventName].splice(index, 1);
}
THREEx.DomEvents.prototype.removeEventListener = THREEx.DomEvents.prototype.unbind
THREEx.DomEvents.prototype._bound = function(eventName, object3d)
{
var objectCtx = this._objectCtxGet(object3d);
if( !objectCtx ) return false;
return objectCtx[eventName+'Handlers'] ? true : false;
}
/********************************************************************************/
/* onMove */
/********************************************************************************/
// # handle mousemove kind of events
THREEx.DomEvents.prototype._onMove = function(eventName, mouseX, mouseY, origDomEvent)
{
//console.log('eventName', eventName, 'boundObjs', this._boundObjs[eventName])
// get objects bound to this event
var boundObjs = this._boundObjs[eventName];
if( boundObjs === undefined || boundObjs.length === 0 ) return;
// compute the intersection
var vector = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var dir = new THREE.Vector3();
if ( this._camera instanceof THREE.OrthographicCamera ) {
vector.set( mouseX, mouseY, -1 );
vector.unproject( this._camera );
dir.set( 0, 0, - 1 ).transformDirection( this._camera.matrixWorld );
raycaster.set( vector, dir );
} else if ( this._camera instanceof THREE.PerspectiveCamera ) {
vector.set( mouseX, mouseY, 0.5 );
vector.unproject( this._camera );
raycaster.set( this._camera.position, vector.sub( this._camera.position ).normalize() );
}
var intersects = raycaster.intersectObjects( boundObjs );
var oldSelected = this._selected;
if( intersects.length > 0 ){
var notifyOver, notifyOut, notifyMove;
var intersect = intersects[ 0 ];
var newSelected = intersect.object;
this._selected = newSelected;
// if newSelected bound mousemove, notify it
notifyMove = this._bound('mousemove', newSelected);
if( oldSelected != newSelected ){
// if newSelected bound mouseenter, notify it
notifyOver = this._bound('mouseover', newSelected);
// if there is a oldSelect and oldSelected bound mouseleave, notify it
notifyOut = oldSelected && this._bound('mouseout', oldSelected);
}
}else{
// if there is a oldSelect and oldSelected bound mouseleave, notify it
notifyOut = oldSelected && this._bound('mouseout', oldSelected);
this._selected = null;
}
// notify mouseMove - done at the end with a copy of the list to allow callback to remove handlers
notifyMove && this._notify('mousemove', newSelected, origDomEvent, intersect);
// notify mouseEnter - done at the end with a copy of the list to allow callback to remove handlers
notifyOver && this._notify('mouseover', newSelected, origDomEvent, intersect);
// notify mouseLeave - done at the end with a copy of the list to allow callback to remove handlers
notifyOut && this._notify('mouseout' , oldSelected, origDomEvent, intersect);
}
/********************************************************************************/
/* onEvent */
/********************************************************************************/
// # handle click kind of events
THREEx.DomEvents.prototype._onEvent = function(eventName, mouseX, mouseY, origDomEvent)
{
//console.log('eventName', eventName, 'boundObjs', this._boundObjs[eventName])
// get objects bound to this event
var boundObjs = this._boundObjs[eventName];
if( boundObjs === undefined || boundObjs.length === 0 ) return;
// compute the intersection
var vector = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var dir = new THREE.Vector3();
if ( this._camera instanceof THREE.OrthographicCamera ) {
vector.set( mouseX, mouseY, -1 );
vector.unproject( this._camera );
dir.set( 0, 0, - 1 ).transformDirection( this._camera.matrixWorld );
raycaster.set( vector, dir );
} else if ( this._camera instanceof THREE.PerspectiveCamera ) {
vector.set( mouseX, mouseY, 0.5 );
vector.unproject( this._camera );
raycaster.set( this._camera.position, vector.sub( this._camera.position ).normalize() );
}
var intersects = raycaster.intersectObjects( boundObjs, true);
// if there are no intersections, return now
if( intersects.length === 0 ) return;
// init some variables
var intersect = intersects[0];
var object3d = intersect.object;
var objectCtx = this._objectCtxGet(object3d);
var objectParent = object3d.parent;
while ( typeof(objectCtx) == 'undefined' && objectParent )
{
objectCtx = this._objectCtxGet(objectParent);
objectParent = objectParent.parent;
}
if( !objectCtx ) return;
// notify handlers
this._notify(eventName, object3d, origDomEvent, intersect);
}
THREEx.DomEvents.prototype._notify = function(eventName, object3d, origDomEvent, intersect)
{
var objectCtx = this._objectCtxGet(object3d);
var handlers = objectCtx ? objectCtx[eventName+'Handlers'] : null;
// parameter check
console.assert(arguments.length === 4)
// do bubbling
if( !objectCtx || !handlers || handlers.length === 0 ){
object3d.parent && this._notify(eventName, object3d.parent, origDomEvent, intersect);
return;
}
// notify all handlers
var handlers = objectCtx[eventName+'Handlers'];
for(var i = 0; i < handlers.length; i++){
var handler = handlers[i];
var toPropagate = true;
handler.callback({
type : eventName,
target : object3d,
origDomEvent : origDomEvent,
intersect : intersect,
stopPropagation : function(){
toPropagate = false;
}
});
if( !toPropagate ) continue;
// do bubbling
if( handler.useCapture === false ){
object3d.parent && this._notify(eventName, object3d.parent, origDomEvent, intersect);
}
}
}
/********************************************************************************/
/* handle mouse events */
/********************************************************************************/
// # handle mouse events
THREEx.DomEvents.prototype._onMouseDown = function(event){ return this._onMouseEvent('mousedown', event); }
THREEx.DomEvents.prototype._onMouseUp = function(event){ return this._onMouseEvent('mouseup' , event); }
THREEx.DomEvents.prototype._onMouseEvent = function(eventName, domEvent)
{
var mouseCoords = this._getRelativeMouseXY(domEvent);
this._onEvent(eventName, mouseCoords.x, mouseCoords.y, domEvent);
}
THREEx.DomEvents.prototype._onMouseMove = function(domEvent)
{
var mouseCoords = this._getRelativeMouseXY(domEvent);
this._onMove('mousemove', mouseCoords.x, mouseCoords.y, domEvent);
this._onMove('mouseover', mouseCoords.x, mouseCoords.y, domEvent);
this._onMove('mouseout' , mouseCoords.x, mouseCoords.y, domEvent);
}
THREEx.DomEvents.prototype._onClick = function(event)
{
// TODO handle touch ?
this._onMouseEvent('click' , event);
}
THREEx.DomEvents.prototype._onDblClick = function(event)
{
// TODO handle touch ?
this._onMouseEvent('dblclick' , event);
}
THREEx.DomEvents.prototype._onContextmenu = function(event)
{
//TODO don't have a clue about how this should work with touch..
this._onMouseEvent('contextmenu' , event);
}
/********************************************************************************/
/* handle touch events */
/********************************************************************************/
// # handle touch events
THREEx.DomEvents.prototype._onTouchStart = function(event){ return this._onTouchEvent('mousedown', event); }
THREEx.DomEvents.prototype._onTouchEnd = function(event){ return this._onTouchEvent('mouseup' , event); }
THREEx.DomEvents.prototype._onTouchMove = function(domEvent)
{
if( domEvent.touches.length != 1 ) return undefined;
domEvent.preventDefault();
var mouseX = +(domEvent.touches[ 0 ].pageX / window.innerWidth ) * 2 - 1;
var mouseY = -(domEvent.touches[ 0 ].pageY / window.innerHeight) * 2 + 1;
this._onMove('mousemove', mouseX, mouseY, domEvent);
this._onMove('mouseover', mouseX, mouseY, domEvent);
this._onMove('mouseout' , mouseX, mouseY, domEvent);
}
THREEx.DomEvents.prototype._onTouchEvent = function(eventName, domEvent)
{
if( domEvent.touches.length != 1 ) return undefined;
domEvent.preventDefault();
var mouseX = +(domEvent.touches[ 0 ].pageX / window.innerWidth ) * 2 - 1;
var mouseY = -(domEvent.touches[ 0 ].pageY / window.innerHeight) * 2 + 1;
this._onEvent(eventName, mouseX, mouseY, domEvent);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment