diff --git a/_data/ph_authors.yml b/_data/ph_authors.yml
index b604a1141..cf11e1646 100644
--- a/_data/ph_authors.yml
+++ b/_data/ph_authors.yml
@@ -3516,3 +3516,17 @@
   bio:
     fr: |
       Clément Godbarge est maître de conférences en humanités numériques à l'Université de Saint Andrews en Écosse, Royaume-Uni.
+
+- name: Kristine Hardy
+  orcid: 0000-0003-1660-4477
+  team: false
+  bio:
+    en: |
+      Kristine Hardy is a PhD Student in the School of Archaeology and Anthropology at the Australian National University, Canberra, Australia. 
+
+- name: Mathieu Leclerc
+  orcid: 0000-0003-1093-802X
+  team: false
+  bio:
+    en: |
+     Mathieu Leclerc is a Lecturer in the School of Archaeology and Anthropology at the Australian National University, Canberra, Australia. 
diff --git a/assets/building-3d-environments-threejs-pt-1-2/index_pt1_complete.html b/assets/building-3d-environments-threejs-pt-1-2/index_pt1_complete.html
new file mode 100644
index 000000000..0f5448b0a
--- /dev/null
+++ b/assets/building-3d-environments-threejs-pt-1-2/index_pt1_complete.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--This is a html comment.  title tag gives the title of window -->
+		<title>PNG pottery</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ 		<!--Link to the style sheet -->
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<!--JavaScript. Get the three.js library files -->
+		<script type="importmap">
+            {
+              "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+              }
+            }
+        </script>
+	</head>
+	<body>
+        <!--Link to three.js page and some text. Text colours specified in main.css. Could be used for interactive page instructions. -->
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> The Jars of Papua
+		</div>
+        <!--JavaScript. Here is where the three.js code goes. -->
+		<script type="module">
+            // JavaScript comment
+
+            // Library imports
+			import * as THREE from 'three';
+            import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+            import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; // needed if draco compression on gltf
+            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+            // Variable declaration and setting
+	        let themodel;
+	        let piecescale = 1; // this allows experimenting with scaling
+	        let desk = 0.8; // the height of the model (metres), desk height in VR.
+	        let container, camera, scene, renderer, controls;
+
+            // Loader set up 
+            // Different model formats use different loaders
+            const loader = new GLTFLoader();
+	        const dracoLoader = new DRACOLoader();
+	        dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.160.0/examples/jsm/libs/draco/' );
+	        loader.setDRACOLoader( dracoLoader );
+
+	        // Function calls
+    	    init(); //initialise scene
+	        animate(); //updates scene by constant rendering. 
+
+	        // Function definitions
+            // Initialise scene: sets up container; scene; camera; renderer; lights; models; controls
+    	    function init() {
+                // make html div element and add to html document
+		        container = document.createElement( 'div' );
+		        document.body.appendChild( container );
+                // make scene and set background colour
+                scene = new THREE.Scene();
+		        scene.background = new THREE.Color( 0xf7d382 ); // use the hexcode of any colour you want.
+				// make camera, set its start position
+		        camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 ); //arguments are: vertical field of view, aspect, near plane, far plane
+		        camera.position.set( 0, 1.6, 3 ); // arguments: x, y, z. Approximates a persons eye level (designed for VR)
+                // add a hemisphere light and a directional light
+                scene.add( new THREE.HemisphereLight( 0xffffbb, 0x080820, .5) ); // arguments: sky colour, ground colour, intensity
+	            const light = new THREE.DirectionalLight( 0xffffff ); // argument: colour
+	            light.position.set( 1, 6, 2 ); // x, y, z 
+	            scene.add( light );
+
+                // load model
+                // function used for loader
+                function onLoadMap( gltf ) {                
+                    themodel = gltf.scene.children[0];
+                    themodel.position.set( 0, desk, 0);
+                    themodel.scale.set( piecescale, piecescale, piecescale);
+                    scene.add( themodel);
+	            }
+                // the loader is given the model file name (first argument) which is passed to the function (second argument), function to do while loading (3rd argument), function called if error (4th argument).
+	            loader.load( 'models/png_sceneDRACO.glb', onLoadMap, undefined, function ( error ) {console.error( error );} ); 
+	
+                // make renderer and use users browser window values to set pixel ratio and size
+        	    renderer = new THREE.WebGLRenderer( { antialias: true } );
+		        renderer.setPixelRatio( window.devicePixelRatio );
+		        renderer.setSize( window.innerWidth, window.innerHeight );
+        	    container.appendChild( renderer.domElement );
+
+                // create orbit controls
+                controls = new OrbitControls( camera, renderer.domElement);
+	            controls.target.set( 0, 1.6, 0 ); // sets the scene rotational centre
+	            controls.update(); // updates controls settings after creation
+                //controls.autoRotate = true; // set to true if camera is to rotate automatically BUT you must then call controls.update() in render function.
+
+                // add listeners. These check for user interaction with the window and  mouse clicks or drags and call the given function.
+                // listen for user browser window resizing and call the onWindowResize function that is defined below.
+       	 	    window.addEventListener( 'resize', onWindowResize );
+		    }
+
+            // function definitions
+            // Constant loop of rendering.
+	        function animate() {           
+		        renderer.setAnimationLoop( render );           
+	        }
+
+            // Called in loop by animate(), draws the scene in 2D as viewed by the camera at the camera's current position.
+	        function render() {
+                //controls.update(); // uncomment if controls.autoRotate = true
+		        renderer.render( scene, camera );
+	        }
+			 // called on resizing of window. Gets new browser window values and updates camera and renderer settings. Don't experiment with.
+	        function onWindowResize() {
+		        camera.aspect = window.innerWidth / window.innerHeight; 
+		        camera.updateProjectionMatrix();
+		        renderer.setSize( window.innerWidth, window.innerHeight );
+	        }
+		</script>
+	</body>
+</html>
diff --git a/assets/building-3d-environments-threejs-pt-1-2/index_pt2_game.html b/assets/building-3d-environments-threejs-pt-1-2/index_pt2_game.html
new file mode 100644
index 000000000..1bc9d6e86
--- /dev/null
+++ b/assets/building-3d-environments-threejs-pt-1-2/index_pt2_game.html
@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--This is a html comment.  title tag gives the title of window -->
+		<title>PNG pottery</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ 		<!--Link to the style sheet -->
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<!--JavaScript. Get the three.js library files -->
+		<script type="importmap">
+            {
+              "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+              }
+            }
+        </script>
+	</head>
+	<body>
+        <!--Link to three.js page and some text. Text colours specified in main.css. Could be used for interactive page instructions. -->
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> The Jars of Papua
+		</div>
+        <!--JavaScript. Here is where the three.js code goes. -->
+		<script type="module">
+            // JavaScript comment
+
+            // Library imports
+			import * as THREE from 'three';
+            import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+            import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; // needed if draco compression on gltf
+            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { DragControls } from 'three/addons/controls/DragControls.js';
+
+            // Variable declaration and setting
+			let raycasterM, pointer, selectedObj; // for mouse controls
+			let theMap;
+			let ratio = 2; 
+			let piecescale = ratio; 
+			let adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG; // information panels for the different jars
+			let selectedPlane;	// which information panel will be visible
+			let psize = 1.0; // panel dimensions
+			let gallery, gallery2, gallery3;
+			let container, camera, scene, renderer, controls, dragControls;
+			let jars, tori, unmoveable;
+			let selectedObject = null;
+			let truesite = null;
+			let aibomSite, dimiriSite, louisadeSite, mailuSite, adzeraSite, yabobSite;
+			let adzeraM, aibomM, mailuM, louisadeM, dimiriM, yabobM;
+			let desk = 0.8; // the height of the model (metres), desk height in VR.
+    		let gheight = desk + 0.55; //panel height		
+			let sphereposx = 0.84 // key sphere x position
+			let sphereposz = -0.75 // key sphere z position
+	        // colours for the key spheres and the jars
+			const parameters = { 
+  				materialColor: '#9c5315', // brown
+  				coilColor: '#ff0000', // red
+  				ringTopColor: '#19ffE7', // light blue
+  				coilBeatenColor: '#e8e337', // yellow
+  				nabColor: '#209F00',  // green
+  				wangelaColor: '#BEBEBE',  // light grey
+  				paddleColor: '#1e2f97', // dark blue		
+  				paddleAddColor: '#a61ef4', // purple
+  				amphColor: '#fc9483' // pink
+			}
+            // Loader set up 
+            // Different model formats use different loaders
+            const loader = new GLTFLoader();
+	        const dracoLoader = new DRACOLoader();
+	        dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.160.0/examples/jsm/libs/draco/' );
+	        loader.setDRACOLoader( dracoLoader );
+
+	        // Function calls
+    	    init(); //initialise scene
+	        animate(); //updates scene by constant rendering. 
+
+	        // Function definitions
+            // Initialise scene: sets up container; scene; camera; renderer; lights; models; controls
+    	    function init() {
+                // make html div element and add to html document
+		        container = document.createElement( 'div' );
+		        document.body.appendChild( container );
+                // make scene and set background colour
+                scene = new THREE.Scene();
+		        scene.background = new THREE.Color( 0xf7d382 ); // use the hexcode of any colour you want.
+				// make camera, set its start position
+		        camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 ); //arguments are: vertical field of view, aspect, near plane, far plane
+		        camera.position.set( 0, 1.6, 3 ); // arguments: x, y, z. Approximates a persons eye level (designed for VR)
+                // add a hemisphere light and a directional light
+                scene.add( new THREE.HemisphereLight( 0xffffbb, 0x080820, .5) ); // arguments: sky colour, ground colour, intensity
+	            const light = new THREE.DirectionalLight( 0xffffff ); // argument: colour
+	            light.position.set( 1, 6, 2 ); // x, y, z 
+	            scene.add( light );
+				
+				// add models
+				// add information panels, key panel and reference panel by loading textures then adding planes .
+				// load textures and generate Mipmaps
+				const textureLoader = new THREE.TextureLoader()
+				const introTexture = textureLoader.load( 'textures/Intro2.jpg' );
+				introTexture.generateMipmaps = true;
+				const refTexture = textureLoader.load( 'textures/sources.jpg' );
+				refTexture.generateMipmaps = true;			
+				const keyTexture = textureLoader.load( 'textures/key.jpg' );
+				keyTexture.generateMipmaps = true;
+				// add introduction information panel and set the selected panel to it
+				gallery = new THREE.Mesh( new THREE.PlaneGeometry( psize, psize  ), new THREE.MeshBasicMaterial({ map: introTexture }));
+				gallery.position.set( 0, gheight, sphereposz); 
+				selectedPlane = gallery;
+				// add the panel for the key
+				gallery2 = new THREE.Mesh(new THREE.PlaneGeometry( psize, psize ), new THREE.MeshBasicMaterial({ map: keyTexture }));
+				gallery2.position.set( 1.25, gheight, sphereposz); 
+				// add the panel for the references
+				gallery3 = new THREE.Mesh(new THREE.PlaneGeometry(psize, psize  ), new THREE.MeshBasicMaterial({ map: refTexture }));
+				gallery3.position.set( -1.25, gheight, sphereposz); 
+
+				scene.add( gallery, gallery2, gallery3);
+				selectedPlane = gallery; // start with the instructions.
+				
+				// add the jar information panels then make them not visible
+				function createGallery(filename){
+  					const aTexture = textureLoader.load( filename );
+  					aTexture.generateMipmaps = true;
+  					const model = new THREE.Mesh( new THREE.PlaneGeometry( psize, psize ), new THREE.MeshBasicMaterial({ map: aTexture }));
+  					model.position.set( 0, gheight, sphereposz); 
+  					model.visible = false;
+ 	 				return model;
+				}
+
+				// 'call' the createGallery function for the information panels/galleries.
+				adzeraG = createGallery('textures/Adzera.jpg');
+				aibomG = createGallery('textures/Aibom.jpg');
+				mailuG = createGallery('textures/Mailu.jpg');
+				dimiriG = createGallery('textures/Dimiri.jpg');
+				louisadeG= createGallery('textures/Louisade.jpg');
+				yabobG = createGallery('textures/Yabob.jpg');
+				scene.add(adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG);
+
+				// add the map of New Guinea
+				const mapGeometry = new THREE.PlaneGeometry( 3 * ratio, 1.5 * ratio );
+				const mapTexture = textureLoader.load('textures/png.png'); // from google maps
+				mapTexture.generateMipmaps = true // saves gpu if false
+				theMap = new THREE.Mesh( mapGeometry, new THREE.MeshBasicMaterial({ map: mapTexture }));
+				theMap.rotation.x = - Math.PI / 2; // Equal to 90 degrees
+				theMap.position.set( 0, desk, 0); // desk height
+				scene.add( theMap);
+
+
+				//spheres for key
+				const sphere = new THREE.SphereGeometry( 0.04, 15, 5); //radius, width segments, height segments in metres. Will be reused.
+
+				const sphere1 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.materialColor })); 
+				sphere1.position.set( sphereposx, gheight + 0.30, sphereposz); 
+
+				const sphere2 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.coilColor })); 
+				sphere2.position.set( sphereposx, gheight + 0.21, sphereposz); 
+
+				const sphere3 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.wangelaColor })); 
+				sphere3.position.set( sphereposx, gheight - 0.15, sphereposz); 
+
+				const sphere4 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.nabColor })); 
+				sphere4.position.set( sphereposx, gheight - 0.06, sphereposz); 
+
+				const sphere5 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.paddleAddColor})); 
+				sphere5.position.set( sphereposx, gheight - 0.35, sphereposz); 
+
+				const sphere6 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.coilBeatenColor})); 
+				sphere6.position.set( sphereposx, gheight + 0.03, sphereposz); 
+
+				const sphere7 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.amphColor })); 
+				sphere7.position.set( sphereposx, gheight - 0.44, sphereposz); 
+
+				const sphere8 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.paddleColor})); 
+				sphere8.position.set( sphereposx, gheight - 0.25, sphereposz); 
+
+				const sphere9 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.ringTopColor})); 
+				sphere9.position.set( sphereposx, gheight + 0.12, sphereposz); 
+
+				scene.add( sphere1, sphere2, sphere3, sphere4, sphere5, sphere6, sphere7, sphere8, sphere9 );
+				// add jar models. Added in group so they can be selected.
+				jars = new THREE.Group();
+				scene.add( jars );
+				// add unmoveable group for jars that have been put in the correct spot
+				unmoveable = new THREE.Group();
+				scene.add(unmoveable);  
+				// jar/site positions
+				// Add sites as tori, in a group
+				tori = new THREE.Group();
+				scene.add( tori );
+
+
+				// a function to make the site with the location and matching information panel
+				function createSite(x, z, gallery){
+					const model = new THREE.Mesh( new THREE.TorusGeometry( 0.015, 0.007, 20, 20 ), new THREE.MeshStandardMaterial({color: 0x006400}));
+					model.position.set( x * ratio, desk + 0.01, z * ratio);	
+					model.scale.set( piecescale, piecescale, piecescale);
+					model.rotation.x = -Math.PI * 1/2;
+					model.userData.planes = gallery;
+					return model;
+				}
+				aibomSite = createSite(0.36, -0.01, aibomG);
+				dimiriSite = createSite(0.43, 0, dimiriG);
+				louisadeSite = createSite(0.99, 0.59, louisadeG);
+				mailuSite = createSite(0.84, 0.48, mailuG);
+				adzeraSite = createSite(0.61, 0.15, adzeraG);
+				yabobSite = createSite(0.572, 0.0396, yabobG);
+				tori.add(aibomSite, mailuSite, dimiriSite, louisadeSite, adzeraSite, yabobSite);
+
+				//a function to make the model with the parameter specified
+				function createModel(gltf, site, col, gallery){
+ 	 				const model = gltf.scene.children[0];	
+  					model.material = new THREE.MeshStandardMaterial();
+  					model.material.color.set(col);
+  					model.scale.set(piecescale, piecescale, piecescale);				
+					model.position.set( Math.random() - 1, 1.2, Math.random() * 0.5 - 0.3 );
+					model.userData.site = site;
+  					model.userData.planes = gallery;
+  					return model;
+				}
+				
+				// directly has the onLoad function as an anonymous function in the loader.load
+				// load a jar (filename, load function, function while loading, error function)
+				loader.load( 'models/aibom.glb', function( gltf ) {							
+  					aibomM = createModel(gltf, aibomSite, parameters.materialColor, aibomG);			
+  					jars.add(aibomM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/mailu.glb', function( gltf) {							
+  					mailuM = createModel(gltf, mailuSite, parameters.nabColor, mailuG);			
+  					jars.add(mailuM);
+					}, undefined, function ( error ) { console.error( error );} );
+
+				loader.load( 'models/louisade.glb', function( gltf ) {
+  					louisadeM = createModel(gltf, louisadeSite, parameters.ringTopColor, louisadeG);			
+  					jars.add(louisadeM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/adzera.glb', function( gltf ) {
+  					adzeraM = createModel(gltf, adzeraSite, parameters.coilBeatenColor, adzeraG);			
+  					jars.add(adzeraM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/dimiri.glb', function( gltf ) {
+  					dimiriM = createModel(gltf, dimiriSite, parameters.coilColor, dimiriG);			
+  					jars.add(dimiriM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/yabob.glb', function( gltf ) {
+  					yabobM = createModel(gltf, yabobSite, parameters.paddleColor, yabobG);			
+  					jars.add(yabobM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+                // make renderer and use users browser window values to set pixel ratio and size
+        	    renderer = new THREE.WebGLRenderer( { antialias: true } );
+		        renderer.setPixelRatio( window.devicePixelRatio );
+		        renderer.setSize( window.innerWidth, window.innerHeight );
+        	    container.appendChild( renderer.domElement );
+
+                // create orbit controls
+                controls = new OrbitControls( camera, renderer.domElement);
+	            controls.target.set( 0, 1.6, 0 ); // sets the scene rotational centre
+	            controls.update(); // updates controls settings after creation
+                // controls.autoRotate = true; // set to true if camera is to rotate automatically BUT you must then call controls.update() in render function.
+
+				// Mouse controls for object selection
+				raycasterM = new THREE.Raycaster(); // ray to tell what is being pointed at
+    			pointer = new THREE.Vector2(); 
+				// Mouse controls for jar dragging
+				dragControls = new DragControls( [ jars ], camera, renderer.domElement );			
+				selectedObj = new THREE.Mesh( new THREE.TorusGeometry( 0.015, 0.007, 20, 20  ), new THREE.MeshStandardMaterial({color: 0x006400})); // initialising the selected jar with something- here a torus, to prevent issues.
+
+				
+                // add listeners. These check for user interaction with the window and  mouse clicks or drags and call the given function.
+                // listen for user browser window resizing and call the onWindowResize function that is defined below.
+       	 	    window.addEventListener( 'resize', onWindowResize );
+				window.addEventListener( 'click', onClick );
+				dragControls.addEventListener('dragstart', function (event) {
+					controls.enabled = false // turn off the orbiting controls while dragging
+				})
+				// at the end of the drag event a test is done to see if the jar has been put in the correct spot
+				// a correct match is marked by a background colour change
+				dragControls.addEventListener('dragend', function (event) {
+        			controls.enabled = true // turn the orbiting controls back on when dragging done
+					selectedObject = event.object;
+					truesite = selectedObject.userData.site;
+					let testposition = new THREE.Vector3(0,0,0); //needs to be something first
+					truesite.getWorldPosition( testposition ); //a Vector3 (x,y,z)
+					let aposition = selectedObject.position; //way 1 test object position					
+					if ( aposition.distanceTo( testposition ) < .025 * ratio) {
+						scene.background = new THREE.Color( Math.random() * 0xffffff ); // random
+						selectedObject.position.set(testposition.x, testposition.y, testposition.z);
+						unmoveable.attach( selectedObject); // adding to the unmoveable group will remove from the jar group.
+					}	
+				})	
+		    }
+            // Constant loop of rendering.
+	        function animate() {           
+		        renderer.setAnimationLoop( render );   
+	        }
+            // Called in loop by animate(), draws the scene in 2D as viewed by the camera at the camera's current position.
+	        function render() {
+                //controls.update(); // uncomment if controls.autoRotate = true
+		        renderer.render( scene, camera );
+	        }
+            // function definitions
+            // called on resizing of window. Gets new browser window values and updates camera and renderer settings. Don't experiment with.
+	        function onWindowResize() {
+		        camera.aspect = window.innerWidth / window.innerHeight; 
+		        camera.updateProjectionMatrix();
+		        renderer.setSize( window.innerWidth, window.innerHeight );
+	        }
+
+			// called on mouse click. Gets position of click, gets intersecting object, makes it emmisive gets the matching info plane
+			// will also test if the jar is in right spot as onClick called at the end of drag event
+			function onClick( event ) {
+				event.preventDefault(); //stops the orbiting
+				// gets 2D click position
+				pointer.x = event.clientX / window.innerWidth * 2 - 1 
+				pointer.y = - (event.clientY / window.innerHeight) * 2 + 1
+				// detects what the user is trying to select in 3D space from viewpoint and 2D pointer
+				raycasterM.setFromCamera( pointer, camera );
+				const intersects = raycasterM.intersectObjects( tori.children);
+				// if there is a jar being clicked		
+				if(intersects.length > 0){
+					selectedObj.material.emissive.r = 0; // turn the current selected obj back to not emissive
+					selectedPlane.visible = false; // hide the current information panel
+					const found = intersects[ 0 ].object; // get the selected jar
+					if(found == truesite){ // tests if site mouse is over is the same as the true jar site
+						scene.background = new THREE.Color( Math.random() * 0xffffff ); // random
+						let testposition = new THREE.Vector3(0,0,0); //needs to be something first
+						truesite.getWorldPosition( testposition ); //a Vector3 (x,y,z) this is the position of the site
+						selectedObject.position.set(testposition.x, testposition.y, testposition.z);
+						unmoveable.attach( selectedObject );
+					}
+					selectedObj = found;
+					found.material.emissive.r = 1; // turn the selected jar red emissive				
+					selectedPlane = found.userData.planes; // get the new matching information panel for the selected jar
+					selectedPlane.visible = true; // make the new panel visible
+				}
+				truesite = null;
+			}	
+
+		</script>
+	</body>
+</html>
diff --git a/assets/building-3d-environments-threejs-pt-1-2/index_pt2_scene.html b/assets/building-3d-environments-threejs-pt-1-2/index_pt2_scene.html
new file mode 100644
index 000000000..170124281
--- /dev/null
+++ b/assets/building-3d-environments-threejs-pt-1-2/index_pt2_scene.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--This is a html comment.  title tag gives the title of window -->
+		<title>PNG pottery</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ 		<!--Link to the style sheet -->
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<!--JavaScript. Get the three.js library files -->
+		<script type="importmap">
+            {
+              "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+              }
+            }
+        </script>
+	</head>
+	<body>
+        <!--Link to three.js page and some text. Text colours specified in main.css. Could be used for interactive page instructions. -->
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> The Jars of Papua
+		</div>
+        <!--JavaScript. Here is where the three.js code goes. -->
+		<script type="module">
+            // JavaScript comment
+
+            // Library imports
+			import * as THREE from 'three';
+            import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+            import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; // needed if draco compression on gltf
+            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+            // Variable declaration and setting
+			let raycasterM, pointer, selectedObj; // for mouse controls
+			let theMap;
+			let ratio = 2; 
+			let piecescale = ratio; 
+			let adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG; // information panels for the different jars
+			let selectedPlane;	// which information panel will be visible
+			let psize = 1.0; // panel dimensions
+			let gallery, gallery2, gallery3; 
+ 			let container, camera, scene, renderer, controls;
+			let jars;
+			let aibomSite, dimiriSite, louisadeSite, mailuSite, adzeraSite, yabobSite;
+			let adzeraM, aibomM, mailuM, louisadeM, dimiriM, yabobM;
+			let desk = 0.8; // the height of the model (metres), desk height in VR.
+    		let gheight = desk + 0.55; //panel height
+			let sphereposx = 0.84 // key sphere x position
+			let sphereposz = -0.75 // key sphere z position
+	       // colours for the key spheres and the jars
+			const parameters = { 
+ 				materialColor: '#9c5315', // brown
+  				coilColor: '#ff0000', // red
+  				ringTopColor: '#19ffE7', // light blue
+  				coilBeatenColor: '#e8e337', // yellow
+  				nabColor: '#209F00',  // green
+  				wangelaColor: '#BEBEBE',  // light grey
+  				paddleColor: '#1e2f97', // dark blue		
+  				paddleAddColor: '#a61ef4', // purple
+  				amphColor: '#fc9483' // pink
+			}
+            // Loader set up 
+            // Different model formats use different loaders
+            const loader = new GLTFLoader();
+	        const dracoLoader = new DRACOLoader();
+	        dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.160.0/examples/jsm/libs/draco/' );
+	        loader.setDRACOLoader( dracoLoader );
+
+	        // Function calls
+    	    init(); //initialise scene
+	        animate(); //updates scene by constant rendering. 
+
+	        // Function definitions
+            // Initialise scene: sets up container; scene; camera; renderer; lights; models; controls
+    	    function init() {
+                // make html div element and add to html document
+		        container = document.createElement( 'div' );
+		        document.body.appendChild( container );
+                // make scene and set background colour
+                scene = new THREE.Scene();
+		        scene.background = new THREE.Color( 0xf7d382 ); // use the hexcode of any colour you want.
+				// make camera, set its start position
+		        camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 ); //arguments are: vertical field of view, aspect, near plane, far plane
+		        camera.position.set( 0, 1.6, 3 ); // arguments: x, y, z. Approximates a persons eye level (designed for VR)
+                // add a hemisphere light and a directional light
+                scene.add( new THREE.HemisphereLight( 0xffffbb, 0x080820, .5) ); // arguments: sky colour, ground colour, intensity
+	            const light = new THREE.DirectionalLight( 0xffffff ); // argument: colour
+	            light.position.set( 1, 6, 2 ); // x, y, z 
+	            scene.add( light );
+				
+				// add models
+				// add information panels, key panel and reference panel by loading textures then adding planes .
+				// load textures and generate Mipmaps
+				const textureLoader = new THREE.TextureLoader()
+				const introTexture = textureLoader.load( 'textures/Intro.jpg' );
+				introTexture.generateMipmaps = true;
+				const refTexture = textureLoader.load( 'textures/sources.jpg' );
+				refTexture.generateMipmaps = true;			
+				const keyTexture = textureLoader.load( 'textures/key.jpg' );
+				keyTexture.generateMipmaps = true;
+
+				// add introduction information panel
+				gallery = new THREE.Mesh( new THREE.PlaneGeometry(psize, psize), new THREE.MeshBasicMaterial({ map: introTexture }));
+				gallery.position.set( 0, gheight, sphereposz); 
+				// add the panel for the key
+				gallery2 = new THREE.Mesh(new THREE.PlaneGeometry(psize, psize), new THREE.MeshBasicMaterial({ map: keyTexture }));
+				gallery2.position.set( 1.25, gheight, sphereposz); 
+				// add the panel for the references
+				gallery3 = new THREE.Mesh(new THREE.PlaneGeometry(psize, psize), new THREE.MeshBasicMaterial({ map: refTexture }));
+				gallery3.position.set( -1.25, gheight, sphereposz); 
+
+				scene.add( gallery, gallery2, gallery3);
+				selectedPlane = gallery; // start with the instructions.
+				// add the jar information panels then make them not visible
+				function createGallery(filename){
+  					const aTexture = textureLoader.load( filename );
+  					aTexture.generateMipmaps = true;
+  					const model = new THREE.Mesh( new THREE.PlaneGeometry( psize, psize ), new THREE.MeshBasicMaterial({ map: aTexture }));
+  					model.position.set( 0, gheight, sphereposz); 
+  					model.visible = false;
+  					return model;
+				}
+
+				// 'call' the createGallery function for the information panels/galleries.
+				adzeraG = createGallery('textures/Adzera.jpg');
+				aibomG = createGallery('textures/Aibom.jpg');
+				mailuG = createGallery('textures/Mailu.jpg');
+				dimiriG = createGallery('textures/Dimiri.jpg');
+				louisadeG= createGallery('textures/Louisade.jpg');
+				yabobG = createGallery('textures/Yabob.jpg');
+				scene.add(adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG);
+
+				// add the map of New Guinea
+				const mapGeometry = new THREE.PlaneGeometry( 3 * ratio, 1.5 * ratio );
+				const mapTexture = textureLoader.load('textures/png.png'); // from google maps
+				mapTexture.generateMipmaps = true
+				const theMap = new THREE.Mesh( mapGeometry, new THREE.MeshBasicMaterial({ map: mapTexture }));
+				theMap.rotation.x = - Math.PI / 2; // Equal to 90 degrees
+				theMap.position.set( 0, desk, 0); // desk height
+				scene.add(theMap);
+
+				// add key for jar colours using spheres and a plane
+				//spheres for key
+				const sphere = new THREE.SphereGeometry( 0.04, 15, 5); //radius in metres, width segments, height segments. Will be reused.
+				const sphere1 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.materialColor })); 
+				sphere1.position.set( sphereposx, gheight + 0.30, sphereposz);
+				const sphere2 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.coilColor })); 
+				sphere2.position.set( sphereposx, gheight + 0.21, sphereposz);
+				const sphere3 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.ringTopColor})); 
+				sphere3.position.set( sphereposx, gheight + 0.12, sphereposz);
+				const sphere4 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.coilBeatenColor})); 
+				sphere4.position.set( sphereposx, gheight + 0.03, sphereposz); 
+				const sphere5 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.nabColor })); 
+				sphere5.position.set( sphereposx, gheight - 0.06, sphereposz); 
+				const sphere6 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.wangelaColor })); 
+				sphere6.position.set( sphereposx, gheight - 0.15, sphereposz); 
+				const sphere7 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.paddleColor})); 
+				sphere7.position.set( sphereposx, gheight - 0.25, sphereposz); 
+				const sphere8 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.paddleAddColor})); 
+				sphere8.position.set( sphereposx, gheight - 0.35, sphereposz); 
+				const sphere9 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.amphColor })); 
+				sphere9.position.set( sphereposx, gheight - 0.44, sphereposz); 
+				scene.add( sphere1, sphere2, sphere3, sphere4, sphere5, sphere6, sphere7, sphere8, sphere9 );
+				
+				// add jar models. Added in group so they can be selected.
+				jars = new THREE.Group();
+				scene.add( jars );
+
+				// jar/site positions
+				aibomSite = { x: 0.36, z : -0.01 }
+				mailuSite = { x: 0.84, z : 0.48 }
+				louisadeSite = { x: 0.99, z : 0.59 }
+				adzeraSite = { x: 0.61, z : 0.15 }
+				dimiriSite = { x: 0.43, z : 0 }
+				yabobSite = { x: 0.572, z :  0.0396 }
+				
+				//a function to make the model with the parameter specified
+				function createModel(gltf, site, col, gallery){
+ 			 		const model = gltf.scene.children[0];	
+  					model.material = new THREE.MeshStandardMaterial();
+  					model.material.color.set(col);
+  					model.scale.set(piecescale, piecescale, piecescale);				
+  					model.position.set(site.x * ratio, desk + 0.01, site.z * ratio);	
+  					model.userData.planes = gallery;
+  					return model;
+				}
+			
+				// directly has the onLoad function as an anonymous function in the loader.load
+				// load a jar (filename, load function, function while loading, error function)
+				loader.load( 'models/aibom.glb', function( gltf ) {							
+  						aibomM = createModel(gltf, aibomSite, parameters.materialColor, aibomG);			
+  						jars.add(aibomM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/mailu.glb', function( gltf) {							
+  						mailuM = createModel(gltf, mailuSite, parameters.nabColor, mailuG);			
+  						jars.add(mailuM);
+					}, undefined, function ( error ) { console.error( error );} );
+
+				loader.load( 'models/louisade.glb', function( gltf ) {
+  						louisadeM = createModel(gltf, louisadeSite, parameters.ringTopColor, louisadeG);			
+  						jars.add(louisadeM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/adzera.glb', function( gltf ) {
+  					adzeraM = createModel(gltf, adzeraSite, parameters.coilBeatenColor, adzeraG);			
+  					jars.add(adzeraM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/dimiri.glb', function( gltf ) {
+  					dimiriM = createModel(gltf, dimiriSite, parameters.coilColor, dimiriG);			
+  					jars.add(dimiriM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+				loader.load( 'models/yabob.glb', function( gltf ) {
+  					yabobM = createModel(gltf, yabobSite, parameters.paddleColor, yabobG);			
+  					jars.add(yabobM);
+					}, undefined, function ( error ) {console.error( error );} );
+
+                // make renderer and use users browser window values to set pixel ratio and size
+        	    renderer = new THREE.WebGLRenderer( { antialias: true } );
+		        renderer.setPixelRatio( window.devicePixelRatio );
+		        renderer.setSize( window.innerWidth, window.innerHeight );
+        	    container.appendChild( renderer.domElement );
+
+                // create orbit controls
+                controls = new OrbitControls( camera, renderer.domElement);
+	            controls.target.set( 0, 1.6, 0 ); // sets the scene rotational centre
+	            controls.update(); // updates controls settings after creation
+                // controls.autoRotate = true; // set to true if camera is to rotate automatically BUT you must then call controls.update() in render function.
+
+				// Mouse controls for jar selection
+				raycasterM = new THREE.Raycaster(); // ray to tell what is being pointed at
+    			pointer = new THREE.Vector2(); 
+				selectedObj = new THREE.Mesh( new THREE.TorusGeometry( 0.015, 0.007, 20, 20  ), new THREE.MeshStandardMaterial({color: 0x006400})); 
+
+                // add listeners. These check for user interaction with the window and  mouse clicks or drags and call the given function.
+                // listen for user browser window resizing and call the onWindowResize function that is defined below.
+       	 	    window.addEventListener( 'resize', onWindowResize );
+				window.addEventListener( 'click', onClick );
+		    }
+
+            // function definitions
+            // called on resizing of window. Gets new browser window values and updates camera and renderer settings. Don't experiment with.
+	        function onWindowResize() {
+		        camera.aspect = window.innerWidth / window.innerHeight; 
+		        camera.updateProjectionMatrix();
+		        renderer.setSize( window.innerWidth, window.innerHeight );
+	        }
+            // Constant loop of rendering.
+	        function animate() {           
+		        renderer.setAnimationLoop( render );             
+	        }
+
+            // Called in loop by animate(), draws the scene in 2D as viewed by the camera at the camera's current position.
+	        function render() {
+                //controls.update(); // uncomment if controls.autoRotate = true
+		        renderer.render( scene, camera );
+	        }
+			
+			// called on mouse click. Gets position of click, gets intersecting object, makes it emmisive gets the matching info plane
+			function onClick( event ) {
+				event.preventDefault(); //stops the orbiting
+				// gets 2D click position
+				pointer.x = event.clientX / window.innerWidth * 2 - 1 
+				pointer.y = - (event.clientY / window.innerHeight) * 2 + 1
+				// detects what the user is trying to select in 3D space from viewpoint and 2D pointer
+				raycasterM.setFromCamera( pointer, camera );
+				const intersects = raycasterM.intersectObjects( jars.children);
+				// if there is a jar being clicked		
+				if(intersects.length > 0){
+					selectedObj.material.emissive.r = 0; // turn the current selected obj back to not emissive
+					selectedPlane.visible = false; // hide the current information panel
+					const found = intersects[ 0 ].object; // get the selected jar
+					selectedObj = found;
+					found.material.emissive.r = 1; // turn the selected jar red emissive
+					selectedPlane = found.userData.planes; // get the new matching information panel for the selected jar
+					selectedPlane.visible = true; // make the new panel visible
+				}
+			}	
+
+		</script>
+	</body>
+</html>
diff --git a/assets/building-3d-environments-threejs-pt-1-2/main.css b/assets/building-3d-environments-threejs-pt-1-2/main.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/assets/building-3d-environments-threejs-pt-1-2/models.zip b/assets/building-3d-environments-threejs-pt-1-2/models.zip
new file mode 100644
index 000000000..1996e6ebd
Binary files /dev/null and b/assets/building-3d-environments-threejs-pt-1-2/models.zip differ
diff --git a/assets/building-3d-environments-threejs-pt-1-2/png_sceneDRACO.glb b/assets/building-3d-environments-threejs-pt-1-2/png_sceneDRACO.glb
new file mode 100644
index 000000000..c043c4a61
Binary files /dev/null and b/assets/building-3d-environments-threejs-pt-1-2/png_sceneDRACO.glb differ
diff --git a/assets/building-3d-environments-threejs-pt-1-2/textures.zip b/assets/building-3d-environments-threejs-pt-1-2/textures.zip
new file mode 100644
index 000000000..98445587d
Binary files /dev/null and b/assets/building-3d-environments-threejs-pt-1-2/textures.zip differ
diff --git a/en/lessons/building-3d-environments-threejs-pt-1.md b/en/lessons/building-3d-environments-threejs-pt-1.md
new file mode 100644
index 000000000..3e9d8ec38
--- /dev/null
+++ b/en/lessons/building-3d-environments-threejs-pt-1.md
@@ -0,0 +1,826 @@
+---
+title: "Building Interactive Environments for 3D Models with three.js (Part 1)"
+slug: building-3d-environments-threejs-pt-1
+layout: lesson
+collection: lessons
+date: 2026-10-26
+authors:
+- Kristine Hardy
+- Mathieu Leclerc
+reviewers:
+- Jessica C. Linker
+- Steffen Bauer
+editors:
+- Massimiliano Carloni
+review-ticket: https://github.com/programminghistorian/ph-submissions/issues/607
+difficulty: 2
+activity: presenting
+topics: [website, creative-coding]
+abstract: This two-part lesson series shows how to use the three.js JavaScript library to create websites featuring 3D models that can be interactively viewed, selected, and even turned into a simple game. In Part 1, you will learn how to create a website featuring a 3D model that illustrates the rich diversity of ceramics across the Papua New Guinea region, while considering key aspects of working with cultural heritage materials.
+avatar_alt: An illustration of a round, textured ceramic pot with a wide opening, decorative geometric patterns, and three short, stubby feet.
+doi: 10.46430/phen0136
+sequence: 1
+next: building-3d-environments-threejs-pt-2
+series_total: 2 lessons
+---
+
+{% include toc.html %}
+
+## Introduction
+
+Advances in computing continue to increase our ability to display 3D models on websites, create virtual museums, and make heritage information more accessible. The use of interactive 3D models on websites enables examples of archaeological and historical material culture to be presented more effectively. 3D models are generally more engaging than 2D images, largely because the extra dimension encourages user interaction. The act of moving around a model and choosing which areas to examine and learn more about creates a more personalised experience, contributing to the user forming a relationship with the model. This relationship can be further strengthened if the model can be manipulated or incorporated into a game, especially a puzzle. Puzzles increase the amount of time users spend with a model and can encourage them to notice details they might otherwise overlook. The sense of achievement that comes from solving a puzzle can also help strengthen a positive relationship with a model and its subject.
+
+This lesson is the first in a two-part series that introduces [three.js](https://threejs.org) (a JavaScript library) as a tool for creating engaging digital research outputs using 3D models. Together, the lessons show how to use three.js to create a website and (optionally) a game, ‘The Jars of Papua’, featuring interactive 3D models that illustrate the diversity of pottery technologies across communities in the Papua New Guinea region. In this lesson, Part 1, you will learn about the basic components of 3D models and how to use three.js to create a website featuring a 3D model of multiple ceramic vessels (such as pots or jars) displayed on a map of Papua New Guinea. [Part 2](/en/lessons/building-3d-environments-threejs-pt-2) builds on this foundation. In that lesson, you will create a more complex interactive website in which selecting a vessel reveals information about the local community and their ceramics. Part 2 also shows how to create a matching puzzle in which users match ceramics to the community that created them (if a vessel is dragged to the corresponding community, the background colour of the scene changes).
+
+### Why Use 3D Models for Cultural Heritage
+
+Web models and digital games can help the dissemination of archaeological information. Rather than solely writing texts about artefacts, providing communities with opportunities for more direct engagement with the archaeological past can be considered a goal of archaeologists[^1]. Virtual (or printed) cultural heritage models have the advantage that they can be inspected without the risk of damaging an archaeological artefact. They can also be inspected at different scales: houses, sites, or villages can be scaled down to reveal how different areas relate to one another, while small artefacts, such as coins, can be magnified so that small details can be more easily seen. In these two lessons, vessels are scaled down so that many can be compared and placed on a geographic map. This kind of visual and geographical placement can help communicate the links between artefacts and their creators more vividly than a simple label. Finally, the use of models can also ideally help reduce the removal, and facilitate the return, of original artefacts to the communities that created them and their descendants.
+
+3D modelling is not only an engaging way of disseminating information; it can also be a valuable tool for revealing relationships and supporting new insights. For example, comparing aspects of material culture, such as pottery, across communities can help explore shared histories. For pottery, these comparisons may be based on appearance (form and decoration) and methods of production. However, the ways in which these forms and techniques spread may vary. Similarities do not necessarily reflect population movement alone[^2], especially in the case of material culture, as ideas and techniques can spread through one culture learning from another as well as through innovations within a community[^3]. Comparing different pottery styles can therefore help investigate shared heritages, community contacts, and local innovations. Visualising pottery forms and their geographic distribution through 3D modelling helps illustrate these relationships, especially when annotated with additional information such as the language family of the community[^4], [^5].
+
+### Lesson Goals
+
+This two-part lesson series provides a brief introduction to creating websites with 3D models using three.js.
+
+Part 1 starts by introducing fundamental concepts and components of 3D models along with some of the ethical considerations involved in generating and using 3D models when working with cultural heritage. You will then explore those concepts and components in practice, using an example 3D model of ceramics from Papua New Guinea (provided by the authors) and the three.js web editor. The three.js editor is a browser-based tool that allows you to view and interact with 3D models without writing any code. Finally, you will use the three.js JavaScript library to create a webpage featuring the example 3D model of Papua New Guinea pottery displayed on a map. You will be provided with pre-written code snippets that you will copy-paste, add to, and modify step by step. In doing so, you will learn how to set up a scene (the 3D space that contains the model), define a camera (the viewpoint from which users view the model), add lighting (to make the model objects visible and more realistic), and add navigation (such as mouse controls) to allow users to move around the scene.
+
+In Part 2, you will build on this foundation to create a more interactive website for ‘The Jars of Papua’ using three.js. You will learn how to work with multiple models, allow users to select and interact with them, and display additional information in response to user actions. You will also explore how to turn the scene into an interactive game, where models are initially positioned randomly and can be moved and matched to their corresponding communities. You will do this by setting up a test in the code to run each time a model is moved, checking whether it has been placed in the correct position. Successful matches trigger a background colour change.
+
+### Software Requirements and Installation
+
+To complete this lesson, you will need a few basic tools and some familiarity with simple web and programming concepts. No prior experience with 3D modelling or three.js is required.
+
+#### Web Browser
+
+You will need a modern browser (such as Chrome, Safari, or Edge). Most current web browsers should work, although some versions of Safari can have problems. If your browser can display the [three.js site](https://threejs.org) and the various sample projects on the home page, it should work.
+
+When building a website, it is useful to be able to identify and fix any problems that may arise (a process known as debugging). Browsers include built-in developer tools that help with this. In particular, the console displays error messages that can help you understand why something is not working. In Chrome, you can open the console via: **View** > **Developer** > **JavaScript Console**. If your webpage is not loading as expected, checking the console is often the first step. You can then search online for explanations of any error messages you encounter. You may also need to reload the page while the console is open to see the error messages. For more information on debugging code, see the [three.js manual](https://perma.cc/QVK4-TFTQ).
+
+#### Web Development
+
+In the first half of this lesson, you will explore models without writing code. In the second part of the lesson, you will use code to create a webpage. Webpages are typically built using three main computer languages: HTML (defines structure), CSS (defines appearance), and JavaScript (defines behaviour). This lesson focuses on JavaScript and does not explain HTML or CSS in detail. You do not need prior knowledge of these languages to complete the lesson, but some familiarity may help you follow the code more easily. If you want to learn more about the basic components of a website, [w3schools](https://perma.cc/66V4-ZX7S) provides a guide and tutorials on HTML, CSS, and JavaScript.
+
+#### Text Editor and Terminal
+
+To write and run code, you will need a text editor and a computer terminal (for example, Windows PowerShell, the terminal in macOS or Linux, or the text editor's terminal). In this lesson, you will use Visual Studio Code (VSC), which includes both a text editor and a terminal. It can be downloaded from [https://code.visualstudio.com](https://code.visualstudio.com). Follow the website instructions to install it. It is free and available for Windows, macOS, and Linux. Many extensions are available for VSC, and syntax highlighting (code colouring) can help detect issues such as unclosed tags or quotes.
+
+You can open the terminal in VS Code via: **Terminal** > **New Terminal**. You will use the terminal to run a few simple commands. No advanced knowledge is required, although some familiarity with basic command line usage can be helpful. Mainly, you will need to be able to check which folder you are working in and navigate to the correct folder. If you use the VS Code terminal, this is usually handled automatically when you open your project folder.
+
+<div class="alert alert-info">
+<a href='https://vscodium.com'>VSCodium</a> is an alternative version of VS Code that removes some telemetry (usage tracking) and AI chat features. It can be used in the same way for this lesson.
+</div>
+
+#### Node.js (for Running Your Webpage Locally)
+
+To view your webpage while you are building it (for example, to check that the code is working or how changes affect your site), you will use a tool called [Node.js](https://nodejs.org).
+
+Node.js allows you to run a local server that lets your browser load your files correctly (for example, at an address such as `http://localhost:3000`). This is necessary because some JavaScript features (including those used in this lesson) only work when files are served through a server.
+
+Node.js is a free JavaScript tool and is available for Windows, macOS, and Linux. Follow the installation instructions on the website. To check that it is working, type the following in your terminal:
+
+```
+node -v
+```
+
+If installed correctly, you will get a version number. If you have problems installing Node.js, try using a search engine with the error message for help or watch one of the many tutorials available on the web.
+
+The code used in this lesson has been tested with version 18.14.1.
+
+#### Data for this Lesson
+
+As an example case study, you will use a 3D model created by the authors. More information about the model as well as download instructions will be provided later in the lesson.
+
+### Papua New Guinea Pottery
+
+In this two-part lesson series, you will focus on modelling the diversity of pottery across the Papua New Guinea region as a case study. This example helps show how 3D modelling can be used not only to visualise different styles and types of material artefacts, but also to provide a sense of their relationships to the communities that made them. Although pottery is not ubiquitous throughout Papua New Guinea and West Papua, many communities have a history of making ceramic vessels for use in cooking, storage or ceremonial purposes. Pottery was first introduced to the Papua region over 3000 years ago[^6] and the many different techniques, forms and decorations found are probably the result of a combination of local innovations and influences from different external sources. The technical and sometimes ceremonial or spiritual knowledge required to construct and decorate pots is passed down through generations or occasionally from community to community, in a process termed cultural transmission. In trying to understand this cultural transmission, researchers compare factors such as decoration, form and production techniques among the different communities.
+
+3D modelling can be a useful approach for comparing these dynamics of transmission and explore the diversity and intricacies of material artefacts in the context of the communities that make them. For example, in the southeast, women's pottery communities (including Mailu and Misima-Paneati speakers) employ a range of techniques, typically finishing vessels with rings made from clay coils and decorating them with predominantly geometric incised or appliqué designs. In many inland communities, potters (including Adzera, Dimiri and Iatmul speakers) use spiral (or ring) construction, building vessels by stacking circular clay coils, with decorations often incorporating sculptural elements and carvings. In coastal communities (including the Bilibil), women make paddle-and-anvil-made vessels from a ball of clay that is beaten on the outside with a wooden paddle, while a stone (anvil) is held inside the pot; these are generally rounder, less decorated and often used for water storage. In these lessons, you will be working with 29 models of ceramics that show examples of vessels made using different building and decorating techniques. In Part 2, step-by-step instructions will be provided for individually adding six models (from Bilibil, Mailu, Misima-Paneati, Adzera, Dimiri and Iatmul speakers), with the assets and information for another 23 provided for you to practise with.
+
+
+### Ethics of Modelling Cultural Heritage
+
+How different communities feel about their cultural objects being modelled and represented on websites is an area that would benefit from further research. While virtual models and interactive websites have the ability to increase accessibility to cultural heritage and help effectively communicate academic research to a broader community, there are important ethical considerations that should be addressed when creating such resources. These apply both at the level of model creation and website design.
+
+If the website is intended to communicate academic research, then community involvement and control should have occurred at an earlier stage of the research. However, as in other fields, technological advances have occurred that could not be foreseen by data/artefact collectors, and ideas around what constitutes ‘informed consent’ have also evolved. The use of cultural heritage models, especially from communities that have been exploited and looted, needs to be carefully considered. There are laws and guidelines, such as the [UNESCO Convention for the Safeguarding of the Intangible Cultural Heritage](https://perma.cc/YM9F-TS7K), [the Code of Cultural Heritage and Landscape (Italy)](https://perma.cc/R76N-VMZK) and the [Protection of Movable Cultural Heritage Act (Australia)](https://perma.cc/G2EX-KWW3) that back up these ethical concerns in many cases. Ideally, informed consent from the maker community, or their descendants, should be obtained for modelling cultural objects. In some countries, intellectual property legislation may require evidence that at least several attempts have been made to obtain permission.
+
+Images of human remains can be offensive to some communities, so modelling them should be carefully considered and may require content warnings. ‘Utilitarian’ items are generally considered exempt from copyright, but some ceramics (or wooden/stone artefacts) have ceremonial purposes, and objects (particularly funerary artefacts) can also have different values and associations for different people and cultures, as highlighted by recent (2023) [Native American Graves Protection and Repatriation (NAGPRA) legislation](https://perma.cc/8H5G-M9QB) in the USA concerning the display of certain Native American objects (including burial pottery)[^7].
+
+One approach for connecting media, including models, with cultural information, such as guidance on ethical reuse or cultural restrictions on viewing, involves the inclusion of [Traditional Knowledge (TK) Labels](https://perma.cc/JX53-2CYL) in media metadata. The use of symbolic, less realistic representations of material culture is a related approach for minimising the use of potentially culturally inappropriate digital reproductions. As discussed later, this approach can have other advantages for use in games.
+
+The available guidelines and protocols are generally more targeted at institutions, but it is worth considering [Basic principle and tips for 3D digitisation of cultural heritage](https://perma.cc/5M63-HEZL) and [Protocols for using First Nations cultural and intellectual property in the arts](https://perma.cc/J3FF-LFV9).
+
+It is also important to reference the sources of images and models used in a website. In this lesson, references will be provided through an information panel on the website. The degree to which models of cultural artefacts are covered by copyright, and who that copyright belongs to (the creators of the original artefacts, the current ‘owners’ or caretakers of the artefacts, or the creators of the model), depends on several factors, and is not always clear-cut [^8], [^9], [^10]. Many researchers aim to make their models and site code available for others to use to increase the dissemination of information and promote further research. Often, models and code are given [Creative Commons licences](https://perma.cc/GES7-EGMQ) such as CC-BY-NC (Creative Commons Attribution-NonCommercial). However, it is always worth considering that your models may be used in virtual scenes you disagree with or find offensive, for example the pot models could be used in a potentially culturally derogatory manner such as illustrating cannibalism). While you can request users to only use your models and code for non-derogatory purposes, publicly available digital assets are increasingly being scraped by artificial intelligence (AI) ‘bots’, thus potentially contributing to models used in scenarios you did not foresee. The use of the `NoAI` HTML meta tag may help discourage such data harvesting.
+
+When making games using cultural heritage models, it is also important to reflect on whether scenes or puzzles adopt a colonial approach. For example, rather than allowing the user to steal or ‘collect’ artefacts in a video game, a better aim might be to gamify the return of artefacts to their place or community of origin. In the puzzle in Part 2 of this lesson, the pots are matched to their original community, as represented as a place on the map.
+
+
+## Introduction to 3D Modelling
+
+### Basic Components of 3D Models
+
+3D models are made from [meshes](https://perma.cc/65GX-YLRY): networks of nodes (points), also called vertices, connected by edges (lines) to form faces, also called polygons (Figure 1). These polygons are usually triangles (with 3 vertices) or quadrilaterals (with 4 vertices), and they can be combined to form a mesh (the 3D object). Some meshes are basic, predefined shapes such as spheres, cubes, planes, and tori (‘donuts’). These are known as ‘primitive’ models and can be created directly in three.js.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-01.png" alt="A mesh, the model and four maps for a white Staffordshire Bull Terrier on a red couch with three blankets. The two-dimensional maps include colour, normal, occlusion and roughness." caption="Figure 1. The mesh and maps (textures) for a model of a dog named ’Diva Demon’. A section of a reduced polygon mesh of the dog is shown for comparison. A patch of tan-coloured fur on the dog's head, and its brown collar can be located in the colour map. [See the model in SketchFab](https://skfb.ly/pzB7J). Model created from a quick [Polycam](https://perma.cc/3BA3-3XKS) scan." %}
+
+Some people like to build more complicated models by combining primitive models in three.js, but often these more complicated models are created with [Computer Aided Design (CAD)](https://perma.cc/XKL3-Q8PM) software such as [Blender](https://perma.cc/6M6V-EUVC) or with scanning processes such as [photogrammetry](https://perma.cc/BK5U-7GXQ) before they are imported into three.js as ‘complex’ models.
+
+In photogrammetry, models are computed from a series of overlapping photographs of an object taken at various angles[^11]. Photogrammetric models, including those from phone apps such as [Polycam](https://perma.cc/3BA3-3XKS), will typically have image [textures](https://perma.cc/32U3-29K4) (discussed in the following paragraphs) and be realistic (Figure 1 and the left side of Figure 2). Models made using Blender or other CAD software may be symbolic (simplified forms that represent, rather than mimic, objects and their characteristic features), or they can be made more realistic with the addition of image textures or complex materials (right side of Figure 2).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-02.png" alt="Flow charts for photogrammetry and CAD model making. Photogrammetry requires multiple photographs, which are used to create a point cloud, then a mesh that is wrapped in a texture to make a model, such as a sherd. A jar CAD model can be made by tracing the vessel outline and rotating it." caption="Figure 2. Models can be created by methods that include photogrammetry and Computer Aided Design (CAD). [See the sherd model in SketchFab](https://skfb.ly/pzEEW)." %}
+
+Meshes can be decorated with ‘materials’ that have colour and other properties such as emission, roughness, metalness, opacity, etc. They can also be decorated with ‘textures’, which are images that are applied to the surface of a model to give it colour and detail. Generally speaking, a material refers to how a surface behaves and its properties (colour, shininess, how it reacts to light), and a texture is an image applied to a surface.
+
+Textures are two-dimensional image files with U (horizontal) coordinates from 0 to 1 and V (vertical) coordinates from 0 to 1 (Figures 1 and 2). Each vertex (node) in a model's mesh is also assigned U and V coordinates (in a process called [unwrapping](https://perma.cc/7V75-LK3D)). In texture mapping, these coordinates are used to match parts of the image to different surfaces (polygons) of the model. Each polygon in the mesh gets the pixels of the texture image that match the polygon defined by the UV coordinates. This allows the image to be ‘wrapped’ onto the 3D model as a colour map. If you inspect the colour map, mesh, and model in Figure 1, you should be able to see where parts of the map, such as the dog's tan head spot and the collar, are matched to the mesh.
+
+Textures with greyscale (from white to black) pixel intensities can also be used to convey other information, such as opacity ([alpha maps](https://perma.cc/4WZ3-E3CC)), roughness (roughness maps), and shadow effects ([occlusion maps](https://perma.cc/58E7-KKWA)) (Figure 1). Many 3D modellers will create [normal maps](https://perma.cc/J7N5-YWPA) for their models to simulate fine shape details. Although a polygon is flat, normal maps can be used to change how light interacts across the surface of a polygon to make it appear to have more complex details. The pixels in normal maps change how light sources interpret the direction in which different points in a polygon are ‘facing’, so that a flat polygon can appear to have a non-flat surface.
+
+Normal maps are colour ([RGB](https://perma.cc/N3XW-NV2Z)) images with the three channels (red, blue and green) providing information about surface direction. They are especially useful for (partly) retaining visual details when reducing the number of polygons in a model. Three.js can use normal maps, but for ‘The Jars of Papua’ interactive website in Part 2 you will only use colour map textures.
+
+If you are interested in UV mapping, you can use the **Model Inspector** in the bottom right corner of many models in [SketchFab](https://perma.cc/Z4HQ-H4MJ), including [’Diva Demon’](https://skfb.ly/pzB7J) (the dog) and the [’Papua Jars’](https://skfb.ly/putNM). In the **3D + 2D** view, you can see how the U and V coordinates on the model correspond to those on the texture map (Figure 3). The colour map texture (an image of a geographical map of Papua New Guinea) used in the lower model in Figure 3 is one of the textures that will be used in Part 2.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-03.png" alt="The dog and jar models in the Model Inspector in SketchFab." caption="Figure 3. The Model Inspector in SketchFab for the dog and Papua Jars models. The Papua Jars model is a composite model whose components include a plane textured with a geographical map of Papua New Guinea." %}
+
+### Model File Formats
+
+3D models can be stored in many different file formats. Some, such as [STL](https://perma.cc/8CDQ-PFWM), will only store the mesh. In this lesson, you will work with glTF (or `.glb`) files: the [GL Transmission Format (glTF) or GL Transmission Format Binary (glb)](https://perma.cc/Z3MG-GKAC) file format is one of the formats that can store meshes, textures, materials, animations and other properties.
+
+glTF/glb files (or rather, the meshes in them) can be compressed to reduce their file sizes, for example using [DRACO](https://perma.cc/E8JA-LHU9) compression. This can make models faster to download and load on a website. However, compressed files need to be decompressed before they can be displayed, which requires processing power (CPU). As a result, compressed files will not always load faster than uncompressed ones.
+
+glTF/glb files can also store several models in a single file. If you are creating a scene with multiple models for a website, there are two main approaches. You can choose to import each of the different models into software such as Blender (or the [three.js editor](https://threejs.org/editor/)), where you position, scale, and colour/texture each of them, and then export the resulting composite model (the whole scene) as a single `.glb` file. This is the approach used here in Part 1 with the `png_sceneDRACO.glb` file. Alternatively, you can import the models individually and arrange and alter them via the website code, as you will do in Part 2. There is also the option of separating out individual models from a file of composite models using the website's code, but this will not be covered in this lesson.
+
+### About the Models in this Lesson
+
+The models you will use in this lesson were created by the authors (who are not of Pacific Islander heritage) using CAD software. They are intended to be symbolic rather than realistic. While simplifying some of the designs in this way means that some of the artistry of the original potteries is not fully represented, it helps avoid reproducing culturally sensitive designs and respects the moral rights of the original communities.
+
+For this project, we chose to create symbolic models of non-ceremonial objects rather than realistic (photogrammetric) models. Creating realistic models would require the permission of the respective communities. Symbolic models were also used because they can convey the construction methods of the original vessels through the use of colour and a corresponding key. The method of construction is important not only for understanding the connections between the different pottery technologies, but also for the puzzle in Part 2, where colours act as the primary clues for users to match vessels to their communities.
+
+The individual vessel models used in this project were originally created by one of the authors (K. Hardy) as part of an exercise to learn CAD for 3D printing[^12]. The models were created using Blender and Fusion 360 by tracing or estimating the vessel profile (from the various sources cited in one of the information panels within the website's 3D model), rotating the profile 360 degrees around the vertical axis, and then, if necessary, using the sculpting tools to add the decorations (right side of Figure 2). As the models were designed to be printed 5-10 cm tall, decoration was simplified and added to reflect the different decoration types favoured by the different communities, such as [comb incision](https://perma.cc/C5PY-9X5Q), [impression](https://perma.cc/H9GJ-RWJF), [exposed coil](https://perma.cc/8CLY-RXAK) and [appliqué](https://perma.cc/WJS6-EEKD). Many communities produced more than one type of pot, and forms selected for the original printed collection were chosen to illustrate the variety of vessels in Papua.
+
+For use on a website, Blender was used to reduce the polygon count of the models. The composite model (used in this lesson) was created in Blender, with the addition of the map (added via the [‘import image as planes’ extension](https://perma.cc/AKR9-8S24)). The individual vessel models (used in Part 2) were exported as DRACO-compressed glTF files.
+
+These models have a [CC BY-NC-SA 4.0](https://perma.cc/FDY4-ZTTJ) licence. The ‘BY’ (attribution) means that if they are used, reference should be made to the authors/creators. The ‘NC’ (non-commercial) part means the models can be used and modified, but not for commercial purposes. The ‘SA’ (share-alike) part means that if the models are re-used, the containing work must have a similar licence.
+
+### Alternatives to three.js for Creating Websites Featuring Models
+
+In this lesson, we focus on the three.js JavaScript library because it is relatively easy to use for creating websites with 3D models, in part due to the large number of easily modifiable [tutorial examples](https://threejs.org/examples/) available. However, there are several alternatives for creating websites that include 3D models, which may be better suited to different coding abilities or types of projects. While this lesson focuses on three.js, many of the concepts covered here are also relevant to other JavaScript libraries, game engines (software used to build interactive 3D applications), and 3D modelling tools.
+
+Some platforms host existing models and allow you to annotate and embed them in your own website. For example, many cultural heritage models are hosted on SketchFab[^13], which allows for (limited) interactive annotations, where informative text appears when users click on certain areas of the model (Figure 4). Models such as the [’Papua Jars’](https://skfb.ly/putNM) or [’Diva Demon’](https://skfb.ly/pzB7J) can be linked and embedded in other websites. [Smithsonian Voyager](https://perma.cc/6LRN-5DTP), [3DHOP](https://perma.cc/3VD7-ZKGD) and [Kompakkt](https://kompakkt.de/about) also allow for models to be embedded in websites and offer more extensive model annotation. These platforms are useful for creating websites that present high-quality models alongside contextual information that appears as users interact with them. Researchers and students can also examine these models with measurement tools.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-04.png" alt="The jar models in SketchFab and several stylised models of jars from Papua, five of them numbered. Informative text is shown for jar 5." caption="Figure 4. The Papua jar models in SketchFab with five annotations." %}
+
+For more complex websites, such as those with multiple models that users can manipulate independently, or that require a test to see if models have been placed correctly relative to one another, JavaScript libraries, such as three.js and [Babylon.js](https://perma.cc/4ES6-FQU2), or game engines such as [Godot](https://perma.cc/LNQ6-BAW5), [Unity](https://unity.com) and [Unreal Engine](https://perma.cc/6A6P-NUBW), are typically required. Some game engines also offer no-code approaches that might appeal to some users.
+
+Another advantage of three.js is that it can be used to make websites viewable in [virtual reality](https://perma.cc/9YFG-CXJG). Three.js, by itself, is not a [physics engine](https://perma.cc/NHL6-HB3P), so it cannot generally simulate object interactions, such as detecting object collisions. It can be used with physics engine libraries, such as [Ammo.js](https://perma.cc/KJ6U-BEPC), [Cannon.js](https://perma.cc/6NFJ-WLWN) or [Rapier.js](https://perma.cc/ZC34-EM9G), as shown in some of these [three.js physics examples](https://threejs.org/examples/?q=physics). The Babylon.js library has greater built-in support for physical interactions and may therefore be a better option for digital exhibits that require more complex object interactions.
+
+## Exploring Models with the three.js Editor
+
+In Part 2, you will build up ‘The Jars of Papua’ website from multiple models of jars and planes, but here you will start exploring the example composite pottery model using the [three.js editor](https://threejs.org/editor/). You will explore how concepts discussed earlier — such as meshes, model formats and sizes, materials, textures, lighting, and position (coordinates) — work together within a 3D scene.
+
+Download the composite model []`png_sceneDRACO.glb`](/assets/building-3d-environments-threejs-pt-1-2/png_sceneDRACO.glb) we've created for you to experiment with. Open the [three.js editor](https://threejs.org/editor/) in a new browser window (right-click on the link) and import the model with **File** > **Import** (Figure 5).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-05.png" alt="Web editor showing a dark rectangular prism with small jars on it." caption="Figure 5. The three.js editor with the composite model imported." %}
+
+Change the view from **SOLID** to **WIREFRAME** using the drop-down menu at the top right of the model view window, and zoom in and move around with your mouse. Expand the model hierarchy in the **SCENE** window/tab (on the right) by clicking on the *+* symbol next to `png_sceneDRACO.glb` and then the subsequent *+* symbols in the hierarchy. Double-click on a jar name (try **aibom_LOC**) and it should centre that jar. You can also double-click on a jar model in the main window.
+
+You should be able to see that the jars (and the plane) are made of triangles (Figure 6). The fewer nodes or faces in the mesh, the smaller the model file size. Reducing the number of faces can reduce the level of detail in a model, but large model files may load slowly or be slow to respond on a website.
+
+The number of nodes or faces in a model can be reduced using 3D modelling software such as Blender. The process of reducing the nodes or faces in a model is known as retopology. In Blender, this is relatively easy to do if the model is imported in STL format without an image texture. The individual jar models (used in Part 2) were designed and retopologised in Blender to file sizes under 700KB.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-06.png" alt="Web editor showing the wireframes of jar meshes." caption="Figure 6. The three.js editor in wireframe view zoomed in on a jar mesh." %}
+
+You may have models that you have created using photogrammetry, or downloaded from sites such as [SketchFab](https://perma.cc/Z4HQ-H4MJ), that have image textures. These are easier to retopologise in commercial software such as [Agisoft’s Metashape](https://perma.cc/YV88-XT26), but it is also possible to use Blender or the free photogrammetry software [Meshroom](https://perma.cc/P2MV-CB5M).
+
+Before using your models on your website, it can be helpful to open them in a viewer to check that they load correctly and display as expected (for example, whether the textures appear correctly and whether the models are positioned and scaled correctly). You can test your models by importing them into the three.js editor or, if they are glTF files, in [Don McCurdy's glTF viewer](https://gltf-viewer.donmccurdy.com).
+
+When inspecting models, you may need to add or modify lights, as some materials are not visible without them. To do so, change **WIREFRAME** back to **SOLID**. In the editor, add a hemisphere light from the **Add** > **Light** > **Hemisphere** menu. If you select the hemisphere light in the **SCENE** tab, you can change the colour to white and the ground colour to black (Figure 7). This creates light that appears to come from above (like light from the sky) and gradually darkens towards the ground. You can use the editor to experiment with different lighting options and see how they make objects visible and affect how the model appears.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-07.png" alt="Web editor showing jar models in different colours." caption="Figure 7. The jars under a hemisphere light." %}
+
+If you zoom out, you can see the map. The jars are coloured because they have materials, which define how their surfaces appear. The map, by contrast, is a flat surface (a plane) with an image texture applied to it (Figure 8).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-08.png" alt="Web editor showing that the rectangle the jars are on has a map of Papua New Guinea." caption="Figure 8. The Papua New Guinea map and its image texture (called a map in the Material tab)." %}
+
+Click on a jar. While in the editor, it is useful to look at the red, green, and blue arrows in the centre of the scene, which show the coordinate system. This system is used to position objects in 3D space.
+
+Different graphics programs and game engines use different coordinate systems. In three.js, positions are defined using x, y, and z values. These values determine where an object is positioned in the scene. In three.js, x is left (-) and right (+), y is down (-) and up (+) and z is far (-) and near (+) (Figure 9). This is known as a Y-up, right-handed coordinate system.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-09.png" alt="Web editor with three arrows, coloured red, green and blue, showing the x, y and z axes." caption="Figure 9. The three.js coordinate system. The red arrow shows the positive x direction, the green arrow shows the positive y direction, and the blue arrow shows the positive z direction." %}
+
+If you select a jar and look in the **OBJECT** tab, you will see its x, y, and z position values; in other words, how it was placed (Figure 10). You can change these values and see how the jar moves. You can also change the scale or rotation of a jar and test how these transformations affect the model.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-10.png" alt="Web editor showing a round jar (manus001), with its x, y and z positions visible in the geometry window." caption="Figure 10. The position of the jar made by one of the communities on Manus Island." %}
+
+## Building an Interactive 3D Website with the three.js JavaScript Library
+
+In the previous section, you gained familiarity with some basic concepts in 3D modelling and explored models in your browser using the three.js editor. In the following sections, you will begin working with the three.js library in code to create a website featuring 3D models. To do this, you will set up the project file structure and use the text editor Visual Studio Code (VSC) to create a webpage, set up a scene with a camera and lights, load the model, and add camera controls using the three.js library.
+
+There are two main ways to use the three.js JavaScript library. This lesson uses the library via a [content delivery network (CDN)](https://perma.cc/5YFV-AUPN), which fetches and loads the library directly from an online server. The alternative is to download the library and manage it locally using build tools such as [Vite](https://perma.cc/Y9PC-UNYL). This approach is more flexible and is commonly used in larger or more complex projects, but it requires additional setup. For this lesson, the CDN approach keeps things simple and is sufficient for getting started.
+
+This lesson uses three.js version 0.160.0, although it has been tested and works with later versions such as 0.166.1. If you use a different version, make sure it is updated consistently throughout the code. For example, make sure to change the version number both where the import maps refer to three.js (for instance, use `three@0.166.1` instead of `three@0.160.0`) and later, when the DRACO file compression loader is imported. Three.js versions are not always fully backward compatible, so using different versions may occasionally cause issues. Browser updates may also occasionally cause incompatibility problems.
+
+### Creating a Webpage
+
+In this section, you will set up a basic website and load the three.js library into it, so that you can start writing code to display a 3D scene.
+
+First, you will set up the directories and files for the project. Create a new folder called `myscene`. Within this folder, create a folder called `models` (which will contain the models you want to display) and a folder called `textures` (you will use this folder in Part 2). Put the `png_sceneDRACO.glb` file you downloaded previously in the `models` folder.
+
+In VSC, open the `myscene` folder. Create a new file and call it `index.html`. This file will contain the code for your webpage. It must be named exactly `index.html` because browsers automatically look for and open a file with this exact name when loading a website locally.
+
+For the purposes of this lesson, you will write all the code directly in this file. This is not best practice: generally, JavaScript code is written in a separate (`.js`) file and then imported into the HTML (`index.html`) file. However, keeping everything in one file here makes it easier to see how the different parts work together.
+
+Also note that, whilst in some languages (such as Python) code indentation is required for the code to work correctly, in JavaScript indentation is not required. So if copying and pasting changes the indentation, you do not need to correct it, although proper indentation might make the code easier to read and help you copy and paste code in the correct place. If you run into problems when editing the code that you cannot fix, you can download and inspect our finished code [`index_pt1_complete.html`](/assets/building-3d-environments-threejs-pt-1-2/index_pt1_complete.html).
+
+In the `index.html` file, copy and paste the following, and save the file:
+
+```
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <!--This is an HTML comment. The title tag gives the window title. -->
+        <title>PNG pottery</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+         <!--Link to the style sheet. -->
+        <link type="text/css" rel="stylesheet" href="main.css">
+        <!--JavaScript. Get the three.js library files. -->
+        <script type="importmap">
+            {
+              "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+              }
+            }
+        </script>
+    </head>
+    <body>
+        <!--Link to the three.js page and some text. Text colours are specified in main.css. This could be used for interactive page instructions. -->
+        <div id="info">
+            <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> The Jars of Papua
+        </div>
+            <!--JavaScript. This is where the three.js code goes. -->
+        <script type="module">
+                // JavaScript comment
+                // Library imports
+            import * as THREE from 'three';
+        </script>
+    </body>
+</html>
+```
+
+This HTML file sets up a basic webpage and loads the three.js library so that you can begin writing 3D code.
+
+The file contains three main parts:
+
+- Basic webpage structure (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`), which defines the page and its content
+- A link to a stylesheet (`main.css`), which you will create below. This defines how the page looks (for example, background colour and text styling)
+- JavaScript code, which is where you will use three.js to create and display a 3D scene
+
+The JavaScript code shows how the three.js library is loaded. This happens in two steps: first, the `<script type="importmap">` block tells the browser where to find the three.js library online. This is the Content Delivery Network (CDN) approach discussed earlier: instead of installing three.js locally, the browser fetches it directly from the internet.
+
+Then, inside the `<script type="module">` block, the line `import * as THREE from 'three';` imports the library into your code. This makes all of three.js’s functionality available under the name `THREE`, which you will use in later steps to create a scene, add a camera and lights, and load models.
+
+The `<div id="info">` section adds a small piece of text and a link to the page. This is not required for three.js to work and can be modified or removed. It is included because this page was adapted from a three.js example page.
+
+Anything written inside `<script>` tags is JavaScript code. In JavaScript code, comments are written using `//`, and anything after `//` on that line is ignored by the browser.
+
+In the `myscene` directory, create another new file called `main.css` and paste in the following code:
+
+```
+body {
+    margin: 0;
+    background-color: #000;
+    color: #fff;
+    font-family: Monospace;
+    font-size: 13px;
+    line-height: 24px;
+    overscroll-behavior: none;
+}
+
+a {
+    color: #ff0;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+button {
+    cursor: pointer;
+    text-transform: uppercase;
+}
+
+#info {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    text-align: center;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    pointer-events: none;
+    z-index: 1;
+}
+
+a, button, input, select {
+    pointer-events: auto;
+}
+
+.lil-gui {
+    z-index: 2 !important;
+}
+
+@media all and ( max-width: 640px ) {
+    .lil-gui.root {
+        right: auto;
+        top: auto;
+        max-height: 50%;
+        max-width: 80%;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+#overlay {
+    position: absolute;
+    font-size: 16px;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: rgba(0,0,0,0.7);
+}
+
+#overlay button {
+        background: transparent;
+        border: 0;
+        border: 1px solid rgb(255, 255, 255);
+        border-radius: 4px;
+        color: #ffffff;
+        padding: 12px 18px;
+        text-transform: uppercase;
+        cursor: pointer;
+}
+
+#notSupported {
+    width: 50%;
+    margin: auto;
+    background-color: #f00;
+    margin-top: 20px;
+    padding: 10px;
+}
+```
+
+This file is a Cascading Style Sheet (CSS). It defines the appearance of the webpage (colours, fonts, and layout). The code provided here is adapted from the [example files](https://perma.cc/YXA3-CDHT) available in the three.js GitHub repository, which contains the source code for the [three.js example sites](https://threejs.org/examples/). These examples include ready-made styling that works well for displaying 3D scenes, so you can use it without needing to understand all of the details. For this lesson, you do not need to modify this file; it simply sets up a basic visual style for your page. Save the `main.css` file, and then you can close it.
+
+You should now have a directory structure as shown in Figure 11. This contains the main components of your project: `index.html` (your webpage); `main.css` (the styling); and the `models` folder (which contains the model file `png_sceneDRACO.glb`). The `textures` folder will be used in Part 2.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-11.png" alt="A screenshot of the VSC editor with the directory structure of the myscene folder." caption="Figure 11. The directory structure can be seen in the left-hand panel of the VSC editor. The `index.html` file contents are shown in the main panel. A VSC terminal is open and shown in the bottom panel." %}
+
+Now you will use the terminal to run the webpage you have just created. In VSC, select **Terminal** > **New Terminal**. Make sure that the command line of your terminal/shell indicates that you are in the `myscene` folder (for example, it may end with `myscene %`). You can check which folder you are currently in by typing:
+
+```
+pwd
+```
+which stands for ‘print working directory’.
+
+In the terminal, type:
+
+```
+npx serve
+```
+
+This starts a local server, which allows your browser to load your webpage correctly. Some modern JavaScript features only work when files are loaded through a server. The terminal will display a local web address (usually something like `http://localhost:3000`). Open a web browser and go to that address. If everything is working, you should see a black page with the text ‘three.js The Jars of Papua’ (Figure 12).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-12.png" alt="Black page with a small title (three.js The Jars of Papua) at the top centre." caption="Figure 12. Webpage with black background and small title (three.js The Jars of Papua)." %}
+
+If you encounter problems when using Windows, you may need to run the following in the terminal:
+
+```
+Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
+```
+
+You do not normally need to stop the server when you change the code. However, if needed (for example, if a mistake causes issues or you want to take a break), you can stop the server by pressing *Ctrl + C* in the terminal, and restart it by running `npx serve` again.
+
+You may also need to refresh the page in your browser to apply any changes you make to the code.
+
+### Building a 3D Scene in Your Webpage
+
+In the previous section, you set up the project by creating a webpage (`index.html`), loading the three.js library, and starting a local server (`npx serve`) so that you can view the webpage in your browser. In this section, you will start adding JavaScript code to that webpage in order to build a basic 3D scene. You will start by creating a container for the scene, and then you will add the other elements needed to display it in the browser.
+
+#### 1. Setting Up the Container
+
+The first step is to create a container for the 3D scene (which defines where the 3D content will appear on the webpage) with `container = document.createElement('div')`.
+
+In the `index.html` file, **after** the following line of code:
+
+```
+import * as THREE from 'three';
+```
+
+add the following code:
+
+```
+// Variable declaration and setting
+let container;
+
+// Function calls
+init(); // initialise scene
+
+// Function definitions
+
+// Initialise scene: sets up container; scene; camera; renderer; lights; models; controls
+function init() {
+ // make an HTML div element and add it to the HTML document
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+}
+
+```
+
+You will continue adding to this script in later steps to build the 3D scene.
+
+The `// Variable declaration and setting` part of the script is where variables used in the scene are declared (using `let`). A variable is a named piece of information that your code can refer to later. At this stage, only `container` is declared, but more variables (such as scene, camera, renderer, lights, models, and controls) will be declared later.
+
+The `//Function calls` part is where functions are run. Here, `init()` calls the `init` function, which means the code inside `function init() { ... }` (defined below in Function definitions) will run. Later you will also add an `animate()` function.
+
+The `// Function definitions` section is where functions are defined. The `init()` function is where the scene will be gradually set up. In later steps, more code will be added to this function to create the scene, camera, renderer, lights, and load the models. Note that functions are defined within `{}`, so pay careful attention to curly brackets when copying and pasting code.
+
+At this stage, the `init()` function only creates the container with `container = document.createElement( 'div' );`. This creates a new `<div>` HTML element. This `<div>` will act as a container for the 3D scene. In other words, it defines where the 3D content will be placed on the webpage. The next line, `document.body.appendChild( container );` adds that container to the webpage.
+
+At this stage, nothing will change in your browser yet.
+
+#### 2. Setting Up the Scene, Camera, and Renderer
+
+Next, you will create the core components of the 3D scene:
+
+- the scene itself (the 3D space) with `scene = new THREE.Scene()`
+- the camera (which defines what the user sees and where they are looking from) with `camera = new THREE.PerspectiveCamera(…)`
+- the renderer (which displays the 3D scene on screen) with `renderer = new THREE.WebGLRenderer(…)`
+
+First, update the variable declaration to include these new elements:
+```
+let container, camera, scene, renderer;
+```
+
+Then, inside the `init()` function, after:
+```
+document.body.appendChild( container );
+```
+
+add the following code:
+```
+// make scene and set background colour
+scene = new THREE.Scene();
+scene.background = new THREE.Color( 0xf7d382 ); // use the hex code of any colour you want.
+// make camera and set its start position
+camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 ); // arguments are: vertical field of view, aspect, near plane, far plane. Note that the aspect depends on the user's window size.
+camera.position.set( 0, 1.6, 3 ); // arguments: x, y, z. Values are in metres. Approximates a person's eye level (designed for VR)
+
+// make renderer and use the user's browser window values to set pixel ratio and size
+renderer = new THREE.WebGLRenderer( { antialias: true } );
+renderer.setPixelRatio( window.devicePixelRatio ); // Don't change this code.
+renderer.setSize( window.innerWidth, window.innerHeight ); // Don't change this code.
+container.appendChild( renderer.domElement );
+
+```
+
+This code creates the main components of the scene inside the `init()` function.
+
+The `scene` represents the 3D space. Here, you set its background colour using a [hexadecimal colour value](https://perma.cc/2X52-EGCN) (`0xf7d382`, a peach colour).
+
+The `renderer` converts the 3D scene into a 2D image that is displayed in the browser. The conversion of a 3D scene into a 2D image (to be displayed on the screen at that millisecond) is called [rendering](https://perma.cc/LH5X-XA7L). It is configured to match the size and resolution (pixel ratio) of the user’s browser window. The `antialias: true` option uses [anti-aliasing](https://perma.cc/M4VH-UQB5) to smooth the edges of objects and reduce jagged lines by averaging edge pixel colours.
+
+The `camera` defines the point of view from which the scene is rendered. The position of the camera is important; sometimes you cannot see your models because the camera is looking away from them or they are outside its [field of view](https://perma.cc/2CKA-SY9C). Here, you are using a perspective camera, which mimics how we see in the real world (objects further away appear smaller). The camera is defined using four parameters:
+
+- the vertical field of view (how tall the view is)
+- the aspect ratio (based on the browser window dimensions)
+- the near plane (how close objects can be before they are no longer visible)
+- the far plane (how far away objects can be before they are no longer visible)
+
+The aspect ratio can be taken from the browser window's dimensions, and you will later add a function so that it is updated if the browser window is resized. The units for three.js are metres, so this camera will not render anything on the screen that is nearer than 0.1 m or further than 10 m. When moving the camera is introduced later, you will see objects disappear if they get too close.
+
+The camera and other positions are set using x, y, and z coordinates. As mentioned previously, x is left (-) and right (+), y is down (-) and up (+) and z is depth or far away from the viewer/‘into the screen’ (-) and near the viewer/‘coming out from the screen’ (+). Here, the camera is set at a height of 1.6m (y = 1.6), slightly above ground level. The z coordinate for the camera is set at 3 m, as if you are standing a short distance away from the scene.
+
+#### 3. Rendering the Scene
+
+To display the scene, you need to continuously render it using an animation loop. This is done by using the `animate()` function, which repeatedly calls the `render()` function.
+
+After the `init()` function call (in the `Function calls` section):
+```
+init(); // initialise scene
+```
+
+add the following line:
+```
+animate(); // updates scene by constant rendering
+```
+
+Next, define the `animate()` and `render()` functions outside the `init()` function definition, i.e. after the following line of code (and after the closing curly bracket `}` of `init()`):
+```
+container.appendChild( renderer.domElement );
+}
+```
+
+add the following code:
+```
+// Constant loop of rendering.
+function animate() {
+ renderer.setAnimationLoop( render );
+}
+// Called in loop by animate(), draws the scene in 2D as viewed by the camera at the camera's current position.
+function render() {
+ renderer.render( scene, camera );
+}
+
+```
+
+This creates a loop that continuously redraws the scene from the camera’s perspective.
+
+Save the `index.html` file and reload the page in your browser. The background colour should now have changed (Figure 13).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-13.png" alt="Basic webpage with peach background." caption="Figure 13. Webpage with peach background." %}
+
+#### 4. Responding to Window Resizing
+
+Next, you will add an ‘event listener’ to ensure that the scene updates correctly when the browser window is resized. Currently, the scene does not adjust if the window size changes.
+
+Inside the `init()` function definition, i.e. after the following code (inside the curly bracket):
+```
+container.appendChild( renderer.domElement );
+```
+
+add the following code:
+```
+// add listeners. These check for user interaction with the window and mouse clicks, and call the given function.
+// listen for the user's browser window resizing and call the onWindowResize function defined below.
+window.addEventListener( 'resize', onWindowResize );
+```
+
+Next, define the `onWindowResize()` function. Add the following code outside the `init()` function (that is, after its closing `}`), for example after the `render()` function:
+```
+// Called in loop by animate(), draws the scene in 2D as viewed by the camera at the camera's current position.
+function render() {
+renderer.render( scene, camera );
+}
+```
+
+add the following code:
+```
+// called when the window is resized. Gets new browser window values and updates camera and renderer settings. Don't experiment with this.
+function onWindowResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+```
+
+This adds an event listener that responds to changes in the browser window size. An event listener waits for a specific event (such as resizing the window) and then runs a function in response. It takes two arguments: the first identifies the input event (for example, here, `resize` for resizing), and the second is the function that will be called when the event occurs (here `onWindowResize`).
+
+The standard window resize function code gets the new browser dimensions from the global object `window` and updates the camera aspect and the dimensions of the picture the renderer is drawing. Note that, as `window` is a global object, it is better not to call any of your variables `window`.
+
+Three.js uses event listeners to detect and respond to user interactions. In this piece of code, the event listener is only set up for window resizing (`resize`); however, it can also be used to respond to other kinds of inputs such as mouse movement (`mousemove`), mouse clicks (`click`), keys being pressed on the keyboard (`keyup` and `keydown`), and drags (`dragstart` and `dragend`). You will use some of these in Part 2 to enable individual jars to be selected or moved around.
+
+If you save the file and reload the browser, resizing the browser window should now work correctly.
+
+#### 5. Setting up Lighting
+
+Now, you will add lights to the scene.
+
+There are several different types of lights available in three.js. Here, you will add:
+
+- a [hemisphere light](https://perma.cc/5UVU-BXMP) (which simulates light coming from above and below)
+- a [directional light](https://perma.cc/86BZ-EV3A) (which acts like a light shining from a specific direction, such as sunlight)
+
+The hemisphere light uses two colours (for sky and ground) and an intensity (from 0 to 1), while the directional light uses one colour and a position. Use the values provided below first. If everything is working, you can experiment with different values later.
+
+Lights can be added in two ways: you can add lights directly when they are created, as you will do below with the hemisphere light, or you can first declare them (assign them to a variable), modify their parameters, and then add them to the scene, as you will do with the directional light.
+
+Inside the `init()` function definition, after the following code:
+
+```
+camera.position.set( 0, 1.6, 3 ); //x, y, z
+```
+
+add the following code:
+
+```
+// add a hemisphere light and a directional light
+scene.add( new THREE.HemisphereLight( 0xffffbb, 0x080820, .5) ); // arguments: sky colour, ground colour, intensity
+const light = new THREE.DirectionalLight( 0xffffff ); // argument: colour
+light.position.set( 1, 6, 2 ); // x, y, z
+scene.add( light );
+```
+
+These lights make the objects in the scene visible and give them a sense of depth and shape.
+
+#### 6. Loading the Model
+
+Next, you will load the 3D model into the scene.
+
+Three.js can load different types of 3D files using loaders. Here, you will use two model loaders: a `GLTFLoader` to load `.glb` (glTF) model files, and a `DRACOLoader` to decode models that have been compressed using DRACO. Because the model used in this lesson was compressed using DRACO, both loaders are required.
+
+First, you will import the loaders. After the following line of code:
+```
+import * as THREE from 'three';
+```
+
+add the following code:
+```
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; // needed if the glTF file uses DRACO compression
+```
+
+Next, declare variables and set up the loaders. 
+
+**After** this line of code:
+```
+let container, camera, scene, renderer;
+```
+
+**add** the following code:
+
+```
+let themodel;
+let desk = 0.8; // the height of the model (metres), corresponding to desk height in virtual reality
+
+// Loader setup
+// Different model formats use different loaders
+const loader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.160.0/examples/jsm/libs/draco/' );
+loader.setDRACOLoader( dracoLoader );
+
+```
+
+The `DRACOLoader` retrieves decoding code from a web server and the version number in the [path](https://perma.cc/CQW8-C9VY) must match the version of three.js that you are using. If you are not using version 0.160.0, make sure to update the version number accordingly.
+
+
+Load the model. 
+
+Inside the `init()` function, **after** this lie of code:
+```
+scene.add( light );
+```
+
+**add** the following code:
+
+```
+// load model
+// function used by loader
+function onLoadMap( gltf ) {
+ themodel = gltf.scene.children[0]; // can also use just gltf.scene
+ themodel.position.set( 0, desk, 0); // x, y, z
+ themodel.scale.set( 1, 1, 1); // x, y, z
+ scene.add( themodel);
+}
+// the loader is given the model file name (first argument), a function called after loading (second argument), a function called while loading (third argument), and a function called if an error occurs (fourth argument).
+loader.load( 'models/png_sceneDRACO.glb', onLoadMap, undefined, function ( error ) {console.error( error );} );
+
+```
+
+The model is loaded using the `loader.load()` method, which can take up to four arguments:
+
+- the file path, e.g. `models/png_sceneDRACO.glb` (this can also be a URL)
+- a function to run after the model has loaded
+- a function to run while the model is loading (optional)
+- a function to run if an error occurs
+
+The last three functions are called ‘callback’ functions (functions passed into another function as arguments). In this example, the `onLoadMap` function is called once the model has loaded; the loading progress function is left `undefined` (though it could be used to create a loading bar or similar); the error function prints any errors to the browser console.
+
+Inside the `onLoadMap` function, the model is extracted from the loaded file using `gltf.scene.children[0]`. In some cases (such as with this model), you can use `gltf.scene` directly. However, glTF files can contain multiple objects arranged in a hierarchy (as you saw in the **SCENE** tab of the three.js editor), and accessing `children[0]` selects a specific object within that structure.
+
+You can also position, scale, or rotate the model in the `onLoadMap` function. For example, here, the model is positioned slightly above the ground (y = desk). You can experiment with changing the x, y, or z values for position or scale and see the effects.
+
+Importantly, model loading is not instantaneous. The rest of your code continues to run while the model is loading. By placing instructions (such as positioning or scaling the model) inside the `onLoadMap` function, you ensure that they are only applied after the model has finished loading.
+
+Save the file and reload the page. You should now see the model, although you will not be able to move around it yet (Figure 14).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-1-14.png" alt="Several jar models sitting on a map of Papua." caption="Figure 14. The model of jars on a map of Papua." %}
+
+
+#### 7. Adding Camera Controls to Move Around
+
+Next, you will add camera controls so that you can move around the scene. Three.js provides different types of controls. Some controls, including [orbit](https://threejs.org/examples/?q=controls#misc_controls_orbit), [map](https://threejs.org/examples/?q=controls#misc_controls_map), [fly](https://threejs.org/examples/?q=controls#misc_controls_fly), [pointer lock](https://threejs.org/examples/?q=controls#misc_controls_pointerlock) and [trackball](https://threejs.org/examples/?q=controls#misc_controls_trackball), move the camera, while others, such as [drag](https://threejs.org/examples/?q=controls#misc_controls_drag) and [transform](https://threejs.org/examples/?q=controls#misc_controls_transform), move objects in the scene.
+
+Here you will use `OrbitControls`, which allow users to navigate the scene by:
+
+- rotation (when the mouse is clicked and dragged)
+- panning (when the mouse is clicked and dragged while pressing the *Shift* key, or using the *right mouse button*)
+- zooming (with mouse scrolling).
+
+First, you will import the controls. 
+
+**After** the following line of code:
+```
+import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+```
+
+**add** the following code:
+```
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+```
+
+Next, add the controls to your variable declaration. 
+
+**Find** the following code:
+```
+let container, camera, scene, renderer;
+```
+
+and **update** it to:
+```
+let container, camera, scene, renderer, controls;
+```
+
+Next, you will create the controls and link them to the camera and renderer. 
+
+Inside the `init()` function, **after** this line of code:
+```
+container.appendChild( renderer.domElement );
+```
+
+**add** the following code:
+```
+// create orbit controls
+controls = new OrbitControls( camera, renderer.domElement);
+controls.target.set( 0, 1.6, 0 ); // sets the scene's rotational centre
+controls.update(); // updates the control settings after creation
+//controls.autoRotate = true; // set to true if the camera is to rotate automatically, BUT you must then call controls.update() in the render function.
+
+```
+
+The `OrbitControls` link the camera to user input (mouse and scroll), allowing you to move around the scene. The `target.set()` method defines the point the camera rotates around.
+
+Save the file and reload the page. You should now be able to move around the scene and zoom in and out. Note that it is the camera that is moving, not the model itself.
+
+If you want the camera to rotate automatically, you can uncomment `controls.autoRotate = true;`. This rotates the camera around the scene without user input. If you do this, you must also update the `render()` function. 
+
+**Find** the following code:
+```
+function render() {
+ renderer.render( scene, camera );
+}
+```
+
+and **change it** to:
+```
+function render() {
+ controls.update(); // use if controls.autoRotate = true
+ renderer.render( scene, camera );
+}
+
+```
+
+#### 8. Sharing Your Website
+
+Finally, you are currently viewing your webpage locally using a development server (Node.js). If you want to make your page publicly accessible, you can deploy it using services such as [GitHub Pages](https://perma.cc/5AAR-5U48) or [Vercel](https://perma.cc/E44T-B9PT), which are free to use. These platforms allow you to host your website online so that others can access it.
+
+You can follow the instructions provided by [GitHub Pages](https://perma.cc/7UGW-E878) or [Vercel](https://perma.cc/E44T-B9PT) to deploy your site. There are GitHub [starter tutorials](https://perma.cc/X4E7-2DXS), or, if you use software such as [GitHub Desktop](https://perma.cc/YS7L-SZES) to manage your GitHub repositories, you can refer to [this GitHub Desktop tutorial](https://perma.cc/VJ9V-L437). You get one free GitHub page per GitHub account. For example, a repository such as my own at [https://github.com/tosca-har/tosca-har.github.io](https://perma.cc/VF3S-EEMN) results in a website at [https://tosca-har.github.io/](https://tosca-har.github.io/). The _Programming Historian_ lesson [Building Static Sites with Jekyll and GitHub pages](/en/lessons/building-static-sites-with-jekyll-github-pages) provides more detailed guidance.
+
+You can also explore the [three.js manual](https://perma.cc/9YFG-CXJG) if you are interested in making your site viewable in virtual reality (VR).
+
+## Conclusion
+
+Part 1 of this two-part series introduced 3D models and their components: meshes, materials, and textures. It also discussed the motivations, advantages, and ethical considerations of creating 3D models for cultural heritage. There are a growing number of both realistic and symbolic cultural heritage models, and making these models accessible via websites can be a valuable way of communicating archaeological and historical research. As with any communication of research on cultures not your own, especially those that have been subject to colonisation, it is necessary to consider the rights of the represented communities and to be open to their feedback.
+
+In this lesson, you also used three.js to create a website with a model featuring some of the different ceramic vessels of Papua New Guinea. Interacting with the model gives a sense of the diversity of decoration styles and forms used by different communities across the region. You may have noticed similarities between some of the vessels and considered whether these indicate shared histories or knowledge exchanges between communities. This kind of additional information can be incorporated through annotations. You can annotate models using platforms such as SketchFab, which allow you to do this more quickly and easily. By contrast, using JavaScript libraries, such as three.js, gives you more flexibility and options for your website.
+
+This will be covered in Part 2 of the lesson series. You will continue working with three.js and the Papua New Guinea ceramics model, but use a different approach to loading the models. You will import the jar models individually, control their colours and allow users to select them and trigger the display of relevant information in a text panel. You will also learn how to turn the scene into an interactive game in which the jar models start in random positions and can be moved to the communities that created them. This further demonstrates how three.js can be used to create engaging and effective ways of communicating historical research and concepts through 3D models of material culture.
+
+## Endnotes
+
+[^1]: Cornelius Holtorf, _From Stonehenge to Las Vegas: Archaeology as Popular Culture_ (Walnut Creek, CA: AltaMira Press, 2005).
+
+[^2]: Ekaterina Dolbunova _et al._, “The Transmission of Pottery Technology among Prehistoric European Hunter-Gatherers,” _Nature Human Behaviour_ 7 (2023): 171.
+
+[^3]: Michael J. O'Brien _et al._, “Transmission, Phylogenetics and the Evolution of Cultural Diversity,” in _Cultural Transmission and Archaeology: Issues and Case Studies_ (Washington, DC: Society for American Archaeology, 2008).
+
+[^4]: Patricia May and Margaret Tuckson, _The Traditional Pottery of Papua New Guinea_ (Adelaide: Crawford House Publishing, 2000).
+
+[^5]: Anne-Marie Pétrequin and Pierre Pétrequin, _Objets de Pouvoir en Nouvelle-Guinée: Approche Ethnoarchéologique d’un Système de Signes Sociaux: Catalogue de la Donation Anne-Marie et Pierre Pétrequin_ (Paris: Réunion des Musées Nationaux, 2006).
+
+[^6]: Dylan Gaffney et al., “Earliest Pottery on New Guinea Mainland Reveals Austronesian Influences in Highland Environments 3000 Years Ago,” _PLoS ONE_ 10, no. 9 (2015): e0134497.
+
+[^7]: _Native American Graves Protection and Repatriation Act_, Pub. L. No. 101-601, 104 Stat. 3048 (1990), amended 2023, 88 Fed. Reg. 86452–86540.
+
+[^8]: Pınar Oruç, “3D Digitisation of Cultural Heritage: Copyright Implications of the Methods, Purposes and Collaboration,” _Journal of Intellectual Property, Information Technology and E-Commerce Law_ 11, no. 2 (2020): 149.
+
+[^9]: Andrea D’Andrea et al., “Copyright and Legal Issues Surrounding 3D Data,” in _3D Data Creation to Curation: Community Standards for 3D Data Preservation_, ed. Jennifer Moore, Adam Rountrey, and Hannah Scates Kettler (Chicago: Association of College and Research Libraries, 2022), 205–255.
+
+[^10]: Hannah M. Marek, “Navigating Intellectual Property in the Landscape of Digital Cultural Heritage Sites,” _International Journal of Cultural Property_ 29, no. 1 (2022): 1–21.
+
+[^11]: Hafizur Rahaman, “Photogrammetry: What, How, and Where,” in _Virtual Heritage: A Guide_, ed. Erik M. Champion (London: Ubiquity Press, 2021), 25–37.
+
+[^12]: Isabella Shaw and Mathieu Leclerc, eds., _Unearthed: Art in Archaeology and Anthropology_ (Canberra, ACT, 2023).
+
+[^13]: H. Maschner, “Cultural Heritage Spotlight: Global Digital Heritage,” _Sketchfab Community Blog_, July 2022, [https://sketchfab.com/blogs/community/cultural-heritage-spotlight-global-digital-heritage/](https://perma.cc/9RYQ-4GCL).
diff --git a/en/lessons/building-3d-environments-threejs-pt-2.md b/en/lessons/building-3d-environments-threejs-pt-2.md
new file mode 100644
index 000000000..b5599eb89
--- /dev/null
+++ b/en/lessons/building-3d-environments-threejs-pt-2.md
@@ -0,0 +1,1161 @@
+---
+title: "Building Interactive Environments for 3D Models with three.js (Part 2)"
+slug: building-3d-environments-threejs-pt-2
+layout: lesson
+collection: lessons
+date: 2026-10-26
+authors:
+- Kristine Hardy
+- Mathieu Leclerc
+reviewers:
+- Jessica C. Linker
+- Steffen Bauer
+editors:
+- Massimiliano Carloni
+review-ticket: https://github.com/programminghistorian/ph-submissions/issues/607
+difficulty: 3
+activity: presenting
+topics: [website, creative-coding]
+abstract: This lesson is the second part of a two-part lesson series on using the three.js JavaScript library to create interactive websites featuring 3D cultural heritage models. In this Part 2, you will learn how to enable user selection of the different models of ceramic vessels to trigger the display of informative text. You will also learn how to add interactive features that turn the website into a game.
+avatar_alt: An illustration of a shallow, round vessel with linear and geometric decorations, accompanied by two pottery fragments featuring triangular and wavy patterns.
+doi: 10.46430/phen0137
+sequence: 2
+previous: building-3d-environments-threejs-pt-1
+series_total: 2 lessons
+---
+
+{% include toc.html %}
+
+## Introduction
+
+In [Part 1](/en/lessons/building-3d-environments-threejs-pt-1) of this lesson, you used three.js to create a website featuring a camera and a scene with lights, camera navigation controls, and a model featuring multiple jars on a map of Papua New Guinea. In Part 2, the 3D model will be made more interactive with the ability to obtain further information on a jar by selecting it and the option of turning the website into a game. This will involve learning how to make and import the various model components separately.
+
+The example 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 pottery 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 about the history and culture of a region or era.
+
+The primary goal of this lesson is to show how to use three.js to create 'The Jars of Papua' webpage featuring a 3D scene with selectable components. In this lesson, you will build a simplified version of the Papua Jar model (featuring six jars) where each individual jar can be selected. Selecting a jar will display a panel containing information about the language of the maker community, how the jar was made, and what it was used for. In this lesson, you will also create a colour key showing how different pottery-making techniques are represented by different colours. In doing so, you will learn how properties such as colour can be changed directly in the code. 
+
+To build the scene, you will work with core elements such as lights, cameras, primitive shapes (such as spheres and planes), complex models (the jar forms), and user controls. The models will be enhanced with additional materials and image textures. Along the way, you will also be introduced to key concepts such as 3D co-ordinates, model groupings, scale, and visibility. As discussed in Part 1, there are other software tools available for creating such scenes. The advantage of using three.js (or other JavaScript libraries) and working with individual model components (such as the separate jar models) is that it gives you greater flexibility and control over how the scene behaves.  
+
+An additional (optional) goal of Part 2 is to turn 'The Jars of Papua' webpage into a game by making the models moveable. Adding game-like elements can encourage users to engage more closely with both the model and the accompanying information, especially when they need to use that information to complete a task. The interactive game 'The Jars of Papua' randomises the initial positions of the jars, and the user must match each vessel to its maker community by moving it to the correct geographical location. In the game, selecting a community site reveals an information panel about its pottery. Reading this information helps the user identify the correct jar and encourages closer engagement with the panel. The lesson will show how to set up a simple test in the code so that, each time a model is moved, the game checks whether it has been placed in the correct position for its provenance. A successful match will trigger a background colour change to indicate that the jar has been placed correctly.
+
+## Interactive Scenes for Cultural Heritage
+
+The interactive element of ‘The Jars of Papua’ scene is the user’s ability to toggle between different information panels by clicking on a jar. The scene was designed to communicate the diversity of vessel forms, decorations, construction techniques, and uses of Papua New Guinean pottery. It is also a way to visualise how ceramic technological knowledge may have spread and changed through Papua (and the wider region). 
+
+Historically, societies in Papua consisted of smaller communities that are thought to have deliberately maintained distinct linguistic and material culture traditions in order to develop and preserve group identities[^1]. Papua New Guinea is the most linguistically diverse country in the world, with over 800 languages. Part of this stems from people arriving on the New Guinea Island over 40,000 years ago[^1]. There is no evidence that pottery was present in New Guinea until contact 3000-4000 years ago with [Austronesian](https://perma.cc/P4RA-TZCD) peoples originating from Taiwan. Austronesian populations continued expanding further and reached as far east as Hawai’i and Rapa Nui. The timing and nature of the interactions of the Austronesian and older (‘Papuan’/’Non-Austronesian’) peoples is of [great interest](https://perma.cc/SEA9-2483). Some communities in Papua New Guinea, mainly those on islands and along the coast, speak ‘Austronesian’ languages and carry segments of the ‘Austronesian’ genetic signature[^2]. The predominance of pottery making in coastal regions of Papua New Guinea reflects the adoption of this practice from ‘sea-people’.
+
+Using JavaScript libraries allows you to determine how you want to make a scene interactive. For example, this scene could be redesigned so that a mouse click (or keyboard choice) could change the map to show the different linguistic regions, or to indicate the proposed Austronesian migration route. Alternatively, when a jar is selected, the map image could show where that community traded its jars. The Adzera-made jars were traded east into the highlands and west into New Britain. While this scene focuses on geographic differences, you could design a scene using a timeline to reflect changes in vessel form and decoration over time. You could also utilise the 3D space to have the vessels arranged on virtual shelves or in museum cases, or the map could be a 3D model showing the terrain.
+
+In Part 1 you learnt how to import complex models. In this lesson you will learn how to: add simple 2D and 3D shapes (such as planes and spheres); change model properties (such as colour, size, and visibility); add image textures to planes; create object groups; let users select objects with raycasting; and trigger changes to the scene when an object is selected. While a simple interactive scene will be created here, these techniques could be applied to many other interactive scenes. For example, users could be given options to toggle the visibility, size, or colour of groups of vessels with different properties, such as potter gender or language.
+
+The ability to alter the size of a selected vessel could also allow more jar models to be incorporated into the scene. The models could initially be small enough to fit together, then expand when selected for closer inspection. Designing your own scenes with three.js gives you more flexibility in scene creation. In this lesson you will learn how to create a basic interactive scene, but three.js has the ability to create intricate galleries with professional appearances such as [Artexpress](https://perma.cc/A6VH-RBK7), which displays Australian High School exam artwork.
+
+## Setting Up
+
+In addition to the technical requirements in Part 1, for Part 2 of this lesson, you will need to download the [`/models` folder](/assets/building-3d-environments-threejs-pt-1-2/models.zip) containing the individual jar models, and the [`/textures` folder](/assets/building-3d-environments-threejs-pt-1-2/textures.zip) with information about them.
+
+Place the downloaded models and textures folders in the myscene folder, replacing any existing folders if necessary (Figures 1–2). Keep the `index.html` and `main.css` files that you created in Part 1. If you did not do Part 1, you need to download [`index_pt1_complete.html`](/assets/building-3d-environments-threejs-pt-1-2/index_pt1_complete.html) and [`main.css`](/assets/building-3d-environments-threejs-pt-1-2/main.css) files we've prepared. Rename the `index_pt1_complete.html` file to `index.html` and place them in a folder called `myscene`. If you run into problems when editing code that you cannot fix, you can download and inspect the finished code [`index_pt2_scene.html`](/assets/building-3d-environments-threejs-pt-1-2/index_pt2_scene.html) or [`index_pt2_game.html`](/assets/building-3d-environments-threejs-pt-1-2/index_pt2_game.html) that we've prepared.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-01.png" alt="Screenshot of the VSC editor showing a list of `glb` files in the expanded models folder." caption="Figure 1. File structure for Part 2 as shown in VSC, with the models folder expanded. The `index.html` file is shown in the main panel." %}
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-02.png" alt="Screenshot of the VSC editor showing a list of `jpg` files in the expanded textures folder." caption="Figure 2. File structure for Part 2 as shown in VSC, with the textures folder expanded. The texture file `Abelam.jpg` is shown in the main panel." %}
+
+If you made `autoRotate` true in Part 1, comment out that line (i.e. add `//` to the beginning of the line). In addition, comment out the `controls.update` in the render function (make sure not to touch the one in the init function). 
+
+Next, in the `index.html` file from Part 1, remove the code that loads the `glTF` model that was used in Part 1. In other words, remove the following lines of code:
+
+```
+// load model
+// function used for loader
+function onLoadMap( gltf ) {                
+  themodel = gltf.scene.children[0];
+  themodel.position.set( 0, desk, 0); // x, y, z
+  themodel.scale.set( 1, 1, 1); // x, y, z
+  scene.add( themodel);
+}
+// the loader is given the model file name (first argument) which is passed to the function (second argument), function to do while loading (3rd argument), function called if error (4th argument).
+loader.load( 'models/png_sceneDRACO.glb', onLoadMap, undefined, function ( error ) {console.error( error );} ); 
+```
+
+The next section explains how to plan and design an interactive scene before building it. You do not need to draw the plan for this scene or game yourself. However, viewing the scene mock-ups can help you understand the different components used in this lesson and provide an example of how you might plan your own scenes or games.
+
+## Using Mock-ups to Plan a Scene or Game
+
+In Part 1 it was explained that scenes have a camera, light(s), and models, and that the positions of these in 3D space are specified in the code. If you do not remember the three (x, y and z) axes (the red, green and blue arrows) in the [three.js editor](https://threejs.org/editor/), you may want to reopen it, or examine Figures 5-10 in Part 1. Part 1 utilised one model. With multiple models it is useful to draft out where components such as the camera, lights, and models will be placed. You can do this with pen and paper, and using grid or dotted paper can be especially useful. Additionally, you can mock-up views using whatever vector graphics software you are familiar with to create figures (Inkscape, Affinity Designer, Adobe Illustrator, Canva, or Powerpoint). 
+
+When designing your own interactive scenes or games, draw the three different 2D views: the "front view", "side view", and "bird's-eye view". Figure 3 shows mock-up views for the game version of the scene that will be created in the second part of this lesson. Note that the x, y, and z axes are clearly identified in the mock-ups, with their positive and negative directions indicated.
+
+{% 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 three 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." %}
+
+Mock-ups are good for identifying what assets (models and textures) you will need. Part 1 used a model which featured a geographical map and 29 jars, but in this lesson the components of that model will be imported separately. For simplicity the lesson will only use six jar models but the other 23 can be added at the end if you wish. The scene will also need three panels that show instructions, references, and information about the jars. Nine spheres will be added to the panel on the right to form part of the colour key, showing how the jars were made by the potters. The middle gallery panel will display either instructions or information about the selected jar, so its content will change depending on which jar is selected. To achieve this, six additional panels will be created but will not initially be visible.
+
+In the scene, the jars will be placed on the map at the locations 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 six [tori](https://perma.cc/TCY9-CUJV) (the geometric shapes commonly known as donuts). Tori (the plural of 'torus') can be harder for 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. The Agarabi-speaking potter, Uneri Ankimpa, can be seen using a [torus-shaped kawe'aron](https://perma.cc/5T8Q-WLXY)[^3].
+
+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 a scene will help you identify where the same value is used repeatedly, such as the x and z positions of the key spheres. Variables can be used for these values, so that it is easier to alter all instances together. 
+
+Planning out a scene can also help you identify where measurements depend on one another. An example of this is in the first mock-up of Figure 3, the height of the galleries is dependent on the height of the map, because they need to be above the map. To manage this, you can define variables to represent these relationships. For instance, you might create a variable called `desk` to represent the height of the map, and another variable called `gheight` for the height of the galleries, defined in relation to it (for example, `gheight = desk + 0.55`). 
+
+The map was placed at the chosen y value because the site was designed to be viewed in virtual reality (VR). A height of 0.8 m is comfortable for a standing person to look down at the map and place objects onto it. Three.js uses metres as its unit of measurement, although this is only important if you plan for your site to be viewed in VR.
+
+## Using the three.js Basic Geometries: Adding the Spheres for a Colour Key
+
+If you do not have the local server running, save the `index.html` file and start the server in the terminal with the following command:
+
+```
+npx serve
+```
+
+Visiting the served website in your web browser (generally http://localhost:3000 but check the address given in the terminal) should show an empty scene with a peach background.
+
+If you re-examine the [SketchFab version](https://skfb.ly/putNM) of the model used in Part 1 you will notice that the jars are different colours. These colours indicate what techniques were used to make the jar. For example kabe, the cooking vessels made by Agarabi speakers, are constructed with [coiling then beating](https://perma.cc/5T8Q-WLXY)[^3], while bodi made by Bilibil speakers are started with a clay lump and finished by paddle and anvil[^4]. In the SketchFab model the vessels using these two construction techniques are coloured yellow and dark blue, respectively. 
+
+To communicate these techniques to the website user, a key featuring a plane and coloured spheres will be constructed. The plane will have an image texture listing the construction techniques, with coloured circles indicating the corresponding model colours. Coloured spheres will be placed over these circles, allowing the colours of the jars to be easily modified without the need to create a new image texture. Adding the spheres also provides an introduction to the use of basic geometries in three.js.
+
+Meshes have geometries and three.js has several basic 2D geometry types, including [plane](https://perma.cc/2M5J-QD3U), [circle](https://perma.cc/R48A-6V3F), [ring](https://perma.cc/G8EV-JG7N), [shape](https://perma.cc/GK2X-RNSJ), and more 3D geometry types that include [spheres](https://threejs.org/docs/#SphereGeometry), [boxes](https://perma.cc/Z6B3-8WD2), [tori (donuts)](https://perma.cc/X5QM-9DW6), [cylinders](https://perma.cc/C2MD-7DAU), and [tetrahedrons](https://perma.cc/FG39-JKLX) (Figure 4). The parameters for these generally include lengths (in metres) and numbers of segments (for height, width, etc.), but they can also be given parameters to create partial shapes. There are also some more complicated geometries, including [lathes](https://perma.cc/64TM-8BNQ), that will not be used here. These are created from a series of user-provided 2D points that are rotated around the y axis to form a 3D shape.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-04.png" alt="Six different geometry types: sphere, box, cylinder, torus, and lathe are shown in wireframe." caption="Figure 4. The 3D geometries that three.js can add include spheres, boxes, tori, cylinders, tetrahedrons, and lathes. Parameters for the geometries often include length and segment number measurements. Lathe geometries are generated from a series of points (that are then rotated) and the most simple lathe is shown." %}
+
+This scene will use a plane and nine spheres arranged in a vertical line to create a vessel colour key showing how the jars were made.
+
+The colours are set in a parameters list (more correctly called an 'array' in JavaScript). This means the same colour values are used for both the key and the jars. By storing the colours in one place, you can easily change them by updating the corresponding hex code in the array, and both the key and the jars will update automatically. Start with the proposed values and alter them later if you wish.
+
+For each sphere the position in x, y, z order needs to be set. The variables `sphereposx` and `sphereposz` will be used for the x and z positions, and the y position will be varied so the spheres end up in a vertical line. The variables for the panel vertical placement (relative to the panel centre), and the sphere x and z positions will be declared. 
+
+`let` or `const` can be used to declare variables, the difference is that variables declared with `const` can not be changed later in the code, and must have a value when declared. Many of these variables could be declared within the init function, but having them all together at the start of the code makes them easier to find and change.
+
+To declare the variables, **after** the following line of code:
+
+```
+let desk = 0.8;
+```
+
+**Add** the following code:
+
+```
+let gheight = desk + 0.55; //panel height
+let sphereposx = 0.84 // key sphere x position
+let sphereposz = -0.75 // key sphere z position
+
+// colours for the key spheres and the jars
+const parameters = { 
+  materialColor: '#9c5315', // brown
+  coilColor: '#ff0000', // red
+  ringTopColor: '#19ffE7', // light blue
+  coilBeatenColor: '#e8e337', // yellow
+  nabColor: '#209F00',  // green
+  wangelaColor: '#BEBEBE',  // light grey
+  paddleColor: '#1e2f97', // dark blue		
+  paddleAddColor: '#a61ef4', // purple
+  amphColor: '#fc9483' // pink
+}
+
+```
+
+Next the nine sphere meshes will be created. To create a sphere mesh from a basic three.js geometry an instance of a sphere 'geometry' must first be created. This geometry is given values (called arguments) that specify the radius size (use 0.04 m) and the number of width and height segments (use 15 and 5 respectively). You can see how the geometries have segments in Figure 4 and if the number of width or height segments is increased, the spheres get rounder.
+
+Geometries can be reused, so an instance of the SphereGeometry will be created, called `sphere` and used to create nine different sphere meshes. Each sphere mesh gets assigned a [material](https://perma.cc/4ZVV-EFNH) with a colour. This code uses [standard material](https://perma.cc/SLG4-SUGG). There are alternatives, but it is important to note that some material types are more dependent on lights than others.
+
+In summary, the following code will:
+
+- create the sphere geometry, specifying its radius and number of width and height segments 
+- for each of the 9 spheres, make a mesh from the created geometry and a standard material (with a colour from the parameter list)
+- add all the spheres to the scene
+
+**Within** the init function definition **after** the following code:
+
+```
+scene.add( light );
+```
+
+**Add** the following code:
+
+```
+// add models
+
+// add key for jar colours using spheres and a plane
+//spheres for key
+const sphere = new THREE.SphereGeometry( 0.04, 15, 5); //radius in metres, width segments, height segments. Will be reused.
+const sphere1 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.materialColor })); 
+sphere1.position.set( sphereposx, gheight + 0.30, sphereposz);
+const sphere2 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.coilColor })); 
+sphere2.position.set( sphereposx, gheight + 0.21, sphereposz);
+const sphere3 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.ringTopColor})); 
+sphere3.position.set( sphereposx, gheight + 0.12, sphereposz);
+const sphere4 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.coilBeatenColor})); 
+sphere4.position.set( sphereposx, gheight + 0.03, sphereposz); 
+const sphere5 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.nabColor })); 
+sphere5.position.set( sphereposx, gheight - 0.06, sphereposz); 
+const sphere6 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.wangelaColor })); 
+sphere6.position.set( sphereposx, gheight - 0.15, sphereposz); 
+const sphere7 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.paddleColor})); 
+sphere7.position.set( sphereposx, gheight - 0.25, sphereposz); 
+const sphere8 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.paddleAddColor})); 
+sphere8.position.set( sphereposx, gheight - 0.35, sphereposz); 
+const sphere9 = new THREE.Mesh( sphere,  new THREE.MeshStandardMaterial( {color: parameters.amphColor })); 
+sphere9.position.set( sphereposx, gheight - 0.44, sphereposz); 
+scene.add( sphere1, sphere2, sphere3, sphere4, sphere5, sphere6, sphere7, sphere8, sphere9 );
+```
+
+Save the `index.html` file and reload in the browser. A webpage with nine differently coloured spheres (Figure 5) should appear. 
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-05.png" alt="Webpage with nine spheres of different colours in a vertical line." caption="Figure 5. Webpage with nine differently coloured spheres." %}
+
+### Texturing Planes: Adding the Information Panels and Map
+
+Now create the panel for the key (gallery2, on the right), along with the other two information panels that the user will see at the start: the references panel (gallery3, on the left) and the instructions panel (gallery, in the middle). The panels will be simple 2D planes with textures applied to them. The left and right panels will not change. However, the central instruction panel will disappear when the user clicks a jar and the information panel for that community will appear in its place. This can be done by toggling the visibility of different panels on and off, rather than changing the texture on a plane (which would also be implementable).
+
+The information panels need to face the camera. The default planes do this. The planes will be given image ‘textures’, which contain text describing the individual artefacts. These textures are `jpeg` and `png` files and they all have pixel dimensions of 2<sup>n</sup> by 2<sup>n</sup>, e.g. 4096 × 2048. This helps with efficient rendering. The larger the image files, the longer they take to load, and very large images may not load at all. By default only one side (the 'front') of a panel is textured. Here, the dimensions of the panels match the dimensions of the image textures. When they do not match, different options can be used, including image tiling.
+
+The use of images with text (created and exported from any graphics program such as Affinity Designer or PowerPoint) is one way to show text. There are [alternatives](https://perma.cc/T5P2-QSXQ). 
+
+Textures need to be loaded by a `TextureLoader`. After loading each texture, a set of lower-resolution images (a [mipmap](https://perma.cc/6FYW-6WTC)) gets generated. The renderer will automatically use one of the lower-resolution images when the texture appears small or far away. Using lower-resolution images for areas that cover fewer pixels is not only more efficient, but can also prevent image 'shimmering' (a flickering or noisy visual effect that can occur when fine details are rendered at too small a scale). Mipmap creation is one of the reasons for using images of 2<sup>n</sup> by 2<sup>n</sup> dimensions, but the creation of the down-sampled image sets takes processing time. 
+
+First declare the variables. 
+
+**After** the following code:
+
+```
+// Variable declaration and setting
+```
+
+**Add** the following code:
+
+```
+let psize = 1.0; // panel dimensions
+let gallery, gallery2, gallery3;			
+```
+
+Next a textureLoader will be made and the three textures loaded. For each of the three panels, make a mesh with one of the textures, and move the panel to the correct position.
+
+**Within** the init function definition, **after** the following code:
+
+```
+// add models
+```
+
+**Add** the following lines:
+
+```
+// add introduction, key and reference panels by loading textures then adding planes .
+// load textures and generate Mipmaps
+const textureLoader = new THREE.TextureLoader();
+const introTexture = textureLoader.load( 'textures/Intro.jpg' );
+introTexture.generateMipmaps = true;
+const refTexture = textureLoader.load( 'textures/sources.jpg' );
+refTexture.generateMipmaps = true;			
+const keyTexture = textureLoader.load( 'textures/key.jpg' );
+keyTexture.generateMipmaps = true;
+    
+// add introduction information panel
+gallery = new THREE.Mesh( new THREE.PlaneGeometry(psize, psize), new THREE.MeshBasicMaterial({ map: introTexture }));
+gallery.position.set( 0, gheight, sphereposz); 
+// add the panel for the key
+const gallery2 = new THREE.Mesh(new THREE.PlaneGeometry(psize, psize), new THREE.MeshBasicMaterial({ map: keyTexture }));
+gallery2.position.set( 1.25, gheight, sphereposz); 
+// add the panel for the references
+const gallery3 = new THREE.Mesh(new THREE.PlaneGeometry(psize, psize), new THREE.MeshBasicMaterial({ map: refTexture }));
+gallery3.position.set( -1.25, gheight, sphereposz); 
+
+scene.add( gallery, gallery2, gallery3);
+
+```
+
+Save the `index.html` file and reload the browser. There should be three panels, with the spheres on the right-hand panel. If the panels are black, the images are probably in the wrong directory. It should look like Figure 6, but without the map.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-06.png" alt="Webpage with three square panels of text and a horizontal map of Papua." caption="Figure 6. Webpage with three vertical information panels and a horizontal map." %}
+
+Next, information panels for all the jars will be created. The scene is designed so the panels will be hidden (by making `.visible = false`) until the relevant jar is selected by the user. A variable, `selectedPlane` is used to track which panel is currently visible. At the start an instruction panel is displayed. 
+
+To help keep track of the different elements for each jar, a consistent naming convention will be used. Each jar will have: 
+
+- an information panel or gallery (called: 'xG')
+- a model (called: 'xM')
+- a loading function (called: 'onLoadX')
+- a community site (called: 'xSite')
+
+Here, 'x' refers to a short name for the community (for example, 'yabob' or 'aibom', the village or area where the jar the model was based on was made). Note that variable and function names cannot contain spaces, so these shortened names are used to keep the code readable and consistent.
+
+First declare the variables. 
+
+**After** the following code:
+
+```
+// Variable declaration and setting
+```
+
+**Add** the following code:
+
+```
+let adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG; // information panels for the different jars
+let selectedPlane;	// which information panel will be visible			
+```
+
+The code for the six jar information panels will be very similar, so a function can be used to avoid repeating it. The function receives the filename of the image texture, loads the texture, creates the mipmap, creates a plane mesh using that texture, sets the position of the mesh, and makes it invisible. The created function (called `createGallery`), will `return` a textured plane mesh and assign it to the named variable (i.e. `adzeraG`). 
+
+**Within** the init function definition, **after** the following code:
+
+```
+scene.add(gallery, gallery2, gallery3);
+
+```
+**Add** the following code:
+
+```
+selectedPlane = gallery; // start with the instructions.
+
+// add the jar information panels then make them not visible
+function createGallery(filename){
+  const aTexture = textureLoader.load( filename );
+  aTexture.generateMipmaps = true;
+  const model = new THREE.Mesh( new THREE.PlaneGeometry( psize, psize ), new THREE.MeshBasicMaterial({ map: aTexture }));
+  model.position.set( 0, gheight, sphereposz); 
+  model.visible = false;
+  return model;
+}
+
+// 'call' the createGallery function for the information panels/galleries.
+adzeraG = createGallery('textures/Adzera.jpg');
+aibomG = createGallery('textures/Aibom.jpg');
+mailuG = createGallery('textures/Mailu.jpg');
+dimiriG = createGallery('textures/Dimiri.jpg');
+louisadeG= createGallery('textures/Louisade.jpg');
+yabobG = createGallery('textures/Yabob.jpg');
+scene.add(adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG);
+```
+
+Next, a plane for the map is needed. As planes are added 'upright' by default, this plane has to be rotated 90 degrees (- Math.PI/2) around the x axis. 'Math' is a JavaScript object, which has properties, including Math.PI (i.e. π, 3.141), and methods, including Math.random() (used later in the lesson). See the [mdn web docs](https://perma.cc/P86Q-CKPD) for more properties and methods. 
+
+Three.js uses [radians](https://perma.cc/G26V-XZDK) for its rotational units. As π (3.141) radians is 180 degrees, 90 degrees is Math.PI/2. Rotation occurs in the counter-clockwise direction (when 'looking' towards the negative axis values), so for the way this scene is set up, the rotation of the plane for the geographical map must be -Math.PI/2 around the x axis to have the 'front' of the panel facing upwards.
+
+The code below will add variables for the map and a ratio value that allows you to experiment with the map size. 
+
+**After** the following code:
+
+```
+// Variable declaration and setting
+```
+
+**Add** the following code:
+
+```
+let theMap;
+let ratio = 2; 
+let piecescale = ratio; 
+            
+```
+**Within** the init function definition, **after** the following code:
+
+```
+scene.add( adzeraG, aibomG, mailuG, dimiriG, louisadeG, yabobG);
+```
+
+**Add** the following code:
+
+```
+// add the map of New Guinea
+const mapGeometry = new THREE.PlaneGeometry( 3 * ratio, 1.5 * ratio );
+const mapTexture = textureLoader.load('textures/png.png'); // from google maps
+mapTexture.generateMipmaps = true; 
+theMap = new THREE.Mesh( mapGeometry, new THREE.MeshBasicMaterial({ map: mapTexture }));
+theMap.rotation.x = - Math.PI / 2; // Equal to 90 degrees
+theMap.position.set(0, desk, 0); // desk height
+scene.add(theMap);
+
+```
+
+Save the `index.html` file and reload the web browser. The map should appear with the panels (Figure 6).
+
+
+### Adding Complex Models: the Jar Models
+
+As shown in Part 1 of this lesson, the jar models are made of meshes (Figure 7).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-07.png" alt="Framework of a jar with a sculptured face." caption="Figure 7. Mesh of the Aibom jar." %}
+
+As with the spheres, the jars will be assigned a standard material with a colour that corresponds to the colour key (Figure 8). 
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-08.png" alt="Jar with a sculptured face coloured brown." caption="Figure 8. The Aibom jar with a solid brown colour." %}
+
+Materials such as the standard material used here have emissive properties that can be enabled to make them appear to glow with colour. Later in the scene, a red emissive colour will be used to indicate when a jar is selected (Figure 9).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-09.png" alt="Jar with a sculptured face brightly coloured red." caption="Figure 9. The Aibom jar with red emission." %}
+
+The jars will be added to a group (called `jars`) and the group will then be added to the scene. This allows you to treat all jars as a single collection, for example later, when enabling selection for all objects belonging to the jars group. 
+
+Each jar will get a [userData](https://perma.cc/D73E-NYNH) property that links it to the information panel associated with it, so that the panel can be displayed when the jar is selected. Three.js 'userData' properties do not have to be declared. They are default empty objects and more than one can be created. At this stage, `aibomM.userData.planes` will be created. Additional ones such as `aibomM.userData.somethingelse` and `aibomM.userData.anotherthing` (where 'somethingelse' and 'anotherthing' stand in for names of your choice) could also be added.
+
+Model loading will be written in three different ways. All three approaches are functionally the same, but differ in how concise the code is.
+
+To begin, one model will be added, aibomM, in a similar way to how you added the composite model in Part 1. A function is defined `onLoadAibom` that runs after the `.glb` file is loaded by the loader's load method. As mentioned in Part 1, you need to put the positioning and scaling of the model in this function so that they only occur after the model has finished loading. 
+
+The load method has four arguments: the model filename, a function run after the model is loaded, a function run while the model is loading, and a function run if there is an error. As in Part 1, the function that runs while the model is loading will be left as `undefined` and an anonymous (unnamed) function will be used if an error occurs while the model is loading.
+
+Replace the declaration of the model with declarations of the jars and their group. 
+
+**Find** the following code:
+
+```
+let themodel;
+
+```
+
+The line of code above should be **changed** to the following:
+
+```	
+let jars;
+let aibomSite, dimiriSite, louisadeSite, mailuSite, adzeraSite, yabobSite;
+let adzeraM, aibomM, mailuM, louisadeM, dimiriM, yabobM;
+
+```
+
+Next an empty group is created and added to the scene and the `onLoadAibom` function that will run after loading and that will call the `loader.load method`, is created.
+
+**Within** the init function definition, **after** the following code:
+
+```
+scene.add( sphere1, sphere2, sphere3, sphere4, sphere5, sphere6, sphere7, sphere8, sphere9 );
+```
+
+**Add** the following code:
+
+```
+// add jar models. Added in group so they can be selected.
+jars = new THREE.Group();
+scene.add( jars );
+
+// jar/site positions
+aibomSite = { x: 0.36, z : -0.01 }
+mailuSite = { x: 0.84, z : 0.48 }
+louisadeSite = { x: 0.99, z : 0.59 }
+adzeraSite = { x: 0.61, z : 0.15 }
+dimiriSite = { x: 0.43, z : 0 }
+yabobSite = { x: 0.572, z :  0.0396 }
+
+// loading function for Aibom jar model
+function onLoadAibom( gltf ) {				
+  aibomM = gltf.scene.children[0];
+  aibomM.material = new THREE.MeshStandardMaterial();
+  aibomM.material.color.set(parameters.materialColor);
+  aibomM.scale.set(piecescale, piecescale, piecescale);
+  aibomM.position.set(aibomSite.x* ratio, desk + 0.01, aibomSite.z* ratio);
+  aibomM.userData.planes = aibomG;
+  jars.add(aibomM);
+}
+loader.load( 'models/aibom.glb', onLoadAibom, undefined, function ( error ) {console.error( error );} );	
+```
+
+Save the `index.html` file and reload the web browser. You should see the model. Note that `aibomM` does not need to be added directly to the scene, since it is already part of the jars group, which has been added to the scene.
+
+Note also that the introduction of the `piecescale` variable is not strictly necessary, as it is currently set to the same as the ratio, but it allows you to adjust the size of the jars independently from the map later if needed.
+
+To avoid repetitive code, a function `createModel()` will be created, and the `onLoadAibom()` function will run this `createModel()` function when it loads the model. The `createModel()` function will take four arguments: the model filename (gltf), its position, the model colour, and the matching gallery (information panel) as these vary with the different models. 
+
+Using two different functions may seem confusing, and it is not essential to fully understand this at this stage. However, it may be useful when you later write your own code. The `loader.load` method does not expect the function called after loading (i.e. `onLoadAibom`) to return anything. In practice, this means you do not use a `return` statement inside the onLoadAibom function. So the loaded model has to be assigned to a pre-declared variable (i.e. `aibomM`). Passing additional parameters (such as colour or position) directly into callback functions like onLoadAibom is difficult, so you have to find another way to specify the colour, position, and gallery panel of the jar model. One solution is to use a second function to handle these values. One function (createModel) takes arguments (such as position, colour, and gallery panel) and returns a model; the other function (onLoadAibom) loads the model.
+
+**Find** the following code:
+
+```
+// loading function for Aibom jar model
+function onLoadAibom( gltf ) {				
+  ...
+}
+loader.load( 'models/aibom.glb', onLoadAibom, undefined, function ( error ) {console.error( error );} );	
+```
+The **lines** of code above should be **changed** to the following:
+```
+//a function to make the model with the parameter specified
+function createModel(gltf, site, col, gallery){
+  const model = gltf.scene.children[0];	
+  model.material = new THREE.MeshStandardMaterial();
+  model.material.color.set(col);
+  model.scale.set(piecescale, piecescale, piecescale);				
+  model.position.set(site.x * ratio, desk + 0.01, site.z * ratio);	
+  model.userData.planes = gallery;
+  return model;
+}
+
+//calls the createModel function but still in a separately defined function
+function onLoadAibom( gltf ) {							
+  aibomM = createModel(gltf, aibomSite, parameters.materialColor, aibomG);			
+  jars.add(aibomM);
+}
+loader.load( 'models/aibom.glb', onLoadAibom, undefined, function ( error ) {console.error( error );} );
+
+```
+Save the `index.html` file, reload the browser and check the jar model still appears.
+
+One jar has now been imported, and the code could include five additional functions (i.e. onLoadMailu, onLoadLouisade, etc.) to import the other five jars. However, the code can be condensed further by using 'anonymous' functions, meaning that the functions being called are not named.
+
+Keep the createModel function but **find** the following code:
+
+```
+//calls the createModel function but still in a separately defined function
+function onLoadAibom( gltf ) {							
+  ...
+}
+loader.load( 'models/aibom.glb', onLoadAibom, undefined, function ( error ) {console.error( error );} );
+```
+
+The **lines** of code above should be **changed** to the following:
+
+```
+// directly has the onLoad function as an anonymous function in the loader.load
+// load a jar (filename, load function, function while loading, error function)
+loader.load( 'models/aibom.glb', function( gltf ) {							
+  aibomM = createModel(gltf, aibomSite, parameters.materialColor, aibomG);			
+  jars.add(aibomM);
+}, undefined, function ( error ) {console.error( error );} );
+
+loader.load( 'models/mailu.glb', function( gltf) {							
+  mailuM = createModel(gltf, mailuSite, parameters.nabColor, mailuG);			
+  jars.add(mailuM);
+}, undefined, function ( error ) { console.error( error );} );
+
+loader.load( 'models/louisade.glb', function( gltf ) {
+  louisadeM = createModel(gltf, louisadeSite, parameters.ringTopColor, louisadeG);			
+  jars.add(louisadeM);
+}, undefined, function ( error ) {console.error( error );} );
+
+loader.load( 'models/adzera.glb', function( gltf ) {
+  adzeraM = createModel(gltf, adzeraSite, parameters.coilBeatenColor, adzeraG);			
+  jars.add(adzeraM);
+}, undefined, function ( error ) {console.error( error );} );
+
+loader.load( 'models/dimiri.glb', function( gltf ) {
+  dimiriM = createModel(gltf, dimiriSite, parameters.coilColor, dimiriG);			
+  jars.add(dimiriM);
+}, undefined, function ( error ) {console.error( error );} );
+
+loader.load( 'models/yabob.glb', function( gltf ) {
+  yabobM = createModel(gltf, yabobSite, parameters.paddleColor, yabobG);			
+  jars.add(yabobM);
+}, undefined, function ( error ) {console.error( error );} );
+
+```
+
+Save the `index.html` file and reload the browser. You should see five models (Figure 10). You will have to move around to see the sixth.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-10.png" alt="Five jar models sit on a map of Papua." caption="Figure 10. Webpage with six jars from Papua, but one is out of camera range." %}
+
+It does not matter which of the three methods you use if you are writing your own code.
+
+(Note that if `let piecescale = ratio;` is changed to `let piecescale = ratio*2;` the vessels become bigger, but some will overlap.)
+
+Where to set the positions of the jars can be calculated by taking into account the map dimensions. This can be done on graph paper, although these positions were obtained via placement of the jars in Blender.
+
+### Using Raycasters: Adding Jar Selection
+
+The interactive scene depends on users being able to select a jar to change the information panel. To enable this, an 'event listener' needs to be created. 'Event listeners' tell the scene what to do when the user interacts with the website, such as by resizing the window, clicking the mouse, or using the keyboard. As with the `WindowResize` event listener in Part 1, this listener gets the event (in this case `click`), and a function (known as an event handler) that will be defined. Input events pass event information to their handler, some of which is dependent on the type of event. The click event passes an object (commonly called `event`) that contains the mouse cursor's coordinates relative to the viewport/window. 
+
+To determine which jar in 3D space is being targeted by the user's mouse position in 2D space, three.js uses raycasting. Whenever the user clicks on the scene, the three.js raycaster 'sends' a 'ray' from the camera position to a pointer whose 2D position is calculated from the click event's information. The raycaster has an `intersectObjects` method, which returns an array of the 3D objects that the cast ray has hit. This array is ordered by distance to the camera so the first in the array (index 0) will be the nearest object. The `intersectObjects` method can also be told what objects can be intersected and here, the children of the `jars` group will be specified. This is the primary reason you made the `jars` group.
+
+Notice that three.js stores coordinates in a 'vector'. A THREE.Vector2 is used for 2D coordinates (referred to as x and y) such as the pointer position, and a THREE.Vector3 is used for 3D coordinates (x, y and z). 
+
+Here you will declare the variables for the raycaster, the mouse pointer and the object selected at the time. 
+
+**After** the following code:
+
+```
+// Variable declaration and setting
+```
+
+**Add** the following code:
+
+```
+let raycasterM, pointer, selectedObj; // for mouse controls
+```
+
+A raycaster and pointer (an x, y vector) need to be created. Errors can occur if declared objects are empty, so make `selectedObj` a torus initially. 
+
+**Within** the init function definition, **after** the following code:
+
+```
+controls.update();
+```
+
+**Add** the following code:
+
+```
+// Mouse controls for jar selection
+raycasterM = new THREE.Raycaster(); // ray to tell what is being pointed at
+pointer = new THREE.Vector2(); // x, y co-ordinates for the ray to aim at, empty to start
+selectedObj = new THREE.Mesh( new THREE.TorusGeometry( 0.015, 0.007, 20, 20  ), new THREE.MeshStandardMaterial({color: 0x006400})); // initialising the selected jar with something- here a torus, to prevent issues.
+
+```
+
+Then, tell the window to 'listen' for any clicks and send the click information to the `onClick` function that will be defined next.
+
+**Within** the init function definition, **after** the following code:
+```
+window.addEventListener( 'resize', onWindowResize );
+```
+
+**Add** the following code:
+```
+window.addEventListener( 'click', onClick );
+```
+
+Next, tell the listener what to do when the user clicks in the window. To begin with, the newly selected jar will simply glow red (i.e. become red emissive). When the mouse is clicked, the scene needs to:
+
+- turn the orbit controls off (use `event.preventDefault()`)
+- get a pointer position from the click position (here the code from a three.js example is used, it calculates pointer.x and pointer.y from the `event.clientX` and `event.clientY` information and the window dimensions)
+- cast a ray from the camera to the pointer (use the `setFromCamera` method of the Raycaster)
+- see if any jars are there (use the `intersectObjects` method of the Raycaster and tell it to only look for objects in the jars group, and give any objects found to a group called `intersects`).
+- see if it finds any jars (if the length of intersects is greater than 0)
+- get the closest jar (create `found` and makes it the closest (first) intersected object, change `selectedObj` to `found`)
+- highlight it (set found's `material.emissive.r` to 'on' (i.e. `=1`))
+
+After the resize listener, i.e. **after** the following code:
+
+```
+function onWindowResize() {
+  ...
+}
+```
+
+**Add** the following code:
+
+```
+// called on mouse click. Gets position of click, gets intersecting object, makes it emissive, gets the matching info plane
+function onClick( event ) { // event is the input event information being passed from the event
+  event.preventDefault(); // stops the orbiting
+  // gets 2D click position
+  pointer.x = event.clientX / window.innerWidth * 2 - 1 // this formula comes from the three.js examples
+  pointer.y = - (event.clientY / window.innerHeight) * 2 + 1
+  // detects what the user is trying to select in 3D space from viewpoint and 2D pointer
+  raycasterM.setFromCamera( pointer, camera );
+  const intersects = raycasterM.intersectObjects( jars.children); // an array, nearest to camera will be first
+  // if there is something being clicked		
+  if(intersects.length > 0){
+    const found = intersects[ 0 ].object; // get the selected object, index 0 is the first
+    selectedObj = found;
+    found.material.emissive.r = 1; // turn the selected object red emissive. 1 is on.
+  }
+}	
+```
+
+You can save the `index.html` file and reload the browser, and see that clicking on the jars makes them red. However, the intended functionality is for the jars to go back to their original colour after a new jar is selected. Toggling `material.emissive.r` off and on to indicate selection means that the original colour of the jars does not have to be stored, as emissive can just be turned off.
+
+ 
+**Within** the onClick function definition, **after** the following code:
+```
+if(intersects.length > 0){
+```
+**Add** the following code:
+```	
+  selectedObj.material.emissive.r = 0; // turn the current selected obj back to not emissive. 0 is off
+```
+Save and reload. There should now only be one highlighted jar at a time.
+
+The onClick function also needs to:
+
+- hide the current panel (set `.visible` to false for the `selectedPlane`)
+- change the `selectedPlane` to the new jars linked userData panel
+- make that panel visible (change `selectedPlane` and set its `.visible` to true).
+
+
+**Within** the onClick function definition, **after** the following code:
+
+```
+selectedObj.material.emissive.r = 0; // turn the current selected obj back to not emissive. 0 is off
+```
+
+**Add** the following code:
+
+```
+selectedPlane.visible = false; // hide the current information panel
+```
+
+Then, **after** the following code:
+
+```
+  found.material.emissive.r = 1; // turn the selected object red emissive. 1 is on.
+```
+
+**Add** the following code:
+
+```
+selectedPlane = found.userData.planes; // get the new matching information panel for the selected object
+selectedPlane.visible = true; // make the new panel visible
+```
+
+After reloading, you should be able to select a jar and see the middle information panel change to display information about that jar. You can try `.emissive.g` or `.emissive.b` to make the selected jar green or blue emissive, if you wish.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-11.png" alt="Five jars on a map with one glowing red as it has been selected." caption="Figure 11. Webpage showing the Aibom jar selected with its red emission set to true, and the Aibom information panel." %}
+
+The next sections are optional. In these sections, you can learn to turn the website into a puzzle game and to add additional jars.
+
+## Designing a Game
+
+When designing a game or puzzle, consider whether it is based on memory or logic. The main aim of games featuring material culture is generally to help users appreciate variation in artefact properties, such as form and decoration, rather than to make them remember every detail of each object encountered during the game.
+
+Often images of material culture are incorporated into the traditional memory game of finding matching images on overturned cards. See the 2D [Ho'omaka Hou Research Initiative Fishhook Memory Game](https://data.bishopmuseum.org/archaeology/game.html), which introduces users to the variety of forms and decoration in material culture (including fishhooks) they may not otherwise appreciate. 
+
+In contrast, jigsaw puzzles (which also commonly feature material culture) rely more on logic. 3D jigsaw puzzles can be made of material cultural artefacts and sites, but it can be quite difficult for users to manipulate pieces on a computer screen. 3D jigsaw puzzles are more usable in VR. One example is [Artsalad](https://artsalad.net) by Mariotto F., an opensource VR 3D puzzle game written with three.js.
+
+If 'The Jars of Papua' featured realistic jar models that users needed to place at the correct sites, it would be useful to provide a way for them to view the correct placements first. Alternatively, clues could encourage users to study the models more closely, reducing their reliance on memory.
+
+For this lesson, you will rely on the models being coloured according to their method of construction (building technique) to help users match vessels to sites. This is explained in the site information panel, which also includes details about decoration styles that may help users make matches. While it would be possible to match the models to the information panels without using a map of New Guinea, including the map helps reinforce the connection between the vessels and the communities that made them. It also highlights the diversity of material culture across Papua New Guinea (and West Papua).
+
+If you are planning to design a game, consider consulting guides such as Jesse Schell's, which discuss aspects of game design including the roles of skill versus chance, rewards, punishments, and scoring[^5]. Schell distinguishes 'puzzles' as "head" (thinking) games rather than "hand" (co-ordination and reaction) games. They outline 10 'puzzle principles': making the aim of the puzzle clear; making it easy for the player to know where to start; providing an indication of progress; avoiding making the puzzle appear unsolvable; varying the difficulty; maximising the player's choice over the order in which they complete different steps; including puzzles within puzzles; providing hints; providing the solution; and being careful with puzzles that rely on a trick or require the player to change how they interpret the problem.
+
+To transform the scene into a puzzle, the information panel needs to be altered, as it is the user's main source of information. The goal for the user is to start with the jars off the map, with the Papuan communities demarcated by selectable tokens. When the communities are selected by the user's mouse click, the information panel will provide the information on the pots made by that community. Information on the technique used to make the pot can be used to work out which of the jars may be a match, as the jars are coloured according to the technique and a key is provided. The decoration technique may also serve as a guide. For instance, when the user selects the site of the Iatmul community, the information panel reveals that their jars are made using the 'ring building technique on a hemispherical base' and are decorated with 'sculptural elements'. The key shows that models of jars made using this technique are coloured brown. Thus the user will look for a brown jar model with sculptural decorations. The user can move the jars with their mouse. If they place the matching jar on the community marker, then the jar becomes unmoveable and the background colour changes. 
+
+### Adding Simple Models: Tori (Donuts)
+
+In this game, users will receive clues for matching each jar to its community location by clicking on the community location. If presented with a map of Papua New Guinea and jars randomly positioned some distance above it, most users would not know where on the map to click to find the clues. Green tori (donut shapes) will therefore be used to mark the community locations and show the user where to start clicking. In the final step, the information panel will be changed to instruct the user to click on a torus.
+
+The torus is a basic three.js geometry, and the diameter, central hole size, and segmentation can be specified (Figure 4). However, tori are generated at the wrong angle for this game and need to be rotated (around the x axis) by 90 degrees (i.e. -Math.PI /2). Each torus's centre will be positioned slightly (1 cm) above the map (which is at 'desk' height) at y = desk + 0.01.
+
+Because each torus is connected to a different information panel, they still need to be created separately and added to a tori group. The mouse click event listener has to be altered so that it targets the tori group instead of the jars group. 
+
+Each site could be added with such code as follows:
+
+```
+aibomSite = new THREE.Mesh( new THREE.TorusGeometry( 0.015, 0.007, 20, 20 ), new THREE.MeshStandardMaterial({color: 0x006400}));
+aibomSite.position.set(0.36* ratio, desk + 0.01, -0.01* ratio);
+aibomSite.scale.set( piecescale, piecescale, piecescale);
+aibomSite.rotation.x = -Math.PI * 1/2;
+aibomSite.userData.planes = aibomG;
+```
+
+But it is also possible to make a function that takes position (x and z) co-ordinates and the relevant gallery. The function is then called for each site.
+
+In the `index.html` file **find** the following code:
+
+```
+let jars;
+```
+
+The line of code should be **changed** to the following:
+
+```
+let jars, tori;
+```
+
+**Within** the init function definition, **find** the following code:
+
+```
+aibomSite = { x: 0.36, z : -0.01 }
+mailuSite = { x: 0.84, z : 0.48 }
+louisadeSite = { x: 0.99, z : 0.59 }
+adzeraSite = { x: 0.61, z : 0.15 }
+dimiriSite = { x: 0.43, z : 0 }
+yabobSite = { x: 0.572, z :  0.0396 }
+```
+
+The lines of code above should be **changed** to the following:
+
+```
+// Add sites as tori, in a group
+tori = new THREE.Group();
+scene.add( tori );
+
+// a function to create the site marker with the location and matching information panel
+function createSite(x, z, gallery){
+  const model = new THREE.Mesh( new THREE.TorusGeometry( 0.015, 0.007, 20, 20 ), new THREE.MeshStandardMaterial({color: 0x006400}));
+  model.position.set( x * ratio, desk + 0.01, z * ratio);	
+  model.scale.set( piecescale, piecescale, piecescale);
+  model.rotation.x = -Math.PI * 1/2;
+  model.userData.planes = gallery;
+  return model;
+}
+
+aibomSite = createSite(0.36, -0.01, aibomG);
+dimiriSite = createSite(0.43, 0, dimiriG);
+louisadeSite = createSite(0.99, 0.59, louisadeG);
+mailuSite = createSite(0.84, 0.48, mailuG);
+adzeraSite = createSite(0.61, 0.15, adzeraG);
+yabobSite = createSite(0.572, 0.0396, yabobG);
+tori.add(aibomSite, mailuSite, dimiriSite, louisadeSite, adzeraSite, yabobSite);
+
+```
+
+Save the `index.html` file, reload the browser and check the tori appear on site reload. However, this change has broken the importation of the jar models so you will not see them.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-12.png" alt="Five jars sit on green tori on a map of Papua." caption="Figure 12. Webpage with the jars sitting on tori." %}
+
+### Start Jars at Random Positions
+
+To make the jars start in a random position above the map the [`Math.random()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method, which generates a number between 0 and 1, will be used. 
+
+You will change the `position.set` values to `x = Math.random() - 1`, `y = 1.2`, and `z = Math.random() * 0.5 - 0.3`. 
+
+This means that all jars will appear at the same height (y = 1.2) but in random positions within a defined area: 
+
+- along the x-axis, between -1 and 0 (slightly to the left of the scene)
+- along the z-axis, within a range of 0.5m (from -0.3 to 0.2)
+
+These values were chosen to make the jars easy to reach and the instructions easy to read in a VR setting. 
+
+If you review Figure 3, you can see where the jars should appear in relation to the camera and map. You can adjust the code to position them elsewhere if this better suits your purpose.
+
+The correct matching site will be stored in a userData variable. (Before making this change, you may find it helpful to note where at least one of the jars should be placed or take a screenshot for reference.)
+
+When creating the jars, assign them a random starting position instead of placing them at their true (final) location. The true site will still be stored in userData, so it can later be used to check whether the jar has been moved to the correct position.
+
+Within the `createModel` function, **find** the following code:
+
+```
+model.position.set( site.x * ratio, desk + 0.01, site.z * ratio);
+```
+
+Replace it with:
+
+```
+model.position.set( Math.random() - 1, 1.2, Math.random() * 0.5 - 0.3 );
+model.userData.site = site;
+```
+
+Save the `index.html` file and reload the browser. The jars should now appear above the map in random positions. Each time you reload the page, they will appear in different random locations.
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-13.png" alt="Six jars float at random positions above a map of Papua New Guinea." caption="Figure 13. Webpage with the jars at random start positions above the map." %}
+
+### Raycasting: Changing What the Mouse Click Detects
+
+For this game, linking the information panel to the selected jar is not very helpful, as most users will not be able to identify the correct location from the jar alone (unless they are familiar with Papua New Guinea languages). Other game designs might include clues that hint at a location, for example, ‘This jar was used to cook seafood’, allowing the user to match the jar to a coastal area. In that type of game, the information panel could still change when a jar is selected. In this game, however, the panel should change when a site is selected.
+
+You will see that nothing happens when you click on the tori, as the raycaster is checking the jars for intersections and not the tori. So in the `onClick(event)` function, **find** the following code.
+
+```
+const intersects = raycasterM.intersectObjects( jars.children);	// an array, nearest to camera will be first
+```
+
+The line of code should be **changed** to the following:
+
+```
+const intersects = raycasterM.intersectObjects( tori.children);
+```
+
+Once you have saved, check that clicking the tori now changes the information panel, rather than clicking the jars.
+
+### Drag Controls: Enabling Jar Movement
+
+To be able to move the jars using the mouse, `DragControls` have to be imported and created. The first argument when creating the `DragControls` determines what they can drag.
+
+**After** the following code:
+
+```
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+```
+
+**Add** the following code:
+
+```
+import { DragControls } from 'three/addons/controls/DragControls.js';
+```
+
+**Find** the following code:
+
+```
+let container, camera, scene, renderer, controls;
+```
+
+The line of code should be **changed** to the following:
+
+```
+let container, camera, scene, renderer, controls, dragControls;
+```
+
+**Within** the init function definition, **after** the following code:
+
+```
+pointer = new THREE.Vector2(); 
+
+```
+
+**Add** the following code:
+
+```
+// Mouse controls for jar dragging
+dragControls = new DragControls( [ jars ], camera, renderer.domElement ); // first argument determines drag objects.	
+
+```
+Then you add event listeners for the `dragstart` and `dragend` events. Here, the handler functions will be made anonymously. Turn the orbital controls off while jars are being dragged.
+
+**After** the following code:
+
+```
+window.addEventListener( 'click', onClick );
+```
+
+**Add** the following code:
+
+```
+dragControls.addEventListener('dragstart', function (event) {
+  controls.enabled = false // orbit controls off
+});
+dragControls.addEventListener('dragend', function (event) {
+  controls.enabled = true // orbit controls back on
+});
+```
+
+Save the `index.html` file, reload the browser, and check that you can now move the jars around.
+
+However, you may find it difficult to move jars accurately in certain positions in 3D space. This is easier when viewing the scene from directly above or from the side. You will modify this later to make positioning easier.
+
+
+### Conditional Statements: Check for Successful Matches
+
+At the end of each jar movement, there needs to be a check to see if the jar was moved to the correct spot. One way to do this is to determine the distance between the jar and the matching site (torus). An allowed distance difference needs to be set that will allow for non-exact placement, but will not be successful if a jar is placed on a torus nearby. Here use 5 cm (2.5 cm * ratio). 
+
+If the test is successful, there has to be a signal to the user. Here the background colour will be changed to a random colour, and the jar made unmoveable. No signal will be given for an incorrect match. 
+
+An additional group called `unmoveable` will be created and any jars that are placed close enough to their torus will be added to that group. Objects can only be attached to one group, so when a model is moved to `unmoveable` it will no longer be in `jars`, so the mouse will not detect it.
+
+Extra variables need to be declared for the new `unmoveable` group, `selectedObject` (which is the selected jar) and the `truesite` (which is the site that the selected jar should match). As no jar is selected at the start the `truesite` and `selectedObject` will be made `null` to start with.
+
+**Find** the following code:
+
+```
+let jars, tori;
+```
+
+The line of code above should be **changed** to the following:
+
+```
+let jars, tori, unmoveable;
+let selectedObject = null;
+let truesite = null;
+```
+
+**Within** the init function definition, **after** the following code:
+
+```
+scene.add( jars );
+```
+
+**Add** the following code:
+
+```
+// add unmoveable group for jars that have been put in the correct spot
+unmoveable = new THREE.Group();
+scene.add(unmoveable);  
+```
+
+#### Getting Model Locations: Obtaining the Positions of the Selected Jar and its Correct Site
+
+The event object for drag events contains the identity of the object being dragged (`event.object`), so that can be used in the handler function and the site it should match can be obtained from its userData.
+
+**Within** the dragend handler function, **after** the following code:
+
+```
+dragControls.addEventListener('dragend', function (event) {
+    controls.enabled = true // orbit controls back on
+```
+
+**Add** the following code:
+
+```
+selectedObject = event.object;
+truesite = selectedObject.userData.site;
+```
+
+The `getWorldPosition` method can be used to find out the coordinates of the `truesite`. You may wonder why you did not just store the coordinates directly in the userData. This would work in this version of the game, since the sites do not move. However, using getWorldPosition makes the code more flexible and if you wanted to make the map (or sites) movable in a different version, their positions would still be calculated correctly.
+
+The `getWorldPosition` method puts the coordinates into a vector (x, y, z) that is given as an argument, in this case `testposition`. This vector can not be null to begin with so it is set as (0,0,0). To get the position of the jar being dragged, its position property can be put into a vector (call it `aposition`).
+
+**After** the following code:
+
+```
+truesite = selectedObject.userData.site;
+```
+
+You need to **add** the following code:
+
+```
+let testposition = new THREE.Vector3(0,0,0); //needs to be something first
+truesite.getWorldPosition( testposition ); //a Vector3 (x,y,z)
+let aposition = selectedObject.position; //get jar position
+```
+
+#### Determining Distances Between Models: Testing if the Jar has Been Placed 'on' its Correct Site
+
+In coding, [conditional statements](https://en.wikipedia.org/wiki/Conditional_(computer_programming)) such as the 'if' statement are commonly used to specify that lines of code will only run if a particular criterion is fulfilled. An if statement was used previously when testing if anything is actually being selected by the mouse. Now use an if statement to test if the distance between the jar and its matching site is within the set allowed distance. Call the `distanceTo` method on the `aposition` vector to determine the distance between the two vectors, and test if it is smaller than our allowed distance (0.25 cm * ratio). 
+
+**After** the following code:
+
+```
+let aposition = selectedObject.position; //get jar position
+```
+
+**Add** the following code:
+
+```
+if ( aposition.distanceTo( testposition ) < .025 * ratio) {
+  // they are a match!
+}	
+
+```
+
+Save the `index.html` file and reload the browser to check for errors (broken code blocks can occur). But the script has not been told what to do if the test is successful yet, so nothing will occur if there is a correct match. 
+
+
+#### Changing the Background Colour if the Match is Correct
+
+If the match is correct, the background colour can change, by making `scene.background` equal to a new `THREE.Color` generated by `Math.random() * 0xffffff`. This works because the hex colour codes are actually being converted to hexadecimal numbers and multiplying white (0xffffff or 16777215) by a random (0-1) value gives another number ranging from 0 to 16777215, which can be interpreted as a colour by three.js.
+
+**Find** the following code:
+
+```
+// they are a match!
+```
+
+The line of code above should be **changed** to the following:
+
+```
+scene.background = new THREE.Color( Math.random() * 0xffffff ); // random
+```
+
+If the test is successful the position of the jar should be set to the exact spot, partly because the slight jump helps signal that it was a success. Importantly the jar should also be made unmoveable by putting it in the `unmoveable` group. The `unmoveable` group is unmoveable because the drag listener is only acting on the `jars` group.
+
+Keeping within the 'if' code block, **after** the following code:
+
+```
+scene.background = new THREE.Color( Math.random() * 0xffffff ); // random
+```
+
+**Add** the following code:
+
+```
+selectedObject.position.set(testposition.x, testposition.y, testposition.z);
+unmoveable.attach( selectedObject); // adding to the unmoveable group will remove from the jar group.
+
+```
+
+Save the `index.html` file and try to test, but moving in 3D can be difficult. When viewing 3D scenes on 2D surfaces (such as a computer screen) objects that are distant from each other can appear to be close. In the next step it will be made (somewhat) easier. **If** you want to test the moving at this stage, it is best done in multiple steps, viewing from the side to lower the jar to the map, and then from the top (bird's-eye view) to place it in the right spot, or vice versa (Figures 14-16).
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-14.png" alt="While five jars are randomly above the map, the Aibom jar has been moved close to its torus." caption="Figure 14. Moving jars, such as the Aibom jar, close to their torus is best done in multiple steps and when viewing the scene directly from the front, side or above." %}
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-15.png" alt="Bird's-eye view of jars and map, with the background changed to a pink colour to show that the Aibom jar has been correctly positioned." caption="Figure 15. Moving jars while viewing the scene from above helps correctly position jars, triggering a background (random) colour change." %}
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-16.png" alt="Normal view of the jars and map, with the Aibom jar in its correct position." caption="Figure 16. The Aibom jar in its correct position." %}
+
+
+#### Making Matching Easier by Detecting Matches in 2D Space
+
+This way of placing the jars on the sites can be frustrating for users and the `onClick` function is actually called at the end of a drag event, thus the `onClick` function can be altered to register a correct match if the drag ends with the mouse on the correct site.
+
+This alternative means that the match is tested in 2D space instead of in 3D space (as in the first approach). Thus matches are easier, especially for players not experienced with digital 3D environments. 
+ 
+If you develop your own games you might want to test different approaches to see what works best. All game and website design guides will advise you that several cycles of user testing and code refinement are important.
+
+**Within** the onClick function, **after** the following code:
+
+```
+const found = intersects[ 0 ].object; // get the selected object, index 0 is the first
+```
+
+**Add** the following code:
+
+```	
+if(found == truesite){ // tests if site mouse is over is the same as the true jar site
+  // if match change colour of background
+  scene.background = new THREE.Color( Math.random() * 0xffffff ); // random
+  // click to correct position in case slightly off
+  let testposition = new THREE.Vector3(0,0,0); //needs to be something first
+  truesite.getWorldPosition( testposition ); //a Vector3 (x,y,z) this is the position of the site
+  selectedObject.position.set(testposition.x, testposition.y, testposition.z);
+  unmoveable.attach( selectedObject );
+  }
+```
+
+Furthermore, the `truesite` variable needs to be reset to `null` after testing.
+
+**Within** the onClick function, **after** the following code:
+
+```
+  selectedPlane.visible = true; // make the new panel visible
+}
+```
+
+**Add** the following code:
+
+```
+truesite = null;	
+```
+
+Be careful with brackets/braces here. The `onClick` function now has two nested `if` blocks. The `truesite = null;` statement should be outside these `if` blocks, but inside the `onClick` function. 
+
+Now it should be easier to move jars to their sites, but the mouse needs to be directly over the torus when you stop dragging the jar.
+
+### Update the Instructions
+
+Lastly, to update the instructions in the first intro panel, change the texture to the `intro2.jpg`.
+
+**Find** the following code:
+
+```
+const introTexture = textureLoader.load( 'textures/Intro.jpg' );
+```
+    
+The line of code above should be **changed** to the following:
+
+```
+const introTexture = textureLoader.load( 'textures/Intro2.jpg' );
+```
+
+Save the `index.html` file, reload the browser and check that the new instructions appear.
+
+## Adding Additional Jars
+
+Pots were made in many different forms by different communities in Papua New Guinea, West Papua and Maluku. There are models and information panels for 29 communities in the folders provided. 
+
+If you want to experiment with adding them (Figure 17), the following table provides the model name, matching panel texture, location and colour parameter name to use. Each needs variables for the jar, panel and a site/torus (game only). These can be called anything (avoid special characters), but remember to declare them.
+
+<div class="table-wrapper" markdown="block">
+
+| Model | Texture | Position | Colour |
+| --- | --- | --- | ---|
+| abelam.glb | Abelam.jpg | 0.33* ratio, desk + 0.01, -0.06* ratio | coilColor |
+| agarabi.glb | Agarabi.jpg |  0.55 * ratio, desk + 0.01, 0.15 * ratio | coilBeatenColor |
+| aloalo.glb | Aloalo.jpg | 0.9* ratio, desk + 0.01, 0.49* ratio | ringTopColor |
+| bau.glb | Bau.jpg | 0.535* ratio, desk + 0.01, 0.04* ratio | coilColor |
+| binadean.glb | Binadean.jpg | 0.76 * ratio, desk + 0.01, 0.34 * ratio | coilBeatenColor |
+| boiken.glb | Boiken.jpg | 0.37* ratio, desk + 0.01, -0.08* ratio | coilColor |
+| collingwood.glb | Collingwood.jpg | 0.85* ratio, desk + 0.01, 0.4* ratio | wangelaColor |
+| demta.glb | Demta.jpg | 0.13* ratio, desk + 0.01, -0.16* ratio | materialColor |
+| guhu.glb | Guhu.jpg | 0.65* ratio, desk + 0.01, 0.23* ratio | coilColor |
+| huon.glb | Huon.jpg | 0.71* ratio, desk + 0.01, 0.13* ratio | paddleColor |
+| ilesales.glb | Ilesales.jpg |  -0.34* ratio, desk + 0.01, 0.11* ratio | paddleColor |
+| kaiep.glb | Kaiep.jpg | 0.41* ratio, desk + 0.01, -0.07* ratio | paddleColor |
+| kombio.glb | Kombio.jpg | 0.29* ratio, desk + 0.01, -0.05* ratio | coilColor |
+| lumi.glb | Lumi.jpg | 0.25* ratio, desk + 0.01, -0.08* ratio | coilColor |
+| maluku.glb | Maluku.jpg | -0.86* ratio, desk + 0.01, -0.08* ratio | paddleAddColor |
+| manus.glb | Manus.jpg | 0.66* ratio, desk + 0.01, -0.2* ratio | paddleColor |
+| marik.glb | Marik.jpg |  0.575* ratio, desk + 0.01, 0.079* ratio | coilColor |
+| meno.glb | Meno.jpg |  0.28* ratio, desk + 0.01, -0.01* ratio | coilColor |
+| moto.glb | Moto.jpg |  0.71* ratio, desk + 0.01, 0.42* ratio | paddleColor |
+| pubineri.glb | Pubineri.jpg |  0.53* ratio, desk + 0.01, 0.09* ratio |  coilColor |
+| triobriand.glb | Triobriand.jpg | 1.01* ratio, desk + 0.01, 0.33* ratio | amphColor |
+| tumleo.glb | Tumleo.jpg | 0.27* ratio, desk + 0.01, -0.12* ratio | paddleColor |
+| waigeo.glb | Waigeo.jpg |  -0.65* ratio, desk + 0.01, -0.35* ratio | paddleAddColor |
+
+</div>
+
+{% include figure.html filename="en-or-building-3d-environments-threejs-pt-2-17.png" alt="Many jars on a map of Papua New Guinea." caption="Figure 17. Additional jars can be added to the scene and puzzle." %}
+
+## Conclusion and Next Steps
+
+This has been an introduction to using three.js and the basic concepts in creating 3D scenes. It has shown how creating simple 2D and 3D models; importing more complex models; altering model properties (such as colour, emissiveness, size and visibility); modifying model image textures; raycasting; adding controls (such as orbit and drag controls); using event listeners; and implementing conditional statements, can be combined to make 3D cultural models more informative and engaging. The official [three.js](https://threejs.org) website contains links to forums to ask the community for help, and further resources including [three.js Fundamentals](https://perma.cc/R5EN-CFYD). The website also shows how much more complex pages can be created, with additions such as animations and sound.
+
+Integrating 3D models into websites allows artefacts to be investigated at different scales, and multiple objects compared across time and/or geographic distance to see how their creation and use varied. Similarities between objects can show cultural contacts between communities and, alongside other evidence, support interpretations of the movement of communities. Differences between objects can reveal local innovation or suggest periods of social disruption. The relationships between the ceramics of Maluku, Papua New Guinea, New Caledonia, Vanuatu, Fiji and other Pacific Island communities are being actively researched, and using 3D vessel models organised by place and time can help with this.
+
+Web-based interactive scenes and games have an important role in communicating research and providing academic and non-academic audiences with new views of the past. Importantly, this includes conveying research findings in interesting ways to communities in places where archaeological excavations have occurred, and to the descendants of the makers of ethnographically studied cultural material. There are many ways cultural heritage models can be used interactively: broken vessels can be put back together[^6], site contexts could be toggled on and off, or objects could be virtually analysed, with images or measurements from scientific techniques revealed when the object is clicked. Scenes made with three.js can easily be made viewable and manipulatable in VR, which can increase engagement with the models for many viewers.
+
+More broadly, projects such as this aim to support greater awareness of the diversity and significance of cultural practices represented through material artefacts. Scenes and games that include maps can indirectly help educate students and non-students on the locations of countries, or increase their understanding of areas within a country. While users may not necessarily retain specific details, interactive experiences can contribute to a broader understanding of the richness and variation of cultural heritage, and encourage further exploration.
+
+
+## Endnotes
+
+[^1]: Joel Fraenkel and Colin Filer, “Prisoners of a Distant Past? Linguistic Diversity and the Time-Depth of Human Settlement in Papua New Guinea,” _World Development_ 157 (2022): 105921.
+
+[^2]: Kathrin Nägele et al., “The Impact of Human Dispersals and Local Interactions on the Genetic Diversity of Coastal Papua New Guinea over the Past 2,500 Years,” _Nature Ecology & Evolution_ (2025), [https://doi.org/10.1038/s41559-025-02710-x](https://doi.org/10.1038/s41559-025-02710-x).
+
+[^3]: Kristine Hardy, Chris Ballard, and Mathieu Leclerc, “Agarabi Pottery Production in the Eastern Highlands of Papua New Guinea,” _Journal of Anthropological Archaeology_ 69 (2023): 101479.
+
+[^4]: Dylan Gaffney, “Maintenance and Mutability amongst Specialist Potters on the Northeast Coast of New Guinea,” _Cambridge Archaeological Journal_ 28 (2018): 181–204, [https://doi.org/10.1017/S0959774317000737](https://doi.org/10.1017/S0959774317000737). The clay lumps finished by paddle and anvil are shown in figures 4 and 9 of Gaffney’s article.
+
+[^5]: Jesse Schell, _The Art of Game Design: A Book of Lenses_ (Boca Raton, FL: CRC Press, 2015).
+
+[^6]: Kristine Hardy, “The Creation of ‘Uvira’s Pot,’ a Virtual Reality Puzzle to Promote Engagement with Archaeological Research,” paper presented at _Digital Humanities 2023: Collaboration as Opportunity (DH2023)_, Graz, Austria, 2023.
diff --git a/gallery/building-3d-environments-threejs-pt-1.png b/gallery/building-3d-environments-threejs-pt-1.png
new file mode 100644
index 000000000..e30e2f0fc
Binary files /dev/null and b/gallery/building-3d-environments-threejs-pt-1.png differ
diff --git a/gallery/building-3d-environments-threejs-pt-2.png b/gallery/building-3d-environments-threejs-pt-2.png
new file mode 100644
index 000000000..17578e739
Binary files /dev/null and b/gallery/building-3d-environments-threejs-pt-2.png differ
diff --git a/gallery/originals/building-3d-environments-threejs-pt-1-original.jpg b/gallery/originals/building-3d-environments-threejs-pt-1-original.jpg
new file mode 100644
index 000000000..9990d119e
Binary files /dev/null and b/gallery/originals/building-3d-environments-threejs-pt-1-original.jpg differ
diff --git a/gallery/originals/building-3d-environments-threejs-pt-2-original.jpg b/gallery/originals/building-3d-environments-threejs-pt-2-original.jpg
new file mode 100644
index 000000000..23462ece7
Binary files /dev/null and b/gallery/originals/building-3d-environments-threejs-pt-2-original.jpg differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-01.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-01.png
new file mode 100644
index 000000000..0a74d1bd4
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-01.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-02.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-02.png
new file mode 100644
index 000000000..69808efab
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-02.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-03.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-03.png
new file mode 100644
index 000000000..9478c2c7a
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-03.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-04.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-04.png
new file mode 100644
index 000000000..aa6df0ee9
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-04.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-05.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-05.png
new file mode 100644
index 000000000..bee269c43
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-05.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-06.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-06.png
new file mode 100644
index 000000000..c26df9173
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-06.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-07.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-07.png
new file mode 100644
index 000000000..04d3c8b60
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-07.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-08.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-08.png
new file mode 100644
index 000000000..e2c5f8bd5
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-08.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-09.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-09.png
new file mode 100644
index 000000000..a832f753b
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-09.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-10.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-10.png
new file mode 100644
index 000000000..be889a6fe
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-10.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-11.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-11.png
new file mode 100644
index 000000000..44ecb6f47
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-11.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-12.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-12.png
new file mode 100644
index 000000000..38e2f75b4
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-12.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-13.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-13.png
new file mode 100644
index 000000000..d83c349fe
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-13.png differ
diff --git a/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-14.png b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-14.png
new file mode 100644
index 000000000..565170820
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-1/en-or-building-3d-environments-threejs-pt-1-14.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-01.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-01.png
new file mode 100644
index 000000000..de28fc8a3
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-01.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-02.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-02.png
new file mode 100644
index 000000000..9d2be479b
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-02.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-03.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-03.png
new file mode 100644
index 000000000..3722c27d6
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-03.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-04.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-04.png
new file mode 100644
index 000000000..58a618fe0
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-04.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-05.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-05.png
new file mode 100644
index 000000000..98f97c254
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-05.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-06.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-06.png
new file mode 100644
index 000000000..9a6c1911c
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-06.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-07.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-07.png
new file mode 100644
index 000000000..af5559375
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-07.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-08.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-08.png
new file mode 100644
index 000000000..2a932e245
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-08.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-09.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-09.png
new file mode 100644
index 000000000..ab5803a05
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-09.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-10.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-10.png
new file mode 100644
index 000000000..0f5df547c
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-10.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-11.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-11.png
new file mode 100644
index 000000000..d71aeb353
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-11.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-12.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-12.png
new file mode 100644
index 000000000..6d8fb1870
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-12.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-13.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-13.png
new file mode 100644
index 000000000..3be4eea6d
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-13.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-14.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-14.png
new file mode 100644
index 000000000..5ead0991e
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-14.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-15.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-15.png
new file mode 100644
index 000000000..0b5b73401
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-15.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-16.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-16.png
new file mode 100644
index 000000000..e2bcaa657
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-16.png differ
diff --git a/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-17.png b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-17.png
new file mode 100644
index 000000000..1af8f9698
Binary files /dev/null and b/images/building-3d-environments-threejs-pt-2/en-or-building-3d-environments-threejs-pt-2-17.png differ