| |
| |
|
| - page 1 - |
|
HofK | sur une appeler  Tipp de IF hin, habe je mir la fois
three.js [...]  angeschaut. là [...] (entier unten) qui ersten Resultate. |
|
| |
| |
| |
|
| |
| |
| - page 15 - |
|
|
HofK | Hat on une Spiegel, peux on Exponate aussi de hinten betrachten. et il peut sich selbst voyons.
alors musste einer her!
qui Présentation liefert [...] . cela Beispiel benutzt cela zusätzliche Script Reflector.js [...] .
cet Script eingebunden et
genutzt. un rahmenloser Spiegel schräg dans qui coin. il reicht jusqu'à zum Boden.
Reflector.js benutzt une virtuelle caméra am Standort des Spiegels. vous nimmt qui Scene de là sur.
var virtualCamera = new THREE.PerspectiveCamera();
Es wird un Shader benutzt um cela Spiegelbild darzustellen.
var shader = options.shader || THREE.Reflector.ReflectorShader;
...
var matériel = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
} );
--------------------------------------------------------------------------------------------
avec cela on sich im espace réglé bewegen peux, um Dinge aussi näher trop betrachten, nécessaire on une Possibilité qui Augen des virtuellen Besuchers ( caméra, qui 3D Scene dans 2D abbildet) léger trop steuern. qui Besucher muss dans alle Richtungen aller peut, sich drehen, bücken et strecken et qui Augen pour dessus et unten richten peut.
en supplément habe je une virtuellen Controler gebastelt. il ist unaufdringlich transparent, peux libre im Browserfenster bewegt volonté et si le souris sur une qui aktiven kreisförmigen Bereiche venez, wird cela Symbol kräftig et es startet qui jeweilige Bewegung. vous hört sur, si le souris den Bereich verlässt. un Klick ist pas nötig.
comment on voit ( extra zum partie sur qui graue mur geschoben!) , sommes encore pas alle Kreise avec Symbolen et Funktionen belegt.
qui Controler ist modular aufgebaut, il peut Kreise aussi vollständig ausblenden. Es volonté Icônes 32x32 et 16x16 ou bien dans qui Maxivariante 64x64 et 32x32 nécessaire. cet doit so gestaltet son, dass vous dans den Kreis passen, dürfen alors pas qui Ecken benutzen.
qui Lücken entre den Kreisen sommes ausreichend grand, um avec qui souris sans une Funktion auszulösen stressfrei trop navigieren. |
|
| |
| |
| |
|
|
HofK |  Pâques 
ist oui aussi qui Zeit qui cherche.
Allerdings habe je seulement quelque chose sortiert et pas gesucht.
mais quand même quelque chose trouvé!
non, c'est pas mon neueste three.js - Kreation qui je verlegt habe.
cet Blatt habe je avant assez oui c'est ca 30 Jahren sur meinem seinerzeit hochmodernem 8 aiguille Drucker LX 800 ausgedruckt.
Es lag dans diesem Bestseller,
den je quelques Monate zuvor avec Staunen si qui ungeahnten Opportunités dans kürzester Zeit förmlich "verschlungen" hatte.
qui 3D Grafik ist programmiert sur dem ATARI 520ST avec GFA Basic 3.0 avec integriertem Editor, quoi large plus que un BASIC était. quelques Features vermisse je aujourd'hui chez JavaScript et anderen Sprachen! aussi hatte cela grafische Betriebssystem quelques Vorzüge à Windows, cela là encore pas aktuell était.
une l'affaire werde je pas oublier qc. Um données trop übertragen habe je un serielles Verbindungskabel ATARI trop PC (DOS) gebastelt.
qui Schnittstelle sur dem ATARI trop programmieren ging avec wenigen bien dokumentierten Befehlen droite zügig, sous DOS hat cela Nerven gekostet et Fehlversuchen gedauert. mais j'étais (suis) têtu et konnte so jahrelang Textdateien (WLAN était encore pas!) vite übertragen.
pas cela technique bessere mets sich toujours par, souvent aussi Schrott!
MERRY OSTERN!
 |
|
| |
| |
| |
|
|
p.specht
 | |
