Skip to content

Commit 39c035d

Browse files
jonathanjameswatsonjonathanjameswatson
committed
Added ray casting example
1 parent 7686392 commit 39c035d

File tree

3 files changed

+300
-0
lines changed

3 files changed

+300
-0
lines changed

‎src/data/examples/en/20_3D/05_ray_casting.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* @name Ray Casting
3+
* @description Original example by Jonathan Watson.
4+
* <br><br>Detecting the position of the mouse in 3D space with ray casting.
5+
*/
6+
const objects = [];
7+
let eyeZ;
8+
9+
function setup() {
10+
createCanvas(710, 400, WEBGL);
11+
12+
eyeZ = height / 2 / tan((30 * PI) / 180); // The default distance the camera is away from the origin.
13+
14+
objects.push(new IntersectPlane(1, 0, 0, -100, 0, 0)); // Left wall
15+
objects.push(new IntersectPlane(1, 0, 0, 100, 0, 0)); // Right wall
16+
objects.push(new IntersectPlane(0, 1, 0, 0, -100, 0)); // Bottom wall
17+
objects.push(new IntersectPlane(0, 1, 0, 0, 100, 0)); // Top wall
18+
objects.push(new IntersectPlane(0, 0, 1, 0, 0, 0)); // Back wall
19+
20+
noStroke();
21+
ambientMaterial(250);
22+
}
23+
24+
function draw() {
25+
background(0);
26+
27+
// Lights
28+
pointLight(255, 255, 255, 0, 0, 400);
29+
ambientLight(244, 122, 158);
30+
31+
// Left wall
32+
push();
33+
translate(-100, 0, 200);
34+
rotateY((90 * PI) / 180);
35+
plane(400, 200);
36+
pop();
37+
38+
// Right wall
39+
push();
40+
translate(100, 0, 200);
41+
rotateY((90 * PI) / 180);
42+
plane(400, 200);
43+
pop();
44+
45+
// Bottom wall
46+
push();
47+
translate(0, 100, 200);
48+
rotateX((90 * PI) / 180);
49+
plane(200, 400);
50+
pop();
51+
52+
// Top wall
53+
push();
54+
translate(0, -100, 200);
55+
rotateX((90 * PI) / 180);
56+
plane(200, 400);
57+
pop();
58+
59+
plane(200, 200); // Back wall
60+
61+
const x = mouseX - width / 2;
62+
const y = mouseY - height / 2;
63+
64+
const Q = createVector(0, 0, eyeZ); // A point on the ray and the default position of the camera.
65+
const v = createVector(x, y, -eyeZ); // The direction vector of the ray.
66+
67+
let intersect; // The point of intersection between the ray and a plane.
68+
let closestLambda = eyeZ * 10; // The draw distance.
69+
70+
for (let x = 0; x < objects.length; x += 1) {
71+
let object = objects[x];
72+
let lambda = object.getLambda(Q, v); // The value of lambda where the ray intersects the object
73+
74+
if (lambda < closestLambda && lambda > 0) {
75+
// Find the position of the intersection of the ray and the object.
76+
intersect = p5.Vector.add(Q, p5.Vector.mult(v, lambda));
77+
closestLambda = lambda;
78+
}
79+
}
80+
81+
// Cursor
82+
push();
83+
translate(intersect);
84+
fill(237, 34, 93);
85+
sphere(10);
86+
pop();
87+
}
88+
89+
// Class for a plane that extends to infinity.
90+
class IntersectPlane {
91+
constructor(n1, n2, n3, p1, p2, p3) {
92+
this.normal = createVector(n1, n2, n3); // The normal vector of the plane
93+
this.point = createVector(p1, p2, p3); // A point on the plane
94+
this.d = this.point.dot(this.normal);
95+
}
96+
97+
getLambda(Q, v) {
98+
return (-this.d - this.normal.dot(Q)) / this.normal.dot(v);
99+
}
100+
}

