Skip to content

Commit 258dbc8

Browse files
kjhollenkjhollen
authored
Merge pull request #1268 from aceslowman/3dBasicsTutorial
3d basics tutorial
2 parents 9473958 + 648c152 commit 258dbc8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+53827
-1205
lines changed

‎i18n-tracking.yml

Lines changed: 2270 additions & 1197 deletions
Large diffs are not rendered by default.

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>3D Camera 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: 14px;
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 5px;
31+
}
32+
33+
#controlsContainer {
34+
width: 250px;
35+
flex-grow: 2;
36+
}
37+
38+
#controlsContainer label {
39+
padding: 10px;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<div id="pageContainer">
46+
<div id="sketchContainer"></div>
47+
<div id="controlsContainer">
48+
<label>Ortho:
49+
<input id="cameraTypeOrtho" name="cameraType" type="radio" />
50+
</label>
51+
<label>Perspective:
52+
<input id="cameraTypePerspective" name="cameraType" type="radio" checked/>
53+
</label>
54+
55+
<label>camera fov: <input id="cameraFov" type="range" step="0.001" min="69" max="72.5" value="70"/></label>
56+
57+
<label>x position: <input id="cameraPosX" type="range" step="0.1" min="-500" max="500" value="200"/></label>
58+
<label>y position: <input id="cameraPosY" type="range" step="0.1" min="-500" max="500" value="-200"/></label>
59+
<label>z position: <input id="cameraPosZ" type="range" step="0.1" min="-500" max="500" value="200"/></label>
60+
61+
<p id="methodText"></p>
62+
</div>
63+
</div>
64+
</body>
65+
66+
</html>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
let fovSlider;
2+
let camPosX, camPosY, camPosZ;
3+
let cameraTypeOrtho, cameraTypePerspective;
4+
let methodText;
5+
6+
function setup() {
7+
let canvas = createCanvas(350, 350, WEBGL);
8+
canvas.parent('sketchContainer');
9+
10+
debugMode();
11+
12+
fovSlider = document.querySelector('#cameraFov');
13+
cameraTypeOrtho = document.querySelector('#cameraTypeOrtho');
14+
cameraTypePerspective = document.querySelector('#cameraTypePerspective');
15+
16+
camPosX = document.querySelector('#cameraPosX');
17+
camPosY = document.querySelector('#cameraPosY');
18+
camPosZ = document.querySelector('#cameraPosZ');
19+
20+
methodText = document.querySelector('#methodText');
21+
22+
describe(
23+
'an interactive sketch that allows you to move either an ortho camera or a perspective camera in 3D, as well as change the perspective camera FOV'
24+
);
25+
}
26+
27+
function draw() {
28+
background(220);
29+
30+
if (cameraTypeOrtho.checked) {
31+
camera(camPosX.value, camPosY.value, camPosZ.value);
32+
ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 800);
33+
} else if (cameraTypePerspective.checked) {
34+
camera(camPosX.value, camPosY.value, camPosZ.value);
35+
perspective(fovSlider.value);
36+
}
37+
38+
box(50);
39+
40+
methodText.innerHTML = cameraTypeOrtho.checked
41+
? 'ortho(); </br>'
42+
: 'perspective(' + parseFloat(fovSlider.value).toFixed(1) + '); </br>';
43+
methodText.innerHTML +=
44+
'<br />camera(' +
45+
parseFloat(camPosX.value).toFixed(1) +
46+
',' +
47+
parseFloat(camPosY.value).toFixed(1) +
48+
',' +
49+
parseFloat(camPosZ.value).toFixed(1) +
50+
');';
51+
52+
fovSlider.disabled = cameraTypeOrtho.checked;
53+
}

‎src/assets/learn/basic3d/images/2d3d_coordinates.png

58.6 KB
Loading

‎src/assets/learn/basic3d/images/cameraTypeIllustration.png

46.5 KB
Loading

‎src/assets/learn/basic3d/images/frustum_example.png

76.2 KB
Loading

‎src/assets/learn/basic3d/images/normals_face_example.png

35.2 KB
Loading

‎src/assets/learn/basic3d/images/primitives_example.png

113 KB
Loading

‎src/assets/learn/basic3d/images/simpleTexture.png

4.15 KB
Loading

‎src/assets/learn/basic3d/images/uv_example.png

9.06 KB
Loading

0 commit comments

Comments
 (0)