commit 6354bc97fe20c743e868bf002dfbf4fd21b977a0 Author: Aaron Fenyes Date: Mon Oct 14 00:25:12 2024 -0700 Add templates and challenges used in workshop diff --git a/challenges/octahedron.html b/challenges/octahedron.html new file mode 100644 index 0000000..1aac7fb --- /dev/null +++ b/challenges/octahedron.html @@ -0,0 +1,133 @@ + + + + Octahedron challenge + + + + + + +

Octahedron challenge

Can you create something like this using Point3D and Polygon3D elements? Don’t worry about including the colors; they’re just to emphasize how the polygons fit together.

The create call for Polygon3D isn’t documented, but you can look at the polygon sampler for examples.

+ + + + + diff --git a/challenges/sphere-countours.html b/challenges/sphere-countours.html new file mode 100644 index 0000000..56acd77 --- /dev/null +++ b/challenges/sphere-countours.html @@ -0,0 +1,148 @@ + + + + Sphere contour challenge + + + + + + +

Sphere contour challenge

Can you create something like this using Sphere3D, Plane3D, and IntersectionCircle3D elements? Don’t worry about including the colors; they’re just to clarify what happens when you move the center of the sphere.

The visible attribute will come in handy.

Since the create call for Plane3D isn’t documented, I’ve included an example below.

+ +

How to create a 3D plane

A Plane3D is created from a base point and two vectors. The base point can be given either in coordinates or as a Point3D. The vectors are given in coordinates.

+ + + + + + + + diff --git a/templates/circle-sampler.html b/templates/circle-sampler.html new file mode 100644 index 0000000..d0a5e12 --- /dev/null +++ b/templates/circle-sampler.html @@ -0,0 +1,76 @@ + + + + 3D circle sampler + + + + + + +

3D circle sampler

+ +

A Circle3D element is created from a center, a normal vector, and a radius. The center can be given either in coordinates or as a Point3D. The normal vector is given in coordinates.

There’s another Circle3D example in the examples folder included with the source code.

+ + + + diff --git a/templates/glider-sampler.html b/templates/glider-sampler.html new file mode 100644 index 0000000..868e79f --- /dev/null +++ b/templates/glider-sampler.html @@ -0,0 +1,358 @@ + + + + 3D glider sampler + + + + + + +

3D glider sampler

+ +

Line glider

The large point is a glider on the line segment defined by the two small points. This template is based on the Line3D glider example in the examples folder included with the source code.

+ +

Intersection line glider

The large point is a glider on the line where the two planes intersect.

+ +

Circle glider

The point is a glider on the circle. This template is based on the Circle3D glider example in the examples folder included with the source code.

Right now, the glider gets caught on the point where the circle starts and ends. If you can overcome this limitation, try contributing some code!

+ +

Curve glider

The point is a glider on the curve. This template is based on the Curve3D glider example in the examples folder included with the source code.

+ +

Parametric surface glider

The point is a glider on the parametric surface. This template is based on the ParametricSurface3D glider example in the examples folder included with the source code.

+ + + + + + + + + + + + + + + + + diff --git a/templates/intersection-sampler.html b/templates/intersection-sampler.html new file mode 100644 index 0000000..f99022f --- /dev/null +++ b/templates/intersection-sampler.html @@ -0,0 +1,284 @@ + + + + 3D intersection sampler + + + + + + +

3D intersection sampler

+ +

Plane–plane

This template is based on the plane–plane intersection example in the examples folder included with the source code.

+ +

Plane–sphere

This template is based on the plane–sphere intersection example in the examples folder included with the source code.

+ +

Sphere–sphere

This template is based on the sphere–sphere intersection example in the examples folder included with the source code.

+ + + + + + + + + + + diff --git a/templates/polygon-sampler.html b/templates/polygon-sampler.html new file mode 100644 index 0000000..b84fe09 --- /dev/null +++ b/templates/polygon-sampler.html @@ -0,0 +1,404 @@ + + + + 3D polygon sampler + + + + + + +

3D polygon sampler

+ +

Creating a polygon

A polygon is created from a list of vertices. Each vertex is given either in coordinates or as a Point3D element. The vertices that are created from coordinates are styled according to the vertices attribute. The edges of the polygon are styled according to the borders attribute.

To make the layout of the vertices easier to see, I’ve set the view’s depthOrderPoints attribute to true. +

+ +

Mixing coordinates and `Point3D` elements

This example shows how you can mix coordinates and Point3D elements in a polygon’s vertex list.

+ +

Filling a polygon

You can set the fill and opacity of a 3D polygon just like you would with a 2D polygon. I recommend only filling polygons that are guaranteed to stay planar. In this example, the polygons are always planar because they’re triangles.

+ +

The pitalls of filling a non-planar polygon

Make the polygon below non-planar by dragging its vertices. This will probably make the fill look really weird from certain angles.

+ + + + + + + + + + + + + + diff --git a/templates/sphere-sampler.html b/templates/sphere-sampler.html new file mode 100644 index 0000000..3d41541 --- /dev/null +++ b/templates/sphere-sampler.html @@ -0,0 +1,227 @@ + + + + Sphere sampler + + + + + + +

Sphere sampler

+ +

Creating spheres

+ Right now, there are two ways to create a Sphere3D: +

Give its center and its radius.
Give its center a point on it.

+ Point data can be given either in coordinates or as a Point3D. +

+ +

Styling spheres

Here are some styling options for spheres and the points that define them.

+ + + + + + + + diff --git a/templates/view-demo.html b/templates/view-demo.html new file mode 100644 index 0000000..053f7bb --- /dev/null +++ b/templates/view-demo.html @@ -0,0 +1,252 @@ + + + + View options demo + + + + + + +

View options demo

+ +

Central projection; depth ordering for points

+ This demo shows how the new projection and depthOrderPoints options of a View3D affect the view. Use the controls to: +

Switch between parallel and central projection (projection set to 'parallel' and 'central', respectively).
Switch depth ordering of points on and off (depthOrderPoints set to true or false). +

+ To see what depth ordering does, rotate the view to make two points overlap, and then rotate again to switch which point is in front. +

+ Projection: + +

+ + Depth-order points +

+ +

Virtual trackball; bank angle slider

+ In the default orientation control mode, dragging the mouse changes the Tait-Bryan angles of the camera. +

Dragging horizontally changes the azimuth.
Dragging vertically changes the elevation.
As of version 1.9.2, doing a scroll gesture with the mouse button down changes the bank angle.

+ The Tait-Bryan angles can also be controlled with sliders, which are hidden by default. To show them, set the following attributes: +

az: {slider: {visible: true}}
el: {slider: {visible: true}}
bank: {slider: {visible: true}} (as of version 1.9.2)

+ Version 1.9.2 introduces a new orientation control mode: the virtual trackball. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the trackball attribute of the View3D to {enabled: true}. +

+ This demo is based on the virtual trackball example in the examples folder included with the source code. +

+ Orientation control: + +

+ + + + + + + +