Skip to content
This repository was archived by the owner on Jan 18, 2019. It is now read-only.

Commit 223b5bb

Browse files
belen-albezabelen-albeza
committed
add point vs box (api) demo
1 parent 7814000 commit 223b5bb

File tree

7 files changed

+2209
-4
lines changed

7 files changed

+2209
-4
lines changed

‎api_point.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>3D AABB collisions</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="styles.css" type="text/css">
7+
<script src="js/lib/three.min.js"></script>
8+
<script src="js/lib/transform-controls.js"></script>
9+
<script src="js/common.js"></script>
10+
<script src="js/api_point.js"></script>
11+
</head>
12+
<body>
13+
14+
<header class="main-header">
15+
<h1><a href="index.html">3D AABB collisions</a></h1>
16+
<p>Point vs Box (THREE.js AABB api)</p>
17+
</header>
18+
19+
<div class="main-wrapper">
20+
<div class="canvas-wrapper">
21+
<canvas id="demo" width="512" height="512"></canvas>
22+
<aside class="message">
23+
Press <strong>Esc</strong> to show/hide bounding-boxes
24+
</aside>
25+
</div><!-- canvas wrapper -->
26+
27+
<footer class="main-footer">
28+
<p>Source code on <a href="https://github.com/mozdevs/gamedev-js-3d-aabb">the Github repository</a>.</p>
29+
</footer>
30+
</div><!-- main wrapper -->
31+
32+
</body>
33+
</html>

‎index.html

+9-4
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,16 @@ <h1><a href="index.html">3D AABB collisions</a></h1>
2020
</p>
2121

2222
<nav>
23-
<h1>Demos</h1>
23+
<h1>Using THREE.js' AABB api</h1>
2424
<ul>
25-
<li><a href="point.html">Point vs Sphere and Box</a></li>
26-
<li><a href="sphere.html">Sphere vs Sphere and Box</a></li>
27-
<li><a href="box.html">Box vs Sphere and Box</a></li>
25+
<li><a href="api_point.html">Point vs Box</a></li>
26+
<li>Box vs Box</li>
27+
</ul>
28+
<h1>Using THREE.js' Box3 and Sphere</h1>
29+
<ul>
30+
<li>Point vs Box and Sphere</li>
31+
<li>Sphere vs Box and Sphere</li>
32+
<li>Box vs Box and Sphere</li>
2833
</ul>
2934
</nav>
3035

‎js/api_point.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
Game.init = function () {
2+
this.debug = false;
3+
4+
var dotGeo = new THREE.SphereGeometry(0.05);
5+
6+
this.knot = new THREE.Mesh(
7+
new THREE.TorusKnotGeometry(0.5, 0.1), this.materials.solid);
8+
this.knot.position.x = -3;
9+
this.knot.position.z = 1;
10+
this.knot.position.y = 2;
11+
this.knotBBox = new THREE.BoundingBoxHelper(this.knot, 0x00ff00);
12+
this.knotBBox.update();
13+
this.knotBBox.visible = false;
14+
15+
this.sphere = new THREE.Mesh(
16+
new THREE.SphereGeometry(1), this.materials.solid);
17+
this.sphere.position.x = 2;
18+
this.sphere.position.y = 2;
19+
this.sphereBBox = new THREE.BoundingBoxHelper(this.sphere, 0x00ff00);
20+
this.sphereBBox.update();
21+
this.sphereBBox.visible = false;
22+
23+
this.point = new THREE.Mesh(dotGeo, this.materials.dot);
24+
this.point.position.x = 0.5;
25+
this.point.position.z = 2;
26+
this.point.position.y = 1;
27+
this.pointShadow = Utils.createShadow(this.point, this.materials.shadow);
28+
29+
this.scene.add(this.point);
30+
this.scene.add(this.knot);
31+
this.scene.add(this.knotBBox);
32+
this.scene.add(this.sphere);
33+
this.scene.add(this.sphereBBox);
34+
// add fake shadows
35+
this.scene.add(Utils.createShadow(this.sphere, this.materials.shadow));
36+
this.scene.add(Utils.createShadow(this.knot, this.materials.shadow));
37+
this.scene.add(this.pointShadow);
38+
39+
this.controls = new THREE.TransformControls(
40+
this.camera, this.renderer.domElement);
41+
this.controls.space = 'world';
42+
this.controls.attach(this.point);
43+
this.scene.add(this.controls);
44+
};
45+
46+
Game.update = function (delta) {
47+
this.controls.update();
48+
Utils.updateShadow(this.pointShadow, this.point);
49+
50+
this.sphere.material = this.sphereBBox.box.containsPoint(this.point.position)
51+
? this.materials.colliding
52+
: this.materials.solid;
53+
54+
this.knot.material = this.knotBBox.box.containsPoint(this.point.position)
55+
? this.materials.colliding
56+
: this.materials.solid;
57+
};
58+
59+
Game.toggleDebug = function () {
60+
this.debug = !this.debug;
61+
this.knotBBox.visible = !!this.debug;
62+
this.sphereBBox.visible = !!this.debug;
63+
};kk

