refactor(examples): update threejs to 172 and import as es6 module

shawn0326 · Jan 15, 2025 · 9a92b78 · 9a92b78
1 parent 2f49c7b
commit 9a92b78
Show file tree

Hide file tree

Showing 16 changed files with 49,665 additions and 103,650 deletions.
diff --git a/examples/city.html b/examples/city.html
@@ -31,15 +31,17 @@
     </div>
 </body>
 
-<script src="js/libs/three.js"></script>
-<script src="js/libs/BufferGeometryUtils.js"></script>
-<script src="js/libs/OrbitControls.js"></script>
+<script type="importmap">
+    {
+        "imports": {
+            "three": "./js/libs/three.module.js"
+        }
+    }
+</script>
+
 <script src="js/libs/dat.gui.min.js"></script>
 <script src="js/libs/stats.min.js"></script>
 
-<script src="../build/three.path.js"></script>
-
-<script src="js/City.js"></script>
-<script src="js/city_main.js"></script>
+<script type="module" src="js/city_main.js"></script>
 
 </html>
diff --git a/examples/corner.html b/examples/corner.html
@@ -31,13 +31,21 @@
     </div>
 </body>
 
-<script src="js/libs/three.js"></script>
-<script src="js/libs/OrbitControls.js"></script>
+<script type="importmap">
+    {
+        "imports": {
+            "three": "./js/libs/three.module.js"
+        }
+    }
+</script>
+
 <script src="js/libs/dat.gui.min.js"></script>
 
-<script src="../build/three.path.js"></script>
+<script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from './js/libs/OrbitControls.js';
+    import { PathPointList, PathGeometry } from '../build/three.path.module.js';
 
-<script>
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0.3, 0.3, 0.3);
     const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, .1, 1000);
@@ -48,50 +56,51 @@
     renderer.setPixelRatio(window.devicePixelRatio);
     document.body.appendChild(renderer.domElement);
 
-    const controls = new THREE.OrbitControls(camera, renderer.domElement);
+    const controls = new OrbitControls(camera, renderer.domElement);
     controls.target.set(0, 0, 0);
 
     const ambientLight = new THREE.AmbientLight(0xffffff);
     scene.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
     directionalLight.position.set(2, 2, -3);
     directionalLight.position.normalize();
     scene.add(directionalLight);
 
     // random vector3 points
     const points = [
-	new THREE.Vector3(-5, 0, 5),
-	new THREE.Vector3(-5, 0, -5),
-	new THREE.Vector3(5, 0, -5),
-	new THREE.Vector3(5, 0, 5)
-];
+    	new THREE.Vector3(-5, 0, 5),
+    	new THREE.Vector3(-5, 0, -5),
+    	new THREE.Vector3(5, 0, -5),
+    	new THREE.Vector3(5, 0, 5)
+    ];
 
     const up = new THREE.Vector3(0, 1, 0);
 
     // create PathPointList
-    const pathPointList = new THREE.PathPointList();
+    const pathPointList = new PathPointList();
     pathPointList.set(points, 0.3, 10, up, true);
 
     // create geometry
     const width = 0.2;
-    const geometry = new THREE.PathGeometry();
+    const geometry = new PathGeometry();
     geometry.update(pathPointList, {
     	width: width
     });
 
     const texture = new THREE.TextureLoader().load('images/diffuse.jpg', function(texture) {
-	texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-	texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
-});
+    	texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    	texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
+    	texture.colorSpace = THREE.SRGBColorSpace;
+    });
 
     const material = new THREE.MeshPhongMaterial({
-	color: 0x58DEDE,
-	depthWrite: true,
-	transparent: true,
-	opacity: 0.9,
-	side: THREE.FrontSide
-});
+    	color: 0x58DEDE,
+    	depthWrite: true,
+    	transparent: true,
+    	opacity: 0.9,
+    	side: THREE.FrontSide
+    });
     material.map = texture;
 
     const mesh = new THREE.Mesh(geometry, material);

diff --git a/examples/index.html b/examples/index.html
@@ -35,13 +35,16 @@
     </div>
 </body>
 
-<script src="js/libs/three.js"></script>
-<script src="js/libs/OrbitControls.js"></script>
-<script src="js/libs/dat.gui.min.js"></script>
+<script type="importmap">
+    {
+        "imports": {
+            "three": "./js/libs/three.module.js"
+        }
+    }
+</script>
 
