You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/data/en.yml
+15-9Lines changed: 15 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -370,19 +370,18 @@ learn:
370
370
getting-started-in-webgl-custom-geometry-title: Creating Custom Geometry in WebGL
371
371
getting-started-in-webgl-custom-geometry: Creating custom geometry in WebGL
372
372
getting-started-in-webgl-custom-geometry-p1x1: >-
373
-
p5.js has a number of 3D primitives that can be used to create basic shapes, like <a class="code">box()</a> or <a class="code">sphere()</a>, but p5.js
374
-
is also capable of rendering complex custom geometry, either from files that are created in other 3D software
375
-
(like Blender) or from code. This tutorial will walk through how to import 3D models into p5.js, as well as how
373
+
p5.js has a number of basic shapes, like <a class="code">box()</a> or <a class="code">sphere()</a>, but p5.js
374
+
is also capable of rendering complex custom geometry, both from 3D model files or from code. This tutorial will walk through how to import 3D models into p5.js, as well as how
href="{{root}}/reference/#/p5/endShape">endShape()</a>. This following example shows how
408
+
these methods can be used to construct a 3D shape mathematically.
409
409
getting-started-in-webgl-custom-geometry-p6x1: >-
410
-
There is also a powerful class, p5.Geometry, which p5 uses internally for <a class="code">loadModel()</a> but can also be used to
410
+
There is also a powerful class, <a class="code" href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>, which p5 uses internally for <a class="code">loadModel()</a> but can also be used to
411
411
define custom geometry, offering tools that can be helpful in calculating faces and normals.
412
+
getting-started-in-webgl-custom-geometry-p6x2: >-
413
+
In 3D, a face refers to a collection of three or four points that make up a surface, giving our
414
+
geometry the appearance of being solid. A normal is the direction that is perpendicular to the face, which helps p5.js calculate lighting across the surface.
415
+
getting-started-in-webgl-custom-geometry-p6x3: >-
416
+
In the following example, <a class="code">p5.Geometry</a> is used to plot the points for the geometry. Then, <a class="code">computeFaces()</a> is used to give the geometry
417
+
a solid appearance and <a class="code">computeNormals()</a> allows our geometry to have proper lighting.
alt="an illustration showing the the camera frustum, near plane, and far plane">
96
+
</div>
97
+
98
+
<p>Cameras can be moved by passing arguments to <aclass="code">camera()</a>, but constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with
82
99
ideas. p5.js has a special camera method, <aclass="code"
83
100
href="{{root}}/reference/#/p5/orbitControl">orbitControl()</a>, that can be used to zoom, pan,
84
101
and position the camera using the mouse.</p>
85
102
86
-
<p>The following camera methods are available in p5.js:</p>
<li>noLights() makes it so that all subsequent geometry is rendered without any lighting. This can be useful
191
193
when you want flat, unshaded geometry.</li>
@@ -196,45 +198,43 @@ function draw() {
196
198
<p>
197
199
These lights should be used within <aclass="code">draw()</a>. Up to 5 lights can be used in a scene
198
200
simultaneously,
199
-
allowing you to compose a scene with varied and complex lighting sources.
201
+
allowing you to compose a scene with varied and complex lighting sources. In the following sketch there are a number of different lights commented out. Try uncommenting them to see how the lights can be combined.
0 commit comments