Français
PHP, HTML & JavaScript- Forum

3D Grafik - WebGL avec three.js

 
- page 1 -



HofK
sur une appeler Tipp de IF hin, habe je mir la fois
three.js  [...]  angeschaut. là  [...]  (entier unten) qui ersten Resultate.
 
31.01.2016  
 



 
- page 17 -



HofK
encore un Nachtrag dessus ergänzt, on vient à peine hinterher:
Wehende drapeau et Video (noisejs).
 
17.07.2018  
 




HofK
encore un Nachtrag zur Linkliste avec den tollen Beispielen!

Zeichnen Drawing with THREE.LineDashedMaterial()
 
19.07.2018  
 




HofK
entier untätig était je selbst pas.

sur une Anfrage hin habe geschaut, comment on qui Eingabe sur cela Mikrofon dans un 3D réaction umsetzen peux.

là je chez qui Recherche ne...aucune Beispiel pour trouvé habe, était wieder la fois une Frage chez discourse  [...]  fällig.

mais sans Erfolg.

alors doch selber bricoler.

qui page  [...]  était cela, quoi je brauchte, allerdings sans 3D. qui Aufnahme wird comme wav gespeichert. Funktioniert bistrot avec Firefox!

Pour einigen Fehlversuchen habe je eh bien un Basisbeispiel. qui Eingabe wird dans simple Rotation umgewandelt et qui données volonté angezeigt. sur cette la base peux on eh bien kreativ volonté.

quoi encore fehlt, ist qui Umwandlung dans mp3. cela läßt sich zwar extern faire, mais juste im Browser wäre encore besser.

qui zip Dossier entpacken et index.html avec Firefox ouvrir . Bien sûr muss on ensuite cela Mikrofon freigeben. Funktioniert avec PC, Tablet et Handy.

03_audio.zip Herunterladen

.... ----

avec Firefox auspropbieren chez threejs.hofk.de, direct sous  [...] 

235 kB
Hochgeladen:19.07.2018
Downloadcounter93
Herunterladen
 
19.07.2018  
 




HofK
Weiterer Nachtrag zur Linkliste avec den tollen Beispielen!
Bewegtes Gitter
 
23.07.2018  
 




HofK
encore une interessante l'affaire vom discourse.threejs.org Moderator looeee.

une verschiebbare partage qui page, wobei dans chaque partie une extra three.js Scene gerendert wird. [...]  - Demo et Code sur codepen:  [...] 



Habe je mir naturellement aussi juste bistrot gespeichert et getestet. qui einfachen Szenen peux on beliebig komplex selbst gestalten. 
 
08.08.2018  
 




HofK
Beim Schauraum ca va maintenant aussi quelque chose plus.

Anfangs J'ai eu qui Design-données pour den espace dans Textfeldern eingegeben. c'est zwar pratique pour schnelles testen, mais chez dem inzwischen stark gewachsenem périphérie à données pas plus praktikabel.
Pour qui finale variante volonté qui données c'est pourquoi dans einer halbwegs übersichtlichen mais rare forme dans einer JavaScript-Dossier showroomDesign.js gespeichert.
cet peux comme reine Textdatei simple editiert volonté et pour Aktualisierung qui html-page ist cela Ergebnis tout de suite sichtbar.

cela Projektverzeichnis contient Dossier avec den Grafiken pour qui Oberflächen (textures), den Ausstellungsstücken, Modellen (exhibits), qui environnement (CubeMap), Symbolgrafiken pour qui Contrôle des Besuchers per circleControl, (ccimg) et qui nötigen System-JavaScrips (js).

qui cinq réel Projektdateien sommes derzeit chez qui Entwicklung alle encore im Projektverzeichnis vereint.



qui Dossier showroomDesign.js ist encore pas entier fertig/ encore dans Bearbeitung.
il peut mais qui intérieur Logik erkennen.

Geometrie et matériel doit getrennt eingegeben volonté, une Zusammenlegung wird unübersichtlich. chez qui Trennung hilft une Nummerierung qui Zusammengehörigkeit trop überschauen.

Am Beispiel qui runden Wände:

roundWallsArray = [

// round walls / runde Wände:
// x,z, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau,
//rx radius ,rz radius, radius segments, start angle / Startwinkel, angle / Winkel
[ 2,2, 0,3.5, 2,2, 12, 3.14,1.57 ], //01
[ 0,4.5, 0,3.5, 2.5,2.5, 12, 3.14,3.14 ] //02

];


