zen85
commented
1 year ago i just created the the shortest code possible to show my problem and to do tryouts: the bigger cube represents the ISS and like the real ISS it should have rotationial motion so the "cupola" on it always faces the earth. in my case this is "var object_that_should_face_forward"
<head>
<style>
body { margin: 0; }
#time-log {
position: absolute;
font-size: 12px;
font-family: sans-serif;
padding: 5px;
border-radius: 3px;
background-color: rgba(200, 200, 200, 0.1);
color: lavender;
bottom: 10px;
right: 10px;
}
</style>
<script src="//unpkg.com/satellite.js/dist/satellite.min.js"></script>
<script src="//unpkg.com/three"></script>
<script src="//unpkg.com/three-globe"></script>
<!-- <script src="../../dist/three-globe.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<div id="time-log"></div>
<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
<script type="module">
import { TrackballControls } from '//unpkg.com/three/examples/jsm/controls/TrackballControls.js';
Object.assign(THREE , { TrackballControls });
const EARTH_RADIUS_KM = 6371; // km
const SAT_SIZE = 80; // km
const TIME_STEP = 3 * 1000; // per frame
const timeLogger = document.getElementById('time-log');
const Globe = new ThreeGlobe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
.objectLat('lat')
.objectLng('lng')
.objectAltitude('alt');
const issGeometry = new THREE.BoxGeometry(20, 15,12);
const satGeometry = new THREE.BoxGeometry(10, 5,2);
const satMaterial = new THREE.MeshLambertMaterial({ color: 'palegreen', transparent: true, opacity: 0.7 });
Globe.objectThreeObject(d => {
let mesh;
if (d.name === 'ISS (ZARYA)') {
mesh = new THREE.Mesh(issGeometry, satMaterial);
mesh.meshname = d.name;
console.log(mesh.noradID);
} else {
mesh = new THREE.Mesh(satGeometry, satMaterial);
mesh.meshname = d.name;
}
return mesh;
});
fetch('https://www.josefwagner.net/valentin/satellites2.txt').then(r => r.text()).then(rawData => {
const tleData = rawData.replace(/\r/g, '').split(/\n(?=[^12])/).map(tle => tle.split('\n'));
const satData = tleData.map(([name, ...tle]) => ({
satrec: satellite.twoline2satrec(...tle),
name: name.trim().replace(/^0 /, '')
}));
// time ticker
let time = new Date();
(function frameTicker() {
requestAnimationFrame(frameTicker);
time = new Date(+time + TIME_STEP);
timeLogger.innerText = time.toString();
// Update satellite positions
const gmst = satellite.gstime(time);
satData.forEach(d => {
const eci = satellite.propagate(d.satrec, time);
if (eci.position) {
const gdPos = satellite.eciToGeodetic(eci.position, gmst);
d.lat = satellite.radiansToDegrees(gdPos.latitude);
d.lng = satellite.radiansToDegrees(gdPos.longitude);
d.alt = gdPos.height / EARTH_RADIUS_KM;
if (d.name === "ISS (ZARYA)") {
var object_that_should_face_forward = Globe.getObjectByProperty('meshname', "ISS (ZARYA)");
}
}
});
Globe.objectsData(satData);
})();
});
// Setup renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('globeViz').appendChild(renderer.domElement);
// Setup scene
const scene = new THREE.Scene();
scene.add(Globe);
scene.add(new THREE.AmbientLight(0xbbbbbb));
scene.add(new THREE.DirectionalLight(0xffffff, 0.6));
// Setup camera
const camera = new THREE.PerspectiveCamera();
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
camera.position.z = 400;
// Add camera controls
const tbControls = new THREE.TrackballControls(camera, renderer.domElement);
tbControls.minDistance = 101;
tbControls.rotateSpeed = 5;
tbControls.zoomSpeed = 0.8;
// Kick-off renderer
(function animate() { // IIFE
// Frame cycle
tbControls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
})();
</script>
</body>
vasturiano
i love way to much playing around with this but now i ran into a problem i can not solve...
I want to change the satellites example so that i can change the satGeometry to
const satGeometry = new THREE.BoxGeometry(10, 5,2);it becomes very apparent that the meshes of the satellites do not have rotational motion corresponding to the direction they are heading to.
It would be ideal if the meshes of the satellites would behave like animated planes would.
I tried something like this in my frameTicker
which works kind of but still rotates around one axis.
so i tried to put a carot in front of the satellite but with the same outcome on a different axis... :(
Any Ideas?