-<script src="../build/three.path.js"></script>
+<script src="js/libs/dat.gui.min.js"></script>
 
-<script src="js/Path3D.js"></script>
-<script src="js/main.js"></script>
+<script type="module" src="./js/main.js"></script>
 
 </html>
diff --git a/examples/js/City.js b/examples/js/City.js
@@ -1,3 +1,7 @@
+import * as THREE from 'three';
+import * as BufferGeometryUtils from './libs/BufferGeometryUtils.js';
+import { PathPointList, PathGeometry } from '../../build/three.path.module.js';
+
 /**
  * City Builder
  * @param {Object} params
@@ -102,7 +106,7 @@ City.prototype = Object.assign(City.prototype, {
 				points.push(new THREE.Vector3(-halfAreaSize - offset, 0, -halfAreaSize - offset));
 			}
 
-			const pathPointList = new THREE.PathPointList();
+			const pathPointList = new PathPointList();
 			pathPointList.set(points, 0, 0, new THREE.Vector3(0, 1, 0));
 
 			const updateParam = {
@@ -111,7 +115,7 @@ City.prototype = Object.assign(City.prototype, {
 				progress: 0
 			};
 
-			const geometry = new THREE.PathGeometry({
+			const geometry = new PathGeometry({
 				pathPointList: pathPointList,
 				options: updateParam
 			});
@@ -121,8 +125,6 @@ City.prototype = Object.assign(City.prototype, {
 			geometries.push(geometry);
 		}
 
-		console.log(geometries);
-
 		return geometries;
 	},
 	_createRoads: function(roadWidth, roadOffset) {
@@ -182,13 +184,13 @@ City.prototype = Object.assign(City.prototype, {
 				const _x = (Math.random() - 0.5) * 2 * xDividedBy3;
 				const _z = (Math.random() - 0.5) * 2 * zDividedBy3;
 
-				const _geometry = new THREE.BoxBufferGeometry(_w1, _height, _w2);
+				const _geometry = new THREE.BoxGeometry(_w1, _height, _w2);
 				_geometry.translate(_x, _height / 2, _z);
 
 				array.push(_geometry);
 			}
 
-			const geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(array);
+			const geometry = BufferGeometryUtils.mergeGeometries(array);
 			geometry.computeBoundingBox();
 			geometry.computeBoundingSphere();
 
@@ -202,4 +204,6 @@ City.prototype = Object.assign(City.prototype, {
 
 		return group;
 	}
-});
+});
+
+export { City };
diff --git a/examples/js/Path3D.js b/examples/js/Path3D.js
@@ -1,3 +1,6 @@
+import * as THREE from 'three';
+import { PathPointList } from '../../build/three.path.module.js';
+
 /**
  * Path3D
  * helper class for path drawing
@@ -17,7 +20,7 @@ const Path3D = function() {
 	this._cornerRadius = 0.2;
 	this._cornerSplit = 10;
 
-	this._pathPointList = new THREE.PathPointList();
+	this._pathPointList = new PathPointList();
 
 	this._dirty = true;
 
@@ -160,3 +163,4 @@ Path3D.prototype._getLastFixedPoint = function() {
 	return this._lastFixedPoint;
 };
 
+export { Path3D };
diff --git a/examples/js/city_main.js b/examples/js/city_main.js
@@ -1,3 +1,8 @@
+import * as THREE from 'three';
+import { OrbitControls } from './libs/OrbitControls.js';
+import { City } from './City.js';
+
+
 window.onload = function() {
 	const scene = new THREE.Scene();
 	scene.background = new THREE.Color(0, 0, 0);
@@ -9,14 +14,12 @@ window.onload = function() {
 	renderer.setPixelRatio(window.devicePixelRatio);
 	document.body.appendChild(renderer.domElement);
 
-	const controls = new THREE.OrbitControls(camera, renderer.domElement);
-	controls.enableDamping = true;
-	controls.rotateSpeed = 0.1;
-	controls.dampingFactor = 0.1;
+	const controls = new OrbitControls(camera, renderer.domElement);
 
 	const texture = new THREE.TextureLoader().load('./images/path_007_19.png', function(texture) {
 		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 		texture.anisotropy = 16;
+		texture.colorSpace = THREE.SRGBColorSpace;
 	});
 
 	const city = new City({