Initial online page and assets

alex2wong · May 2, 2019 · 7d519ec · 7d519ec
1 parent 97c63c4
commit 7d519ec
Show file tree

Hide file tree

Showing 8 changed files with 399 additions and 0 deletions.
diff --git a/assets/2dss.jpg b/assets/2dss.jpg
diff --git a/assets/Westeros2_natural.jpg b/assets/Westeros2_natural.jpg
diff --git a/assets/height3.png b/assets/height3.png
diff --git a/assets/ss.jpg b/assets/ss.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title>custom WebGL layer-Threejs</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
+    <style>
+        body { margin:0; padding:0;}
+        .map-cont {
+            position: relative;
+        }
+        #map {
+            height:600px;
+        }
+        #height {
+            display: none;
+        }
+        .toggleBtn {
+            position: absolute;
+            left: 0;
+            top: 0;
+            font-size: 12px;
+            color: #eee;
+            display: flex;
+            align-items: center;
+        }
+    </style>
+</head>
+<body>
+<h4>Game of Throne 3d Map</h4>
+<div class="map-cont">
+    <canvas id="height"></canvas>
+    <div id='map'></div>
+    <div class="toggleBtn">
+        <input type="checkbox" name="toggleTerrain" id="toggleTerrain" 
+            onchange="toggleTerrain()" checked>
+        <label for="toggleTerrain">toggle terrain</label>
+    </div>
+</div>
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
+<script src="./src/bundle.js"></script>
+<script src='https://unpkg.com/[email protected]/build/three.min.js'></script>
+<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+<script src="./src/textureloader.js"></script>
+<script src="./src/index.js"></script>
+</body>
+</html>
diff --git a/src/bundle.js b/src/bundle.js
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,82 @@
+// mapboxgl.accessToken = false;
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/huangyixiu/cjuo5ww3v1n711eqgmniofos5',
+    center: [19.638807, 0.762392],
+    zoom: 3.1,
+    pitch: 20,
+    hash: true
+});
+map.addControl(new mapboxgl.NavigationControl);
+map.addControl(new mapboxgl.FullscreenControl);
+
+// parameters to ensure the THREE plane is georeferenced correctly on the map
+var modelOrigin = [19.638807, 0.762392];
+var modelAltitude = 0;
+var modelRotate = [Math.PI / 2, 0, 0];
+var modelScale = 5.31843220338983e-5;
+
+// transformation parameters to position, rotate and scale the 3D model onto the map
+var modelTransform = {
+    translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
+    translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
+    translateZ: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
+    rotateX: modelRotate[0],
+    rotateY: modelRotate[1],
+    rotateZ: modelRotate[2],
+    scale: modelScale
+};
+
+var THREE = window.THREE;
+
+// configuration of the custom layer for a 3D model per the CustomLayerInterface
+var customLayer = {
+    id: '3d-terrain',
+    type: 'custom',
+    renderingMode: '3d',
+    onAdd: function (map, gl) {
+        this.camera = new THREE.Camera();
+        this.scene = new THREE.Scene();
+        this.map = map;
+
+        // use the Mapbox GL JS map canvas for three.js
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: map.getCanvas(),
+            context: gl
+        });
+
+        this.terrainLoader = new TerrainLoader({
+            scene: this.scene,
+            camera: this.camera,
+            renderer: this.renderer
+        });
+
+        this.renderer.autoClear = false;
+        this.terrainLoader.initTerrainLayer();
+        this.terrainLoader.loadTerrainLayer();
+    },
+    render: function (gl, matrix) {
+        var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
+        var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
+        var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);
+
+        var m = new THREE.Matrix4().fromArray(matrix);
+        var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
+            .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
+            .multiply(rotationX)
+            .multiply(rotationY)
+            .multiply(rotationZ);
+
+        // sync mapbox matrix with THREE camera.
+        this.camera.projectionMatrix.elements = matrix;
+        this.camera.projectionMatrix = m.multiply(l);
+        this.renderer.state.reset();
+        this.renderer.render(this.scene, this.camera);
+        this.map.triggerRepaint();
+    }
+};
+
+map.on('style.load', function () {
+    console.warn('style loaded, adding THREE layer..');
+    map.addLayer(customLayer, 'roads labels');
+});