roundWallsMaterialArray = [

[ 'Textur', 'uvgrid01.png', doubleSide ], //01
[ 'Textur', 'uvgrid01.png', doubleSide ], //02

];

qui umschließenden Hauptfelder dürfen derzeit encore pas modifié volonté. Allerdings peux on vous vide laisser, si on ici z.B. aucun runden Wände nécessaire. Bien sûr peux on weitere Teilfelder (ici pour weitere runde Wände) insérer

(qui Possibilité qui kompletten Entfernung wird encore eingearbeitet!) 

si on sich une dessin vom espace pouvoir, ist qui Eintrag qui Werte droite simple trop bewerkstelligen.

// ----------- SHOWROOM DESIGN ---------------------------

// en / de
// ground plan / Grundriss
plans = [
// Points Ground plan lines counter-clockwise / Punkte Grundrisslinien vers Uhrzeigersinn:
// x, z, y0 floor height /Bodenhöhe, y1 ceiling height/ Deckenhöhe, ...
[ 0,7, 0,3.5, 9,7, 0,3.5, 9,0, 0,3.5, 0,0, 0,3.5 ], // 01 main room / Hauptraum
[ -2.5,7, 0,3.5, 0,7, 0,3.5, 0,2, 0,3.5, -2.5,2, 0,3.5 ], // 02 oriel, round rempart / Erker, mur rund
[ 9,6, 0.2,3.5, 11,5, 0.2,3.5, 11,2, 0.2,3.5, 9,1, 0.2,3.5 ] // 03 oriel / Erker
];

// floor matériel / Bodenmaterial
floorsMaterial = [
// 'Textur', 'Grafikdatei', , ...Side, (optionnel wrap S.., wrap T.. , ... 'Basic' 'Phong' 'Lambert',
[ 'Textur', 'Granit.jpg', doubleSide ], // 01
[ 'Textur', 'Granit.jpg', doubleSide ], // 02
[ 'Textur', 'Granit.jpg', doubleSide ], // 03
];

// ceiling matériel / Deckenmaterial
ceilingsMaterial = [
// 'Textur', 'Grafikdatei', , ...Side, (optionnel wrap S.., wrap T.. , ... 'Basic' 'Phong' 'Lambert',
[ 'Textur', 'uvSpray.png', doubleSide ], // 01
[ 'Phong', 0xfeff55, doubleSide, smoothShading ], // 02
[ 'Phong', 0xfeff55, doubleSide, smoothShading ], // 03
];

plansUV = [

// main room / Hauptraum ( Textur 9:7 )
[], // voiture uv's: [] , otherwise / sonst [ 0,0, 1,0, 1,1, 0,1 ],
// according to le circulation of le floor plan line / entsprechend Umlauf qui Grundrisslinie

// oriel, round rempart / Erker, mur rund
[ 0,0, 0.25,0, 0.25,1, 0,1 ],

// oriel
[ 0,0.143, 0.22,0.286, 0.22,0.714, 0,0.857 ]
];

walls = [
// main room, usually without thickness, only visible à partir de le inside, counterclockwise /
// Hauptraum, meist sans Dicke, seulement de dedans sichtbar, vers Uhrzeigersinn
// x0,z0, y00 lower niveau / unteres Niveau, y01 upper niveau / oberes Niveau , x1,z1, y10,y11, (optionnel: thickness / Dicke)
[ 0,7, 0,3.5, 9,7, 0,3.5 ], //01
[ 9,7, 0,3.5, 9,6, 0,3.5 ], //02
[ 9,6, 0,0.2, 9,1, 0,0.2 ], //03
[ 9,1, 0,3.5, 9,0, 0,3.5 ], //04
[ 9,0, 0,3.5, 3.2,0, 0,3.5, 0.5], //05 ->(0.5 thick / dick)
[ 3.2,0, 2.1,3.5, 2,0, 2.1,3.5 ], //06
// oriel / Erker
[ 9,6, 0.2,3.5, 11,5, 0.2,3.5 ], //07
[ 11,5, 2.6,3.5, 11,2, 2.6,3.5], //08
[ 11,2, 0.2,3.5, 9,1, 0.2,3.5 ], //09
// imagery / Bilder
[ 6,0.26, 1.3,2.8, 4,0.26, 1.3,2.8 ], //10

// Interior walls, partition walls, structural components, blockings, platforms: .. + thickness /
// Innenwände, Trennwände, Strukturbauteile, Aufblockungen, Podeste: .. , + Dicke
// [ with 6 materials each! / avec je 6 Materialien! ]
[ 0.4,5.5, 0,0.8, 1.1,5.7, 0.1,0.6, 0.6 ], //11
[ 0.2,7.0, 0.7,1.1, 1.6,5.0, 0.8,1.1, 0.7 ], //12
[ 8.0,7.5, 0.0,0.7, 8.1,7.9, 0.0,0.7, 0.1 ] //13

];

