Add new props for object orientation and rotation

src/layers/objects.js

@@ -1,4 +1,6 @@
 import {
+  Euler,
+  Group,
   Mesh,
   MeshLambertMaterial,
   SphereGeometry
@@ -7,6 +9,8 @@ import {
 const THREE = window.THREE
   ? window.THREE // Prefer consumption from global THREE, if exists
   : {
+    Euler,
+    Group,
     Mesh,
     MeshLambertMaterial,
     SphereGeometry
@@ -17,7 +21,7 @@ import accessorFn from 'accessor-fn';
 
 import { emptyObject } from '../utils/gc';
 import threeDigest from '../utils/digest';
-import { polar2Cartesian } from '../utils/coordTranslate';
+import { polar2Cartesian, deg2Rad } from '../utils/coordTranslate';
 
 //
 
@@ -27,6 +31,8 @@ export default Kapsule({
     objectLat: { default: 'lat' },
     objectLng: { default: 'lng' },
     objectAltitude: { default: 0.01 }, // in units of globe radius
+    objectFacesSurface: { default: true },
+    objectRotation: {},
     objectThreeObject: { default: new THREE.Mesh(
       // default object: yellow sphere
       new THREE.SphereGeometry(1, 16, 8),
@@ -47,6 +53,8 @@ export default Kapsule({
     const latAccessor = accessorFn(state.objectLat);
     const lngAccessor = accessorFn(state.objectLng);
     const altitudeAccessor = accessorFn(state.objectAltitude);
+    const parallelAccessor = accessorFn(state.objectFacesSurface);
+    const rotationAccessor = accessorFn(state.objectRotation);
     const threeObjAccessor = accessorFn(state.objectThreeObject);
 
     threeDigest(state.objectsData, state.scene, {
@@ -60,16 +68,27 @@ export default Kapsule({
           obj = obj.clone();
         }
 
-        obj.__globeObjType = 'object'; // Add object type
+        const g = new THREE.Group();
+        g.add(obj);
+        g.__globeObjType = 'object'; // Add object type
 
-        return obj;
+        return g;
       },
-      updateObj: (obj, d) => {
+      updateObj: (objG, d) => {
         const lat = +latAccessor(d);
         const lng = +lngAccessor(d);
         const alt = +altitudeAccessor(d);
 
-        Object.assign(obj.position, polar2Cartesian(lat, lng, alt));
+        Object.assign(objG.position, polar2Cartesian(lat, lng, alt));
+        parallelAccessor(d)
+          ? objG.setRotationFromEuler(new Euler(deg2Rad(-lat), deg2Rad(lng), 0, 'YXZ'))
+          : objG.rotation.set(0, 0, 0);
+
+        const obj = objG.children[0];
+        const rot = rotationAccessor(d);
+        rot && obj.setRotationFromEuler(new Euler(
+          deg2Rad(rot.x || 0), deg2Rad(rot.y || 0), deg2Rad(rot.z || 0)
+        ));
       }
     });
   }

src/utils/coordTranslate.js

@@ -27,4 +27,7 @@ function cartesian2Polar({ x, y, z }) {
   }
 }
 
-export { getGlobeRadius, polar2Cartesian, cartesian2Polar };
+function deg2Rad(deg) { return deg * Math.PI / 180; }
+function rad2Deg(rad) { return rad / Math.PI * 180; }
+
+export { getGlobeRadius, polar2Cartesian, cartesian2Polar, rad2Deg, deg2Rad };