‎js/common.js

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
//
2+
// Game singleton
3+
//
4+
5+
var Game = {};
6+
7+
Game.run = function () {
8+
var WIDTH = 512;
9+
var HEIGHT = 512;
10+
11+
this._previousElapsed = 0;
12+
13+
// setup a WebGL renderer within an existing canvas
14+
var canvas = document.getElementById('demo');
15+
this.renderer = new THREE.WebGLRenderer({canvas: canvas});
16+
canvas.width = WIDTH;
17+
canvas.height = HEIGHT;
18+
this.renderer.setViewport(0, 0, WIDTH, HEIGHT);
19+
20+
// create the scene
21+
this.scene = new THREE.Scene();
22+
23+
// create an isometric camera
24+
this.camera = new THREE.OrthographicCamera(
25+
-5, 5, 5, -5, -1, 100);
26+
this.camera.position.z = 5;
27+
this.camera.position.y = 5;
28+
this.camera.position.x = 5;
29+
this.camera.lookAt(this.scene.position); // point at origin
30+
31+
// create ground and axis / grid helpers
32+
var ground = new THREE.Mesh(new THREE.PlaneGeometry(10, 10),
33+
new THREE.MeshBasicMaterial({color: 0xcccccc}));
34+
ground.rotation.x = -Math.PI / 2;
35+
ground.position.y = -0.01; // to avoid z-fighting with axis and shadows
36+
this.scene.add(ground);
37+
this.scene.add((new THREE.AxisHelper(8)));
38+
39+
40+
document.addEventListener('keyup', function (event) {
41+
if (event.keyCode === 27) { // listen for Esc Key
42+
event.preventDefault();
43+
this.toggleDebug();
44+
}
45+
}.bind(this));
46+
47+
// start up game
48+
this.init();
49+
window.requestAnimationFrame(this.tick);
50+
};
51+
52+
Game.tick = function (elapsed) {
53+
window.requestAnimationFrame(this.tick);
54+
55+
// compute delta time in seconds -- also cap it
56+
var delta = (elapsed - this._previousElapsed) / 1000.0;
57+
delta = Math.min(delta, 0.25); // maximum delta of 250 ms
58+
this._previousElapsed = elapsed;
59+
60+
this.update(delta);
61+
this.renderer.render(this.scene, this.camera);
62+
}.bind(Game);
63+
64+
// collection of materials used in the demos
65+
Game.materials = {
66+
shadow: new THREE.MeshBasicMaterial({
67+
color: 0x000000,
68+
transparent: true,
69+
opacity: 0.5
70+
}),
71+
solid: new THREE.MeshNormalMaterial({}),
72+
colliding: new THREE.MeshBasicMaterial({
73+
color: 0xff0000,
74+
transparent: true,
75+
opacity: 0.5
76+
}),
77+
dot: new THREE.MeshBasicMaterial({
78+
color: 0x0000ff
79+
})
80+
};
81+
82+
// override these methods to create the demo
83+
Game.init = function () {};
84+
Game.update = function (delta) {};
85+
Game.toggleDebug = function () {};
86+
87+
//
88+
// Utils
89+
//
90+
91+
var Utils = {};
92+
93+
Utils.createShadow = function (mesh, material) {
94+
var params = mesh.geometry.parameters;
95+
var geo = mesh.geometry.type === 'BoxGeometry'
96+
? new THREE.PlaneGeometry(params.width, params.height)
97+
: new THREE.CircleGeometry(params.radius, 24);
98+
99+
var shadow = new THREE.Mesh(geo, material);
100+
shadow.rotation.x = -Math.PI / 2;
101+
shadow.position.x = mesh.position.x;
102+
shadow.position.z = mesh.position.z;
103+
104+
return shadow;
105+
};
106+
107+
Utils.updateShadow = function (shadow, target) {
108+
shadow.position.x = target.position.x;
109+
shadow.position.z = target.position.z;
110+
shadow.visible = target.position.y >= 0;
111+
};
112+
113+
114+
//
115+
// main
116+
//
117+
118+
window.onload = function () {
119+
Game.run();
120+
};

0 commit comments

Comments
 (0)