Skip to content

Commit d758293

Browse files
aceslowmanaceslowman
committed
added new examples and new text to 3d basics tutorial
1 parent 7c7e04f commit d758293

17 files changed

+801
-303
lines changed

‎src/assets/learn/basic3d/cameraExample.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>3d Lighting Example</title>
5+
<script src="../../../assets/js/p5.min.js"></script>
6+
<!-- uncomment lines below to include extra p5 libraries -->
7+
<!--<script src="../addons/p5.sound.js"></script>-->
8+
<script src="cameraExample.js"></script>
9+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
10+
<style>
11+
body {
12+
padding: 0;
13+
margin: 0;
14+
font-family: monospace;
15+
font-size: 16px;
16+
background-color: #dcdcdc
17+
}
18+
19+
#pageContainer {
20+
display: flex;
21+
flex-wrap: wrap;
22+
justify-content: center;
23+
}
24+
25+
#pageContainer>div {
26+
display: flex;
27+
flex-direction: column;
28+
text-align: center;
29+
justify-content: space-evenly;
30+
margin: 0px 10px;
31+
}
32+
33+
#controlsContainer {
34+
width: 250px;
35+
flex-grow: 2;
36+
}
37+
38+
#controlsContainer label {
39+
padding: 15px;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<div id="pageContainer">
46+
<div id="sketchContainer"></div>
47+
<div id="controlsContainer">
48+
<label>Camera Type:
49+
<select id="cameraType">
50+
<option value="perspective" selected >perspective</option>
51+
<option value="ortho">ortho</option>
52+
</select>
53+
</label>
54+
<label>camera fov: <input id="cameraFov" type="range" step="0.001" min="69" max="72.5" value="70"/></label>
55+
</div>
56+
</div>
57+
</body>
58+
59+
</html>

‎src/assets/learn/basic3d/cameraExample.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
let fovSlider;
2+
let selectCameraType;
3+
let cameraType;
4+
5+
function setup() {
6+
let canvas = createCanvas(350, 350, WEBGL);
7+
canvas.parent("sketchContainer")
8+
9+
debugMode();
10+
11+
fovSlider = document.querySelector('#cameraFov')
12+
selectCameraType = document.querySelector('#cameraType')
13+
}
14+
15+
function draw() {
16+
background(220);
17+
camera(200,-200,200)
18+
19+
cameraType = selectCameraType.value;
20+
21+
if(cameraType === 'ortho') {
22+
ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
23+
} else {
24+
perspective(fovSlider.value)
25+
}
26+
27+
box(50);
28+
}
29+
30+
function cameraTypeChanged(e) {
31+
console.log(selectCameraType.value)
32+
}

‎src/assets/learn/basic3d/lightingExample.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>3d Lighting Example</title>
5+
<script src="../../../assets/js/p5.min.js"></script>
6+
<!-- uncomment lines below to include extra p5 libraries -->
7+
<!--<script src="../addons/p5.sound.js"></script>-->
8+
<script src="lightingExample.js"></script>
9+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
10+
<style>
11+
body {
12+
padding: 0;
13+
margin: 0;
14+
font-family: monospace;
15+
font-size: 16px;
16+
background-color: #dcdcdc
17+
}
18+
19+
#pageContainer {
20+
display: flex;
21+
flex-wrap: wrap;
22+
justify-content: center;
23+
}
24+
25+
#pageContainer>div {
26+
display: flex;
27+
flex-direction: column;
28+
text-align: center;
29+
justify-content: space-evenly;
30+
margin: 0px 10px;
31+
}
32+
33+
#controlsContainer {
34+
width: 250px;
35+
flex-grow: 2;
36+
}
37+
38+
#controlsContainer label {
39+
padding: 15px;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<div id="pageContainer">
46+
<div id="sketchContainer"></div>
47+
<div id="controlsContainer">
48+
<label>Light Type:
49+
<select id="lightType">
50+
<option value="ambient">ambient</option>
51+
<option value="directional">directional</option>
52+
<option value="spotlight">spotlight</option>
53+
<option value="point">point</option>
54+
</select>
55+
</label>
56+
57+
</div>
58+
</div>
59+
</body>
60+
61+
</html>

‎src/assets/learn/basic3d/lightingExample.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
let selectLightType;
2+
3+
function setup() {
4+
let canvas = createCanvas(350, 350, WEBGL);
5+
canvas.parent("sketchContainer")
6+
7+
debugMode();
8+
9+
selectLightType = document.querySelector('#lightType')
10+
}
11+
12+
function draw() {
13+
background(220);
14+
camera(200, -200, 200);
15+
16+
lightType = selectLightType.value;
17+
18+
switch (lightType) {
19+
case "ambient":
20+
ambientLight(50);
21+
break;
22+
case "directional":
23+
directionalLight(255, 0, 0, 0.25, 0.25, 0);
24+
break;
25+
case "spotlight":
26+
spotLight(0, 255, 0, 150, 0, 250, 0, 0, -1);
27+
break;
28+
case "point":
29+
// pointLight(0, 0, 255, locX, locY, 250);
30+
break;
31+
}
32+
33+
box(50);
34+
}