‎src/data/examples/es/20_3D/05_ray_casting.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* @name Ray Casting
3+
* @description Original example by Jonathan Watson.
4+
* <br><br>Detecting the position of the mouse in 3D space with ray casting.
5+
*/
6+
const objects = [];
7+
let eyeZ;
8+
9+
function setup() {
10+
createCanvas(710, 400, WEBGL);
11+
12+
eyeZ = height / 2 / tan((30 * PI) / 180); // The default distance the camera is away from the origin.
13+
14+
objects.push(new IntersectPlane(1, 0, 0, -100, 0, 0)); // Left wall
15+
objects.push(new IntersectPlane(1, 0, 0, 100, 0, 0)); // Right wall
16+
objects.push(new IntersectPlane(0, 1, 0, 0, -100, 0)); // Bottom wall
17+
objects.push(new IntersectPlane(0, 1, 0, 0, 100, 0)); // Top wall
18+
objects.push(new IntersectPlane(0, 0, 1, 0, 0, 0)); // Back wall
19+
20+
noStroke();
21+
ambientMaterial(250);
22+
}
23+
24+
function draw() {
25+
background(0);
26+
27+
// Lights
28+
pointLight(255, 255, 255, 0, 0, 400);
29+
ambientLight(244, 122, 158);
30+
31+
// Left wall
32+
push();
33+
translate(-100, 0, 200);
34+
rotateY((90 * PI) / 180);
35+
plane(400, 200);
36+
pop();
37+
38+
// Right wall
39+
push();
40+
translate(100, 0, 200);
41+
rotateY((90 * PI) / 180);
42+
plane(400, 200);
43+
pop();
44+
45+
// Bottom wall
46+
push();
47+
translate(0, 100, 200);
48+
rotateX((90 * PI) / 180);
49+
plane(200, 400);
50+
pop();
51+
52+
// Top wall
53+
push();
54+
translate(0, -100, 200);
55+
rotateX((90 * PI) / 180);
56+
plane(200, 400);
57+
pop();
58+
59+
plane(200, 200); // Back wall
60+
61+
const x = mouseX - width / 2;
62+
const y = mouseY - height / 2;
63+
64+
const Q = createVector(0, 0, eyeZ); // A point on the ray and the default position of the camera.
65+
const v = createVector(x, y, -eyeZ); // The direction vector of the ray.
66+
67+
let intersect; // The point of intersection between the ray and a plane.
68+
let closestLambda = eyeZ * 10; // The draw distance.
69+
70+
for (let x = 0; x < objects.length; x += 1) {
71+
let object = objects[x];
72+
let lambda = object.getLambda(Q, v); // The value of lambda where the ray intersects the object
73+
74+
if (lambda < closestLambda && lambda > 0) {
75+
// Find the position of the intersection of the ray and the object.
76+
intersect = p5.Vector.add(Q, p5.Vector.mult(v, lambda));
77+
closestLambda = lambda;
78+
}
79+
}
80+
81+
// Cursor
82+
push();
83+
translate(intersect);
84+
fill(237, 34, 93);
85+
sphere(10);
86+
pop();
87+
}
88+
89+
// Class for a plane that extends to infinity.
90+
class IntersectPlane {
91+
constructor(n1, n2, n3, p1, p2, p3) {
92+
this.normal = createVector(n1, n2, n3); // The normal vector of the plane
93+
this.point = createVector(p1, p2, p3); // A point on the plane
94+
this.d = this.point.dot(this.normal);
95+
}
96+
97+
getLambda(Q, v) {
98+
return (-this.d - this.normal.dot(Q)) / this.normal.dot(v);
99+
}
100+
}

‎src/data/examples/zh-Hans/20_3D/05_ray_casting.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* @name Ray Casting
3+
* @description Original example by Jonathan Watson.
4+
* <br><br>Detecting the position of the mouse in 3D space with ray casting.
5+
*/
6+
const objects = [];
7+
let eyeZ;
8+
9+
function setup() {
10+
createCanvas(710, 400, WEBGL);
11+
12+
eyeZ = height / 2 / tan((30 * PI) / 180); // The default distance the camera is away from the origin.
13+
14+
objects.push(new IntersectPlane(1, 0, 0, -100, 0, 0)); // Left wall
15+
objects.push(new IntersectPlane(1, 0, 0, 100, 0, 0)); // Right wall
16+
objects.push(new IntersectPlane(0, 1, 0, 0, -100, 0)); // Bottom wall
17+
objects.push(new IntersectPlane(0, 1, 0, 0, 100, 0)); // Top wall
18+
objects.push(new IntersectPlane(0, 0, 1, 0, 0, 0)); // Back wall
19+
20+
noStroke();
21+
ambientMaterial(250);
22+
}
23+
24+
function draw() {
25+
background(0);
26+
27+
// Lights
28+
pointLight(255, 255, 255, 0, 0, 400);
29+
ambientLight(244, 122, 158);
30+
31+
// Left wall
32+
push();
33+
translate(-100, 0, 200);
34+
rotateY((90 * PI) / 180);
35+
plane(400, 200);
36+
pop();
37+
38+
// Right wall
39+
push();
40+
translate(100, 0, 200);
41+
rotateY((90 * PI) / 180);
42+
plane(400, 200);
43+
pop();
44+
45+
// Bottom wall
46+
push();
47+
translate(0, 100, 200);
48+
rotateX((90 * PI) / 180);
49+
plane(200, 400);
50+
pop();
51+
52+
// Top wall
53+
push();
54+
translate(0, -100, 200);
55+
rotateX((90 * PI) / 180);
56+
plane(200, 400);
57+
pop();
58+
59+
plane(200, 200); // Back wall
60+
61+
const x = mouseX - width / 2;
62+
const y = mouseY - height / 2;
63+
64+
const Q = createVector(0, 0, eyeZ); // A point on the ray and the default position of the camera.
65+
const v = createVector(x, y, -eyeZ); // The direction vector of the ray.
66+
67+
let intersect; // The point of intersection between the ray and a plane.
68+
let closestLambda = eyeZ * 10; // The draw distance.
69+
70+
for (let x = 0; x < objects.length; x += 1) {
71+
let object = objects[x];
72+
let lambda = object.getLambda(Q, v); // The value of lambda where the ray intersects the object
73+
74+
if (lambda < closestLambda && lambda > 0) {
75+
// Find the position of the intersection of the ray and the object.
76+
intersect = p5.Vector.add(Q, p5.Vector.mult(v, lambda));
77+
closestLambda = lambda;
78+
}
79+
}
80+
81+
// Cursor
82+
push();
83+
translate(intersect);
84+
fill(237, 34, 93);
85+
sphere(10);
86+
pop();
87+
}
88+
89+
// Class for a plane that extends to infinity.
90+
class IntersectPlane {
91+
constructor(n1, n2, n3, p1, p2, p3) {
92+
this.normal = createVector(n1, n2, n3); // The normal vector of the plane
93+
this.point = createVector(p1, p2, p3); // A point on the plane
94+
this.d = this.point.dot(this.normal);
95+
}
96+
97+
getLambda(Q, v) {
98+
return (-this.d - this.normal.dot(Q)) / this.normal.dot(v);
99+
}
100+
}

0 commit comments

Comments
 (0)