| |
| XProfan 11Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'... | 01.04.2018 ▲ |
|
| |
|
|
HofK | ... une virtuellen Controler gebastelt ...
qui Controler était wirklich seulement gebastelt. Es ging mir seulement einmal lediglich à Funktionsweise im Schauraum.
Eigentlich voulais je mich oui avec three.js befassen, mais on vient pas umhin aussi quelque chose Javascript pour DOM/HTML/CSS trop faire.
et c'est un historisch gewachsener Syntax-Sumpf.
comme je seinerzeit erstmals HTML begegnet suis, me plaisait cela comme Programmierer pas du tout. mais avec Hypertexten J'ai eu rien trop 1faire et dachte, cela berührt mich pas. sur la durée faux gedacht. avec qui intégration de JavaScript suis je mittendrin.
pourquoi je justement "jammere"?
mon Controler ist avec Bildern bestückt, alors img -tags. cet sommes à span -tags attaché, um avec une passenden Randradius den Kreis trop erzeugen.
eh bien muss on une Ereignislauscher benutzen.
navigationControl.addEventListener('mouseover', mouseover );
quoi liegt näher, comme eh bien dans qui Funktion function mouseover( event ) qui Identifikationsnummer trop ermitteln et sur cela Ereignis bezogen sur cela auslösende Element trop réagir. img -tags avons standardmäßig ne...aucune id Attribut.
si on qui span et img -tags avec JavaScript erzeugt, muss on qui id sowieso selbst generieren. Erlauscht wird ensuite qui "oben" liegende. Ist un Bild sur dem span gibt es seulement qui Bild id. Ist logisch, mais on muss es seulement la fois trouver, si on pas so tief dans HTML/CSS drinsteckt.
imgs[ i ].setAttribute('id', i.toString( ) + ' imgId' );
function mouseover( event ) {
console.log( 'event.target.id ' + event.target.id );
var idx = parseInt( event.target.getAttribute( 'id' ) );
si ( idx > 0 ) { ... irgendetwas zur id de span ou bien Bild ...
comme poteau indicateur par den HTML/CSS/DOM/JavaScript Dschungel c'est moi toujours plus [...] avec droite bon interner cherche très hilfreich. ici z.B. sous anderem [...]
So simple konfiguriert on den Controler:
cela venez heraus (autre Farben pour Center):
qui äußeren trois span's avons ne...aucune Bild. |
|
| |
| |
| |
|
|
HofK |
avec dem Controler bewegt sich qui virtuelle Besucher zügig par den Ausstellungsraum.
qui unsichtbare caméra sommes sa Augen. avec cela qui Besucher sich selbst im Spiegel erblicken peux, braucht il une sichtbaren Körper. Zum Test reicht seulement einmal un simple Gitter. là qui Augen mitten im Körper être assis, sieht il pas seulement son Spiegelbild, mais aussi encore quelques originale Körperlinien.
si qui Besucher eh bien flott im espace umher allez, knallt il entier vite la fois vers une Einrichtungsgegenstand ou bien une mur. il va sogar par Wände! cela muss verhindert volonté.
qui erste idée était Kollisionserkennung. en supplément habe je un simple Beispiel sur threejs.hofk.de [...]
alors den Code angepasst.
Vorbereitet pour plusieurs Besucher. ici seulement einmal Besucher 0 - visitor...[ 0 ]
function detectCollision( cIdx ) {
var ray;
var originPoint = visitorMeshes[ 0 ].position.clone();
var localVertex = new THREE.Vector3( );
var globalVertex;
var directionVector;
var distance = Infinity;
for ( var j = 0; j < visitorGeometries[ 0 ].getAttribute('position').array.length; j += 3 ) {
localVertex.x = visitorGeometries[ 0 ].getAttribute('position').array[ j ];
localVertex.y = visitorGeometries[ 0 ].getAttribute('position').array[ j + 1 ];
localVertex.z = visitorGeometries[ 0 ].getAttribute('position').array[ j + 2 ];
globalVertex = localVertex.applyMatrix4( visitorMeshes[ 0 ].matrix );
directionVector = globalVertex.sub( visitorMeshes[ 0 ].position );
ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
collisionResults = ray.intersectObjects( collidableMeshes );
if ( collisionResults.length > 0 ) distance = collisionResults[0].distance;
return distance;
}
}
qui l'affaire hat mais une entscheidenden le crochet. il y a anders comme dans qui kleinen Présentation avec deux Wänden très viele Objekte trop überprüfen. Um kleinere Gegenstände trop erfassen, muss cela Hilfsgitter des Besuchers aussi ausreichend engmaschig son. Befindet sich qui souris sur einem Kreis des Controlers, muss sans cesse qui Kollisionserkennung durchgeführt volonté. Aus dem flotten Besucher wird une Ruckelschnecke.
là je aucun brauchbare concept habe den Aufwand drastisch trop réduire, eh bien un neuer Ansatz.
comment im realen vivre wird aussi qui virtuelle Besucher dans seiner Bewegungsfreiheit eingegrenzt. Pour les gens nimmt on Seile ou bien Absperrgitter, pour Mähroboter une eingegrabenen Begrenzungsdraht et pour virtuelle Besucher une Anzahl de Rechtecken, défini par deux Ecken.
<textarea id="visitorAreas" style="width: 620px; height: 100px " > [
<!-- Besucher, Rechtecke x0,z0, < x1,z1 -->
[ 1, 1, 8, 6 ],
[ 8, 2, 9, 5 ],
[ 9, 2.5, 10, 4.5 ]
] </textarea>
un Späher schaut vorab, si qui prochain Bewegung sur qui Begrenzung hinausgeht. si pas, ca va eh bien wieder zügig plus. qui Prüfaufwand ist gering.
|
|
| |
| |
| |
|
|
HofK | Schaut on sich qui Navigationskommandos im vorletzten Beitrag genauer à, wird deutlich, dass qui Richtungen sur den espace bezogen sommes. Dreht sich eh bien qui Besucher, ist cela pour qui navigation ungeeignet. Aus vorwärts im espace (direction negative z Achse) wird ensuite z.B. aussi la fois schräg zurück pour den Besucher.
qui Anpassung peut sich léger avec sin() et cos() bewerkstelligen. Dabei habe je juste encore récente strukturiert et une Geschwindigkeitsfaktor eingefügt.
qui paramètre obj gestattet eh bien verschiedene Objekte trop navigieren. So braucht es aussi aucun kopierten Kommandos pour den Scout plus.
Aus eval( navActionCommands[ i ] ); wird simple
navActionCommands[ i ]( camera ); ou bien navActionCommands[ i ]( scout );
|
|
| |
| |
| |
|
|
HofK | qui espace hat Öffnungen pour dehors. Bisher était là seulement qui Hintergrundfarbe. si on hinaus schaut, voudrais on mais aussi qui environnement voyons.
cela peut sich entier simple pour dem Beispiel [...] sur meiner page erreichen.
Diesmal ist es aucun Linse, mais qui Schauraum, qui sich dans qui Box est. qui Cubemap ist seulement einmal wieder de qui page humus.name [...]
Solche Cubemaps peux je pas erzeugen. Pour mon Beispiel reicht mais une einfachere variante. qui difficulté besteht oui y, dass qui six Teilfotos à den Rändern nahtlos zueinander passen doit. mais seulement, si qui perspective sur qui Ränder tomber peux. là qui espace mais seulement wenige Öffnungen hat, peut es sich so einrichten, dass qui perspective toujours komplett sur einer qui six Seiten bleibt. si on aucun Pfahlhütte avec Bodenloch baut, nécessaire on aussi ne...aucune sinnvolles Bild pour negatives y. Hat on un Dachfenster, est un Wolkenbild pour positives y unabdingbar. mais solche Einzelbilder sommes oui ne...aucune Problem.
qui perspective dans qui nature:
Im vergrößerten Spiegel wird aussi qui forêt avec gespiegelt.
Näher herangetreten ist plus Wiese trop voyons.
ici pourrait nan meinen, à droite une bord qui Box trop avons. Ist mais pas!
cela komplette Bild qui page:
---
simple un Bild comment qui "Königin qui Nacht" dans den Raumöffnungen trop platzieren hat keinen 3D effet. qui Besucher sieht seulement avec cette Methode aussi réel verschiedene Ausschnitte qui environnement. |
|
| |
| |
| |
|
|
HofK | qui Frühling venez, qui (ordinateur)Zeit wird knapper.
Habe quelques Varianten des Ladens de Objekten ausprobiert, - cela dauert.
ensuite qui Spiegel näher untersucht.
und dir aussi une Doppelspiegelung. en supplément mets on dans new THREE.Reflector ...
recursion: 1
chez 0 bleibt qui Spiegel im Spiegel Dunkel.
Allerdings konnte je aucun Mehrfachspiegelung erreichen. allez eventuell pas, qui Rechenaufwand wäre aussi enorm. |
|
| |
| |
| |
|
|
HofK | quelquefois nécessaire on statt einer porte avec Zarge une Torbogen.
un peu Sinus et Cosinus sommes là wieder hilfreich.
Aus den Koordinaten qui Punkte p1 à gauche unten, p2 à gauche dessus, p3 à droite unten et p4 à droite dessus volonté quelques Hilfswerte berechnet. (c ist Center)
Pour 36 Koordinatenwerten pour qui Seiten venons qui Bögen.
Zum Test qui Koordinaten steht qui unfertige Torbogen schräg mitten im espace.
 |
|
| |
| |
| |
|
|
HofK | qui Code bedurfte encore un peu qui Optimierung et qui Wölbung était encore trop generieren. Ebenso qui Unterstützung de Multimaterial. qui Untergliederung habe je de 36 sur 24 reduziert. cela reicht völlig pour den Viertelkreis. par qui Funktion peux qui linke et rechte page erzeugt volonté.
 |
|
| |
| |
| |
|
|
p.specht
| | lente wird´s oui richtig wohnlich chez Dir! Tolle l'affaire! |
|
| |
| XProfan 11Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'... | 28.04.2018 ▲ |
|
| |
|
|
HofK | Soll oui eigentlich un Ausstellungsraum volonté. mais gemütliche Sitzmöbel peux on aussi reinstellen. Braucht on seulement qui passenden 3D Modelle.
..............................................................................................................
mon Problem était maintenant mais encore einmal qui Kameraführung. qui caméra soll comment cela menschliche Auge im espace agieren. qui variante de avant trois Wochen était encore unvollständig.
Pour einigen Versuchen J'ai eu une Solution. [...] qui me plaisait mais selbst pas so richtig. (Strg U pour Code)
c'est pourquoi habe je chez Discourse une Frage formuliert. [...]
aucun deux Stunden später J'ai eu de prisoner849 déjà la première Antwort. Später encore DIE Solution.
qui neue Solution ist im Code wesentlich kompakter, là vous plus Methoden de THREE.js benutzt. [...] qui Funktion selbst ist identique.
Zum Test wird qui Bewegung ici avec qui clavier gesteuert et on bewegt sich dans qui paysage. |
|
| |
| |
| |
|
(513)
Deutsch
English
Français
Español
Italia