Español
PHP, HTML & JavaScript- Foro

3D Grafik - WebGL con three.js

 
- Página 1 -



HofK
Auf una heißen Tipp de IF hin, Yo me de tiempo
three.js  [...]  angeschaut. Como  [...]  (bastante unten) el ersten Resultate.
 
31.01.2016  
 



 
- Página 17 -



HofK
Noch una Apéndice oben ergänzt, uno kommt kaum hinterher:
Wehende Fahne y Video (noisejs).
 
17.07.2018  
 




HofK
Schon otra vez una Apéndice a Linkliste con el tollen Beispielen!

Dibujar Drawing with THREE.LineDashedMaterial()
 
19.07.2018  
 




HofK
Ganz untätig war Yo incluso no.

Auf una Anfrage hin habe geschaut, cómo el Eingabe encima el Mikrofon en un 3D Reacción umsetzen kann.

Desde que en Recherche kein Ejemplo dafür gefunden habe, war otra vez veces una Cuestión en discourse  [...]  fällig.

Aber sin Erfolg.

Also doch selber remendar.

El Página  [...]  war el, Yo brauchte, allerdings sin 3D. El Aufnahme se como wav gespeichert. Funktioniert lokal con Firefox!

Nach algunos Fehlversuchen Yo nun una Basisbeispiel. El Eingabe se en einfache Rotation umgewandelt y el Daten voluntad adecuado. Auf dieser Base puede ser nun kreativ voluntad.

Was todavía fehlt, Es el Umwandlung en mp3. Das läßt se zwar extern hacer, aber igual en el Navegador wäre todavía mejor.

El zip Expediente entpacken y index.html con Firefox abierto . Natürlich muss una continuación el Mikrofon liberación. Funktioniert con PC, Tablet y Handy.

03_audio.zip Descargar

.... ----

Mit Firefox auspropbieren en threejs.hofk.de, direkt bajo  [...] 

235 kB
Hochgeladen:19.07.2018
Ladeanzahl93
Descargar
 
19.07.2018  
 




HofK
Weiterer Apéndice a Linkliste con el tollen Beispielen!
Bewegtes Gitter
 
23.07.2018  
 




HofK
Noch una interessante Sache vom discourse.threejs.org Moderator looeee.

Un verschiebbare Teilung el Página, wobei en cada Teil una extra three.js Scene gerendert se. [...]  - Demo y Code en codepen:  [...] 



Posesiones Yo natürlich auch igual lokal gespeichert y getestet. El einfachen Szenen puede ser cualquier komplex incluso gestalten. 
 
08.08.2018  
 




HofK
Beim Schauraum es ahora algo más.

Anfangs Tuve el Design-Daten para el Raum en Textfeldern eingegeben. Es zwar praktisch para schnelles testen, pero en el inzwischen stark gewachsenem Umfang a Daten no mehr praktikabel.
Für el finale Variante voluntad el Daten deshalb en uno halbwegs übersichtlichen aber knappen Form en uno JavaScript-Expediente showroomDesign.js gespeichert.
Diese kann como reine Textdatei simplemente editiert y ser después de Aktualisierung el html-Página es el Ergebnis inmediatamente sichtbar.

Das Projektverzeichnis enthält Ordner con el Gráficos para el Oberflächen (textures), el Ausstellungsstücken, Modellen (exhibits), el Umgebung (CubeMap), Symbolgrafiken para el Steuerung des Besuchers por circleControl, (ccimg) y el nötigen Sistema-JavaScrips (js).

El fünf real Projektdateien son actualmente en Desarrollo todos aún en Projektverzeichnis vereint.



El Expediente showroomDesign.js es todavía no bastante fertig/ aún en Bearbeitung.
Se puede aber el innere Logik erkennen.

Geometrie y Material necesario getrennt eingegeben voluntad, una Zusammenlegung se unübersichtlich. En Trennung hilft una Nummerierung el Zusammengehörigkeit a überschauen.

Am Ejemplo el 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

];

El umschließenden Hauptfelder dürfen actualmente todavía no verändert voluntad. Aunque puede ser ellos leer dejar, si uno hier z.B. no runden Wände benötigt. Natürlich puede ser weitere Teilfelder (hier para weitere runde Wände) einfügen