wallsMaterial = [
// 'Textur', 'graphic file / Grafikdatei', ..Side, ( optionnel: wrap S, wrap T)
// 'Video'
// 'Basic' 'Phong' 'Lambert', color, ..Side, ..Shading
['Textur', 'uvgrid01.png', doubleSide ], //01
['Phong', 0x886600, doubleSide, smoothShading ], //02
['Lambert', 0x222233, doubleSide, smoothShading ], //03
['Phong', 0x222233, doubleSide, flatShading ], //04

[ //05

['Video', 'sintel.xxx', backSide, 'autoplay', 'loop' ], // encore Dossier et Eigenschaften trop nutzen!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!,
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],

],

['Textur', 'Fliese01.png', doubleSide, 6, 15 ], //06
['Lambert', 0xeeffaa, doubleSide, flatShading ], //07
['Basic', 0xabcdef, doubleSide, smoothShading ], //08
['Basic', 0x886600, doubleSide, smoothShading ], //09

['Textur', 'QueenOfNight.png', doubleSide ], //10
[ //11 // 6 materials dans le array / Materialien im champ

[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],

],
[ //12 // 6 materials dans le array / Materialien im champ

[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],

],
[ //13 // 6 materials dans le array / Materialien im champ

[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Textur', 'Fliese02.png', doubleSide, 27, 21 ],
[ 'Basic', 0x886600, doubleSide, flatShading ],
[ 'Basic', 0x678901, doubleSide, flatShading ],
[ 'Basic', 0x0000bb, doubleSide, flatShading ],
[ 'Basic', 0xaa00aa, doubleSide, flatShading ],

],

];

archways = [
// archways / Torboegen: x0,z0, x1,z1, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau, thickness / Dicke
// [ with 3 materials each! / avec je 3 Materialien! ]
[ 5,1.6, 6.5,1.6, 0,2.2, 0.3 ] // 01
];

archwaysMaterial = [

[ // 01 [ 3 materials dans le array / Materialien im champ ]
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Basic', 0xff0000, doubleSide, smoothShading ],
[ 'Basic', 0x00ff00f, doubleSide, smoothShading ],
]

];

roundWalls = [

// round walls / runde Wände:
// x,z, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau,
//rx radius ,rz radius, radius segments, start angle / Startwinkel, angle / Winkel
[ 2,2, 0,3.5, 2,2, 12, 3.14,1.57 ], //01
[ 0,4.5, 0,3.5, 2.5,2.5, 12, 3.14,3.14 ] //02

];

roundWallsMaterial = [

[ 'Textur', 'uvgrid01.png', doubleSide ], //01
[ 'Textur', 'uvgrid01.png', doubleSide ], //02

];

rounds = [
// round components / runde Bauteile: x,z, y0,y1, rx,rz, (Drehwinkel, Zuspitzung optionnel)
[ 7,2, 0,0.5, 0.5,0.7 , 0.785, 1.1 ] //01
];

roundsMaterial = [

[ // 01 // [ 3 Materialien ]
[ 'Phong', 0x8822dd, frontSide, flatShading ],
[ 'Textur', 'uvgrid01.png', doubleSide ],
[ 'Phong', 0x00ff00f, doubleSide, smoothShading ],
]

];

// Rahmenprofile pour cadre: ...Shape (Querschnitt)
doorShape = [ 0,0, 0,0.05, 0.08,0.05, 0.08,0.03, 0.1,0.03, 0.1,0 ]; // Zarge
pictureShape = [ 0,0, 0.01,0.04, 0.07,0.04, 0.1,0 ]; // Bilder

frames = [
// cadre: Profil, x0,z0, y00,y01, x1,z1, y10,y11, optionnel geschlossen: 1
[ doorShape, 2,0, 0,2.1, 3.2,0, 0,2.1 ], //01
[ pictureShape, 3.91,0.25, 1.21,2.89, 6.09,0.25, 1.21,2.89, 1 ], //02
[ pictureShape, 6.15, 0.25, 0.3,3.45, 8.85,0.25, 0.3,3.45, 1 ], //03
];