‎src/assets/learn/basic3d/materialsExample.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>3d Lighting Example</title>
5+
<script src="../../../assets/js/p5.min.js"></script>
6+
<!-- uncomment lines below to include extra p5 libraries -->
7+
<!--<script src="../addons/p5.sound.js"></script>-->
8+
<script src="materialsExample.js"></script>
9+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
10+
<style>
11+
body {
12+
padding: 0;
13+
margin: 0;
14+
font-family: monospace;
15+
font-size: 16px;
16+
background-color: #dcdcdc
17+
}
18+
19+
#pageContainer {
20+
display: flex;
21+
flex-wrap: wrap;
22+
justify-content: center;
23+
}
24+
25+
#pageContainer>div {
26+
display: flex;
27+
flex-direction: column;
28+
text-align: center;
29+
justify-content: space-evenly;
30+
margin: 0px 10px;
31+
}
32+
33+
#controlsContainer {
34+
width: 250px;
35+
flex-grow: 2;
36+
}
37+
38+
#controlsContainer label {
39+
padding: 15px;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<div id="pageContainer">
46+
<div id="sketchContainer"></div>
47+
<div id="controlsContainer">
48+
<label>Material Type:
49+
<select id="materialType">
50+
<option value="normalMaterial">normalMaterial</option>
51+
<option value="ambientMaterial">ambientMaterial</option>
52+
<option value="emissiveMaterial">emissiveMaterial</option>
53+
<option value="specularMaterial">specularMaterial</option>
54+
</select>
55+
</label>
56+
</div>
57+
</div>
58+
</body>
59+
60+
</html>

‎src/assets/learn/basic3d/materialsExample.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
let fovSlider;
2+
let selectMaterialType;
3+
let materialType;
4+
5+
function setup() {
6+
let canvas = createCanvas(350, 350, WEBGL);
7+
canvas.parent("sketchContainer")
8+
9+
debugMode();
10+
11+
selectMaterialType = document.querySelector('#materialType')
12+
}
13+
14+
function draw() {
15+
background(220);
16+
camera(200, -200, 200);
17+
18+
materialType = selectMaterialType.value;
19+
20+
let locX = mouseX - width / 2;
21+
let locY = mouseY - height / 2;
22+
pointLight(255, 255, 255, locX, locY, 50);
23+
24+
switch (materialType) {
25+
case "normalMaterial":
26+
normalMaterial();
27+
break;
28+
case "ambientMaterial":
29+
ambientMaterial(255, 0, 0);
30+
break;
31+
case "emissiveMaterial":
32+
emissiveMaterial(0, 255, 0);
33+
break;
34+
case "specularMaterial":
35+
specularMaterial(0, 0, 255);
36+
break;
37+
}
38+
39+
box(50);
40+
}

‎src/assets/learn/basic3d/rotateExample.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>3d Rotate Example</title>
5+
<script src="../../../assets/js/p5.min.js"></script>
6+
<!-- uncomment lines below to include extra p5 libraries -->
7+
<!--<script src="../addons/p5.sound.js"></script>-->
8+
<script src="rotateExample.js"></script>
9+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
10+
<style>
11+
body {
12+
padding: 0;
13+
margin: 0;
14+
font-family: monospace;
15+
font-size: 16px;
16+
background-color: #dcdcdc
17+
}
18+
19+
#pageContainer {
20+
display: flex;
21+
flex-wrap: wrap;
22+
justify-content: center;
23+
}
24+
25+
#pageContainer>div {
26+
display: flex;
27+
flex-direction: column;
28+
text-align: center;
29+
justify-content: space-evenly;
30+
margin: 0px 10px;
31+
}
32+
33+
#controlsContainer {
34+
width: 250px;
35+
flex-grow: 2;
36+
}
37+
38+
#controlsContainer label {
39+
padding: 15px;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<div id="pageContainer">
46+
<div id="sketchContainer"></div>
47+
<div id="controlsContainer">
48+
<label>x: <input id="xAxis" type="range" step="0.001" min="0" max="6.28318530718" /></label>
49+
<label>y: <input id="yAxis" type="range" step="0.001" min="0" max="6.28318530718" /></label>
50+
<label>z: <input id="zAxis" type="range" step="0.001" min="0" max="6.28318530718" /></label>
51+
52+
<p id="axisText"></p>
53+
</div>
54+
</div>
55+
</body>
56+
57+
</html>

0 commit comments

Comments
 (0)