(El Möglichkeit el kompletten Entfernung se todavía eingearbeitet!) 

Wenn uno se una Zeichnung vom Raum macht, es el Eintrag el Werte bastante simplemente a bewerkstelligen.

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

// en / de
// ground plan / Grundriss
plans = [
// Points Ground plan lines counter-clockwise / Punkte Grundrisslinien gegen 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 wall / Erker, Wand 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 material / Bodenmaterial
floorsMaterial = [
// 'Textur', 'Grafikdatei', , ...Side, (optional wrap S.., wrap T.. , ... 'Basic' 'Phong' 'Lambert',
[ 'Textur', 'Granit.jpg', doubleSide ], // 01
[ 'Textur', 'Granit.jpg', doubleSide ], // 02
[ 'Textur', 'Granit.jpg', doubleSide ], // 03
];

// ceiling material / Deckenmaterial
ceilingsMaterial = [
// 'Textur', 'Grafikdatei', , ...Side, (optional 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 )
[], // auto uv's: [] , otherwise / sonst [ 0,0, 1,0, 1,1, 0,1 ],
// according to the circulation of the floor plan line / entsprechend Umlauf el Grundrisslinie

// oriel, round wall / Erker, Wand 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 from the inside, counterclockwise /
// Hauptraum, meist sin Dicke, sólo de innen sichtbar, gegen Uhrzeigersinn
// x0,z0, y00 lower niveau / unteres Niveau, y01 upper niveau / oberes Niveau , x1,z1, y10,y11, (optional: 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! / con 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, ( optional: 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', 'bucle' ], // todavía Expediente y Características a 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 en the array / Materialien en el Feld

[ '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 en the array / Materialien en el Feld

[ '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 en the array / Materialien en el Feld

[ '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! / con je 3 Materialien! ]
[ 5,1.6, 6.5,1.6, 0,2.2, 0.3 ] // 01
];

archwaysMaterial = [

[ // 01 [ 3 materials en the array / Materialien en el Feld ]
[ '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 optional)
[ 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 para Rahmen: ...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 = [
// Rahmen: Perfil, x0,z0, y00,y01, x1,z1, y10,y11, optional 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 'wall': x0,z0, x1,z1, y0,y1, (optional: color)
// Typ 'polygon': Ecken, Radius, x,y,z-Position, x,y,z-Rotation, (optional: color)
[ 'wall', 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 Formato, 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 ] // dazu muss Expediente flower.mtl (Material) disponible ser!
];


// Beleuchtung

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

// Umgebung:

// Textur: 6 Texturen en 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 --------------------

Actualización 12.08. El Endung ...Array = ... en allen Design-Datenfeldern war sólo en Desarrollo hilfreich. Fällt nun weg. Also en lugar de vorher plansArray nun plans!

Wer Spaß daran ha, kann me sí una veränderte Expediente zukommen dejar. Eventuell con otro Texturen. Wäre interessant, qué esta herauskommt.
 
Was mi Testdatei en el Rundgang ergibt, voluntad Yo veces como Video aufnehmen y luego en mi Página bringen.
 
11.08.2018  
 




HofK
Der Rundgang por el "bunten" y algo chaotischen Testraum es inmediatamente y para el nächste Tiempo como Video en  [...]  a sehen.

 
12.08.2018  
 




HofK
Bisher fueron el Wände automáticamente con uv Mapping versorgt.
Der Nachteil es, dass uno para jede Wand una de el Größe her passende Textur haben muss. Auch si en uno realen Wand una Ventana es, necesario hier vier Wände erstellt voluntad (links, rechts, bajo ,encima el Ventana) y uno braucht vier zueinander passende Texturen.

Jetzt puede ser en Bedarf el uv Werte incluso angeben y así de uno großen Textur el passenden Zona "herausschneiden".



Ein leeres Datenfeld   se derart interpretiert, dass auto UV's producido voluntad. Das entspricht [ 0,0, 0,1, 1,0, 1,1 ]. El leeren eckigen Klammern son como Platzhalter erforderlich. Am Ende puede ellos weggelassen voluntad.

Se puede erkennen, dass en algunos Wänden Ausschnitte de el Test-Textur benutzt voluntad.

 
13.08.2018  
 




HofK
El Bewegung des Besuchers en el Schauraum erscheint me algo ruckelig. Im Video se el todavía deutlicher hervorgehoben.

Lo son como una Biblioteca tween.js, el weiche Bewegungsabläufe ermöglicht y häufig con three.js zusammen benutzt se.
Anleitung:  [...] 
Quellcode:  [...] 

El verschiedenen Varianten (en 'easing') puede ser hay ausprobieren.  [...] 

Yo habe el veces con un muy einfachen Ejemplo getestet. Auf threejs.hofk.de es hay  [...]  para encontrar.



Lo son ni kommerzielle Variante TweenLite  [...]  , el aber para private Nutzung y si yo lo correcto verstanden habe para Projekte el sólo una vez verkauft voluntad (Auftragsprojekt, spezielle Anwendung) kostenfrei es. Nur en mehrfach a verkaufenden Anwendungen fallen Lizenzgebühren a.
.........................

Wenn Yo el para mi Kamerasteuerung benutzen voluntad, komme Yo no umhin, esta völlig neu a konzipieren. Einfaches "einbauen" va no, como el Ansatz una völlig otro es. 
 
15.08.2018  
 




HofK
Weiter oben Tuve una interessante Sache ( 2 Szenen verschiebbar) vom discourse.threejs.org Moderator looeee vorgestellt.

Der Moderator Mugen87 es ständig aktiv y ha en fast todos Fragen rápidamente una super Antwort. Oft con muy guten Beispielen, el lo ligeramente hacer, el Sache umzusetzen. Schaut uno en github después de three.js oder en el Quellcode el Biblioteca se klar, woher dieser Überblick kommt. Mugen87 taucht a muy vielen Stellen como Autor/ Mitautor en!

Diese beiden Dinge Yo me notiert, lokal gespeichert y ausprobiert, como Yo ellos eventuell bald gebrauchen kann:

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



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

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

 
16.08.2018  
 




HofK
En discourse.threejs.org es otra vez una interessante Sache Nuevo worden.

3D grid of lines  [...] 

Demo y Code:  [...] 

 
21.08.2018  
 




HofK
Spiegel Yo ya en media Schauraum instalado.

Dank Mugen87 hay nun una erweiterte Variante con abklingender Spiegelung. [...] 
- Demo y Code:  [...] 

Dazu wurde el Definition des Spiegels de ihm erweitert. Man bindet esta Versión simplemente como Script una, z.B. Yo el en meiner Kopie así gemacht:
<script src="three.min.95.js"></script>
<script src="OrbitControls.js"></script>
<script src="enhancedReflector.js"></script> <!-- @author Mugen87 -->



El Nutzung es muy übersichtlich (de el jsfiddle kopiert) :
 
24.08.2018  
 




Respuesta


Título del Tema, max. 100 Signo.
 

Systemprofile:

Kein Systemprofil creado. [anlegen]

XProfan:

 Contribución  Font  Smilies  ▼ 

Bitte registro en una Contribución a verfassen.
 

Tema opciones

357.292 Views

Untitledvor 0 min.
Paul Glatz vor 18 Tagen
Uwe ''Pascal'' Niemeier23.03.2025
Manfred Barei18.03.2025
R.Schneider05.03.2025
Más...

Themeninformationen



Admins  |  AGB  |  Applications  |  Autores  |  Chat  |  Política de Privacidad  |  Descargar  |  Entrance  |  Ayuda  |  Merchantportal  |  Pie de imprenta  |  Mart  |  Interfaces  |  SDK  |  Services  |  Juegos  |  Búsqueda  |  Support

Ein Projekt aller XProfan, el lo son!


Mi XProfan
Privado Noticias
Eigenes Ablageforum
Temas-Merkliste
Eigene Beiträge
Eigene Temas
Zwischenablage
Cancelar
 Deutsch English Français Español Italia
Traducciones

Política de Privacidad


Wir uso Cookies sólo como Session-Cookies wegen el technischen Notwendigkeit y en uns hay no Cookies de Drittanbietern.

Wenn du hier en unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung de Informationen en unseren Cookies en XProfan.Net a.

Weitere Informationen a unseren Cookies y dazu, como du el Kontrolle darüber behältst, findest du en unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Yo möchte no Cookie