From 9f5503824a283d2db5c23d3d4e3c31ab407f46eb Mon Sep 17 00:00:00 2001 From: vasco Date: Tue, 18 Apr 2023 23:47:13 +0100 Subject: [PATCH] Add new props for object orientation and rotation --- src/layers/objects.js | 29 ++++++++++++++++++++++++----- src/utils/coordTranslate.js | 5 ++++- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/layers/objects.js b/src/layers/objects.js index 10aa90e..06285be 100755 --- a/src/layers/objects.js +++ b/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) + )); } }); } diff --git a/src/utils/coordTranslate.js b/src/utils/coordTranslate.js index 07107ff..3e76447 100644 --- a/src/utils/coordTranslate.js +++ b/src/utils/coordTranslate.js @@ -27,4 +27,7 @@ function cartesian2Polar({ x, y, z }) { } } -export { getGlobeRadius, polar2Cartesian, cartesian2Polar }; \ No newline at end of file +function deg2Rad(deg) { return deg * Math.PI / 180; } +function rad2Deg(rad) { return rad / Math.PI * 180; } + +export { getGlobeRadius, polar2Cartesian, cartesian2Polar, rad2Deg, deg2Rad }; \ No newline at end of file