Stap 11: Three.js: Camera-positionering
Camera bediening is waarschijnlijk het moeilijkste deel van het werken met ThreeJS. Ik raden iedereen niet lastig vallen met deze oefening in frustratie. Kies een van de voorbeeld generieke camera domeincontrollers, het script op uw pagina invoegen, en genieten. Als u hoeft voor de berekening van de aangepaste camera parameters, bent u waarschijnlijk het beste af leren over quaternionen, die heb ik niet.
Gaan de plain-Jane trig route laat je in een wereld van pijn. Hebt u in wezen geen nuttige hulpmiddelen om te debuggen uw math, en zelfs zodra uw math klopt de resultaten verkeerd kunnen kijken wegens dingen zoals de "Euler Order" (welke u moet ingesteld op YXZ als u wilt dat de besturingselementen van de camera te voelen als Pitch, Roll, en Yaw... gewoon set camera.rotation.order = "YXZ";). Rotaties van de camera's zijn in het coördinatensysteem van de camera, dus je moet altijd onthouden om het te geven instructies die manier of gebruik de hacky "doel" en "lookAt" strategie (die ik heb) waardoor er steevast u totaal krenterig oriëntaties... dat is wanneer u begint met het instellen van de camera's "up" vector handmatig te houden boven, en je altijd moet worden op zoek naar dingen zoals gimbal lock (waar je verliest een mate van vrijheid vanwege twee parallelle assen in de camera) en het feit dat tweening de * waarden * van van de camera rotatie vectoren kan nemen u correct van A--> B in de ruimte, maar langs de verkeerde kant van de roterende. U kunt denken het is natuurlijk te draai van 180 graden door uw hoofd opzij draaien, maar de eenvoudigste roterende pad misschien wel degene die rechte overhead in plaats daarvan gaat. Blech!
Ik ga niet om u via de oplossingen naar al deze kwesties, en als je goed kijkt vindt u dat mijn oplossingen nog steeds, op sommige plaatsen, een beetje ruw. In plaats daarvan, ik ga om te plakken op alle camera beweging code samen met weinig merkt hier over welke onderdelen van het hebben. Als u echt in een stuk duiken bent en je meer uitleg wenst, ga je gang en post een reactie zodat ik dat deel uitwerken kan.
Camera Criteria: hoogtepunten
-Het zetten van een geselecteerde ster in het midden van het scherm (zoomAndDollyToPoint)
-Het zetten van een geselecteerde ster in het midden van het scherm met het centrum van het melkwegstelsel in de achtergrond om te voorkomen dat de bladeren van de rand van het heelal (zoomToFitPointsFrom, CAMERA_RELATION. TOWARD_CENTER)
-Verplaatsen van de ene geselecteerde ster naar de andere zonder het wijzigen van de camera hoek (strafeFromPointToPoint)
-Het vinden van het selectiekader gebied voor een groep van sterren, en dan het vinden van een camerapositie zodanig dat die sterren op het scherm (zoomToFitPointsFrom, alle CAMERA_RELATIONs passen zou)
-Zet aangrenzende sterren in hetzelfde cluster in comfortabele scherm posities ten opzichte van een single "geselecteerd" ster in een blogauteur sterrenbeeld (showThreePointsNicely)
-Terug naar een "thuis" positie (reset)
-Het parameterizing van een pad voor de camera zodat het langzaam door de Melkweg op zijn eigen toen niet vliegen kan bijgewoond (wachten 90s zonder te klikken om te zien de animatie start)-- (beginAutomaticTravel en cameraSetupForParameter)
De Code:
_.each(Galaxy.Composers,function(composer){ composer.render(); });
