index添加相关例子相关单位转换类名修改

maptalks · Aug 1, 2020 · 7bde374 · 7bde374
1 parent 44a20f5
commit 7bde374
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 40 deletions.
diff --git a/demo/custom-electricShield.html b/demo/custom-electricShield.html
@@ -66,7 +66,7 @@
         var ballElectric, material;
         function addElectricShield() {
             material = getMaterial();
-            ballElectric = new electricShield(map.getCenter(), { radius: 2 }, material, threeLayer)
+            ballElectric = new ElectricShield(map.getCenter(), { radius: 500 }, material, threeLayer)
             threeLayer.addMesh(ballElectric);
             initGui();
             animation();
@@ -231,7 +231,7 @@
          * you can customize your own components
          * */
 
-        class electricShield extends maptalks.BaseObject {
+        class ElectricShield extends maptalks.BaseObject {
             constructor(coordinate, options, material, layer) {
                 options = maptalks.Util.extend({}, OPTIONS, options, { layer, coordinate });
                 super();
@@ -240,8 +240,8 @@
                 this._initOptions(options);
                 const { altitude, radius } = options;
                 //generate geometry
-                // const r = layer.distanceToVector3(radius, radius).x;
-                const geometry = new THREE.SphereBufferGeometry(radius, 50, 50, 0, Math.PI * 2);
+                const r = layer.distanceToVector3(radius, radius).x;
+                const geometry = new THREE.SphereBufferGeometry(r, 50, 50, 0, Math.PI * 2);
 
                 //Initialize internal object3d
                 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140

diff --git a/demo/custom-ringEffect.html b/demo/custom-ringEffect.html
@@ -67,8 +67,8 @@
 
         function addRingEffect() {
             material = getMaterial(0);
-            ringObj = new ringEffect(map.getCenter(), {
-                radius: 2
+            ringObj = new RingEffect(map.getCenter(), {
+                radius: 100
             }, material, threeLayer)
             threeLayer.addMesh(ringObj);
             initGui();
@@ -198,41 +198,43 @@
          * you can customize your own components
          * */
 
-        class ringEffect extends maptalks.BaseObject {
-                constructor(coordinate, options, material, layer) {
-                    options = maptalks.Util.extend({}, OPTIONS, options, {
-                        layer,
-                        coordinate
-                    });
-                    super();
-                    //Initialize internal configuration
-                    // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135
-                    this._initOptions(options);
-                    const {
-                        altitude,
-                        radius
-                    } = options;
-                    //generate geometry
-                    // const r = layer.distanceToVector3(radius, radius).x;
-                    const geometry = new THREE.RingBufferGeometry(0.001, radius, 20, 5, 0, Math.PI * 2);
-
-                        //Initialize internal object3d
-                        // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140
-                        // this._createMesh(geometry, material);
-                        this._createGroup();
-                        const mesh = new THREE.Mesh(geometry, material); this.getObject3d().add(mesh);
-                        //set object3d position
-                        const z = layer.distanceToVector3(altitude, altitude).x;
-                        const position = layer.coordinateToVector3(coordinate, z); this.getObject3d().position
-                        .copy(position);
-                    }
+        class RingEffect extends maptalks.BaseObject {
+            constructor(coordinate, options, material, layer) {
+                options = maptalks.Util.extend({}, OPTIONS, options, {
+                    layer,
+                    coordinate
+                });
+                super();
+                //Initialize internal configuration
+                // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135
+                this._initOptions(options);
+                const {
+                    altitude,
+                    radius
+                } = options;
+                //generate geometry
+                const r = layer.distanceToVector3(radius, radius).x;
+                const geometry = new THREE.RingBufferGeometry(0.001, r, 20, 5, 0, Math.PI * 2);
+
+                //Initialize internal object3d
+                // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140
+                // this._createMesh(geometry, material);
+                this._createGroup();
+                const mesh = new THREE.Mesh(geometry, material);
+                this.getObject3d().add(mesh);
+                //set object3d position
+                const z = layer.distanceToVector3(altitude, altitude).x;
+                const position = layer.coordinateToVector3(coordinate, z);
+                this.getObject3d().position
+                    .copy(position);
+            }
 
-                    _animation() {
-                        const ring = this.getObject3d().children[0];
-                        const speed = this.getOptions().speed;
-                        ring.material.uniforms.time.value += speed;
-                    }
-                }
+            _animation() {
+                const ring = this.getObject3d().children[0];
+                const speed = this.getOptions().speed;
+                ring.material.uniforms.time.value += speed;
+            }
+        }
 
     </script>
 </body>

diff --git a/demo/index.html b/demo/index.html
@@ -38,6 +38,8 @@ <h1>maptalks.three plugin Demos</h1>
     <li><a href="custom-ripplewall.html">custom-ripplewall</a></li>
     <li><a href="custom-cloud.html">custom-cloud</a></li>
     <li><a href="custom-skybox.html">custom-skybox</a></li>
+    <li><a href="custom-ringEffect.html">custom-ringeffect</a></li>
+    <li><a href="custom-electricShield.html">custom-electricshield</a></li>
     <li><a href="custom-trip.html">custom-trip</a></li>
     <li><a href="extrudeline.html">extrudeline</a></li>
     <li><a href="extrudelines.html">extrudelines</a></li>