framesMaterial = [

[ 'Phong', 0x4455ff, doubleSide, smoothShading ], //01
[ 'Lambert', 0x00ffff, doubleSide, smoothShading ], //02
[ 'Basic', 0x876543, doubleSide, smoothShading ], //03

];

visitorAreas = [
//Besucher, Rechtecke x0,z0, < x1,z1
[ -1.5, 3, 1.1, 6 ],
[ 1, 1, 8, 6 ],
[ 8, 2, 9, 5 ],
[ 9, 2.5, 10, 4.5 ]
];

// Spiegel

mirrors = [

// Spiegel: Typ, ...
// Typ 'rempart': x0,z0, x1,z1, y0,y1, (optionnel: color)
// Typ 'polygon': Ecken, Radius, x,y,z-Position, x,y,z-Rotation, (optionnel: color)
[ 'rempart', 6.225, 0.3, 8.75, 0.3, 0.4, 3.35 ],
[ 'polygon', 36, 1.6, 6, 1.8, 6.8888, -0.05, 3.1416, 0 ]

];


// Ausstellungsobjekte

exhibits = [
//Ausstellungsobjekte: 3D Format, Dateiname, x,y,z-Skalierung, x,y,z-Position, x,y,z-Rotation
[ 'json', 'flower', 0.01, 0.01, 0.01, 7, 0.0001, 3, 0, 0, 0 ],
//[ 'json', 'nefertiti', 0.1, 0.1, 0.1, 7, 1, 2, 0, 2.1, 0 ],
[ 'obj', 'flower', 0.01, 0.01, 0.01, 5.5, 0.0001, 3, 0, 0, 0 ] // en supplément muss Dossier flower.mtl (matériel) vorhanden son!
];


// Beleuchtung

lights = [
// Typ, la couleur
[ 'ambient', 0x444444 ],
// Typ, la couleur, Position x,y,z
[ 'point', 0xffdddd, 4, 3.4, 3 ],
]

// environnement:

// Textur: 6 Texturen dans Reihenfolge +x,-x,+y,-y,+z,-z
//var surroundingTextur = [ 'CubeMap/', 'posx.png', 'negx.png', 'posy.png', 'negy.png', 'posz.png', 'negz.png'];
surroundingTextur = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'];

// Groesse, x,y,z-Position
surrounding = [ 80, 10, -0.5, -20 ];

// -------------- end of showroom design --------------------

Update 12.08. qui Endung ...Array = ... chez allen Design-Datenfeldern était seulement chez qui Entwicklung hilfreich. Fällt eh bien weg. alors statt auparavant plansArray eh bien plans!

qui Amusement daran hat, peux mir oui une veränderte Dossier zukommen laisser. Eventuell avec anderen Texturen. Wäre intéressant, quoi dabei herauskommt.
 
quoi mon Testdatei im Rundgang ergibt, werde je la fois comme Video aufnehmen et ensuite sur mon page apporter.
 
11.08.2018  
 




HofK
qui Rundgang par den "bunten" et quelque chose chaotischen Testraum ist ab tout de suite et pour qui prochain Zeit comme Video sur  [...]  trop voyons.

 
12.08.2018  
 




HofK
Bisher wurden qui Wände automatisch avec uv Mapping versorgt.
qui le tort ist, dass on pour chacun mur une de qui Taille her passende Textur avons muss. aussi si dans einer realen mur un la fenêtre ist, doit ici quatre Wände erstellt volonté (à gauche, à droite, sous ,sur dem la fenêtre) et on braucht quatre zueinander passende Texturen.

maintenant peux on chez besoin qui uv Werte selbst angeben et so aus einer grand Textur den passenden Bereich "herausschneiden".



un leeres Datenfeld   wird derart interpretiert, dass voiture UV's erzeugt volonté. cela entspricht [ 0,0, 0,1, 1,0, 1,1 ]. qui vider eckigen Klammern sommes comme Platzhalter erforderlich. Am Ende peut vous être omis.

il peut erkennen, dass chez einigen Wänden Ausschnitte aus qui Test-Textur benutzt volonté.

 
13.08.2018  
 




HofK
qui Bewegung des Besuchers im Schauraum erscheint mir quelque chose ruckelig. Im Video wird le reste deutlicher hervorgehoben.

