Skip to content

Commit 3a67d04

Browse files
authored
Update building-3d-environments-threejs-pt-2.md
1 parent f315126 commit 3a67d04

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

en/drafts/originals/building-3d-environments-threejs-pt-2.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ In Part 1 of this lesson, you used three.js to create a website featuring a came
2828

2929
The model in Part 1 ([seen here in SketchFab](https://skfb.ly/putNM)), featured a selection of the over 100 vessel types historically made in the New Guinea region. Digital scenes with models of cultural heritage can visually convey information, such as similarities and differences in form across a geographical area. Annotating elements of the model using text (or media such as images), can increase the ability of digital models to convey information and ideas on the history and culture of a region or era.
3030

31-
The primary goal of Part 2 of this lesson is to teach how to use three.js to create a webpage featuring a 3D scene with selectable components. The lesson will involve creation of a simplified version of the Papua Jar model (featuring 6 jars) where the individual jars are selectable, and selecting a jar triggers the display of a panel with information about the language of the maker community, how the jar was made and what it was used for. As discussed in Part 1, there are other software tools to create such scenes. The advantage of using three.js (or other JavaScript libraries) and in working with the separate components of the model (i.e. the separate jar models), is that you have more flexibility and control over the scene. In this lesson you will create a colour key to show the viewer the technique the potters used to make the pot and this will allow you to see how you can change properties such as colour at the code level. Scene creation will involve adding lights, cameras, primitive models (such as spheres and planes), complex models (the pot forms), and controls. The models will be enhanced with additional materials and image textures (introduced in Part 1). To explain these steps, this lesson will introduce such concepts as 3D co-ordinates and model groupings, scale and visibility.
31+
The primary goal of Part 2 of this lesson is to teach how to use three.js to create a webpage featuring a 3D scene with selectable components. The lesson will involve creation of a simplified version of the Papua Jar model (featuring 6 jars) where the individual jars are selectable, and selecting a jar triggers the display of a panel with information about the language of the maker community, how the jar was made and what it was used for. As discussed in Part 1, there are other software tools to create such scenes. The advantage of using three.js (or other JavaScript libraries) and in working with the separate components of the model (i.e. the separate jar models), is that you have more flexibility and control over the scene. In this lesson you will create a colour key to show the viewer the technique the potters used to make the pot and this will allow you to see how you can change properties such as colour at the code level. Scene creation will involve adding lights, cameras, primitive models (such as spheres, and planes), complex models (the pot forms), and controls. The models will be enhanced with additional materials and image textures (introduced in Part 1). To explain these steps, this lesson will introduce such concepts as 3D co-ordinates and model groupings, scale and visibility.
3232

3333
An additional (optional) goal of Part 2 is to change the webpage into a game by making the models moveable. The interactive game makes the initial position of the jars randomly determined and requires the user to match the vessel to its maker community by moving it to the correct geographical position. You will learn how to set up a simple test in the code so that each time a model is moved, the application will verify if the model has been placed in the correct position associated with its provenance. Successful matches will be set to trigger a background colour change denoting the proper placement.
3434

@@ -78,7 +78,7 @@ You will remember from Part 1 that scenes have a camera, light(s) and models and
7878

7979
{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-03.png" alt="Scene mock-ups in z, x and y views." caption="Figure 3. Affinity Designer versions of the hand-drawn sketches for planning the game. Mock-ups of all 3 views are done, with rough coordinates and spacing for the scene assets (here the camera, light, the map, information panels and a key panel featuring 9 spheres, the jar/site positions, and the area in which the jars will randomly start in the game). Coordinates are x, y, z. Note that the light is off the scale in the y axis." %}
8080

81-
Mock-ups are good for identifying what assets (models and textures) you will need. In Part 1 you used 1 model which featured a geographical map and 29 jars, but in this lesson you will import the components of that model separately. For simplicity you will only work with 6 jar models but can add the other 23 at the end if you wish. You will also have 3 panels that show instructions, references and information on the jars. You will add 9 spheres to the panel on the right to form part of the colour key used for identifying how the jars were made by the potters. The middle gallery panel will provide instructions or information on the selected jar, so it will change depending on what jar is selected. Thus, there will actually be another 6 panels created but not initially visible. In the scene the jars will be placed on the map at the location in Papua New Guinea where they were made (this is indicated by the 'sites' in Figure 3). In the game the jars will start in an area above the map and the sites of construction will be indicated on the map by 6 tori (donuts). Tori can be harder for game users to select than discs, but many Papua New Guinea communities use tori made of leaves to hold the vessels as they are being made. You can see the Agarabi speaking potter Uneri Ankimpa using a torus-shaped kawe'aron [here](https://ars.els-cdn.com/content/image/1-s2.0-S0278416522000873-gr4_lrg.jpg) (image from Hardy et al 2023).
81+
Mock-ups are good for identifying what assets (models and textures) you will need. In Part 1 you used 1 model which featured a geographical map and 29 jars, but in this lesson you will import the components of that model separately. For simplicity you will only work with 6 jar models but can add the other 23 at the end if you wish. You will also have 3 panels that show instructions, references and information on the jars. You will add 9 spheres to the panel on the right to form part of the colour key used for identifying how the jars were made by the potters. The middle gallery panel will provide instructions or information on the selected jar, so it will change depending on what jar is selected. Thus, there will actually be another 6 panels created but not initially visible. In the scene the jars will be placed on the map at the location in Papua New Guinea where they were made (this is indicated by the 'sites' in Figure 3). In the game the jars will start in an area above the map and the sites of construction will be indicated on the map by 6 [tori](https://en.wikipedia.org/wiki/Torus) (the geometric shapes commonly known as donuts). Tori (the plugal of 'torus') can be harder for game users to select than discs, but many Papua New Guinea communities use tori made of leaves to hold the vessels as they are being made. You can see the Agarabi speaking potter Uneri Ankimpa using a torus-shaped kawe'aron [here](https://ars.els-cdn.com/content/image/1-s2.0-S0278416522000873-gr4_lrg.jpg) (image from Hardy et al 2023).
8282

8383
In the mock-ups, the x, y and z co-ordinates are given for the different components and rough measurements of distances between objects and their proportions. Planning your scene will help you identify where you will be using the same value repeatedly, such as the x and z positions of the key spheres. You can use variables for these values, so that it is easier to alter all instances together.
8484

0 commit comments

Comments
 (0)