il y a là une Bibliothèque tween.js, qui weiche Bewegungsabläufe permet et häufig avec three.js zusammen benutzt wird.
Anleitung:  [...] 
Quellcode:  [...] 

qui verschiedenen Varianten (chez 'easing') peux on là ausprobieren.  [...] 

j'ai cela la fois avec einem très einfachen Beispiel getestet. sur threejs.hofk.de ist es là  [...]  pour trouver.



il y a encore une kommerzielle variante TweenLite  [...]  , qui mais pour private Nutzung et si je es richtig verstanden habe pour Projekte qui seulement einmal verkauft volonté (Auftragsprojekt, spezielle Anwendung) kostenfrei ist. seulement chez mehrfach trop verkaufenden Anwendungen tomber Lizenzgebühren à.
.........................

si je cela pour mon Kamerasteuerung benutzen veux, viens je pas umhin, cet völlig récente trop konzipieren. Einfaches "einbauen" allez pas, là qui Ansatz un völlig anderer ist. 
 
15.08.2018  
 




HofK
Weiter dessus J'ai eu une interessante l'affaire ( 2 Szenen verschiebbar) vom discourse.threejs.org Moderator looeee vorgestellt.

qui Moderator Mugen87 ist ständig aktiv et hat sur presque alle Fragen vite une super Antwort. souvent avec très guten Beispielen, qui es léger faire, qui l'affaire umzusetzen. Schaut on chez github pour three.js ou bien dans den Quellcode qui Bibliothèque wird bien sûr, woher cette Überblick venez. Mugen87 taucht à très vielen se mettre comme Autor/ Mitautor sur!

cet beiden Dinge habe je mir notiert, bistrot gespeichert et ausprobiert, là je vous eventuell bientôt gebrauchen peux:

Skycube as background [...]  jsfiddle  [...] 



....................................

Connection between 3D Point and 2D Point [...]  jsfiddle  [...] 

 
16.08.2018  
 




HofK
chez discourse.threejs.org ist wieder une interessante l'affaire posté worden.

3D grid of lines  [...] 

Demo et Code:  [...] 

 
21.08.2018  
 




HofK
Spiegel habe je bereits dans meinen Schauraum incorporé.

Dank Mugen87 gibt es eh bien une Avancé variante avec abklingender Spiegelung. [...] 
- Demo et Code:  [...] 

en supplément wurde qui définition des Spiegels de ihm erweitert. on bindet cet Version simple comme Script un, z.B. habe je cela dans meiner Kopie so gemacht:
<script src="three.min.95.js"></script>
<script src="OrbitControls.js"></script>
<script src="enhancedReflector.js"></script> <!-- @author Mugen87 -->



qui Nutzung ist très übersichtlich (aus dem jsfiddle kopiert) :
 
24.08.2018  
 




répondre


Topictitle, max. 100 marque.
 

Systemprofile:

ne...aucune Systemprofil angelegt. [anlegen]

XProfan:

 Posting  Font  Smilies  ▼ 

s'il te plaît s'inscrire um une Beitrag trop verfassen.
 

Options du sujet

357.468 Views

Untitledvor 0 min.
Paul Glatz vor 19 Tagen
Uwe ''Pascal'' Niemeier23.03.2025
Manfred Barei18.03.2025
R.Schneider05.03.2025
plus...

Themeninformationen



Admins  |  AGB  |  Applications  |  Auteurs  |  Chat  |  protection des données  |  Télécharger  |  Entrance  |  Aider  |  Merchantportal  |  Empreinte  |  Mart  |  Interfaces  |  SDK  |  Services  |  Jeux  |  cherche  |  Support

un projet aller XProfaner, qui il y a!


Mon XProfan
Privé Nouvelles
Eigenes Ablageforum
Sujets-La liste de voeux
Eigene Posts
Eigene Sujets
Zwischenablage
Annuler
 Deutsch English Français Español Italia
Traductions

protection des données


Wir verwenden Cookies seulement comme Session-Cookies à cause de qui technischen Notwendigkeit et chez uns gibt es aucun Cookies de Drittanbietern.

si du ici sur unsere Webseite klickst ou bien navigierst, stimmst du unserer Erfassung de Informationen dans unseren Cookies sur XProfan.Net trop.

Weitere Informationen trop unseren Cookies et en supplément, comment du qui Kontrolle par-dessus behältst, findest du dans unserer nachfolgenden Datenschutzerklärung.


d'accordDatenschutzerklärung
je voudrais keinen Cookie