Deutsch
PHP, HTML & JavaScript- Forum

3D Grafik - WebGL mit three.js

 
- Seite 1 -



HofK
Auf einen heißen Tipp von IF hin, habe ich mir mal
three.js  [...]  angeschaut. Da  [...]  (ganz unten) die ersten Resultate.
 
31.01.2016  
 



 
- Seite 31 -



HofK
Man braucht keine Schnittebene, die Kamera in three.js hat Parameter für die Clippingebenen  [...] 

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

Constructor
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

Together these define the camera's viewing frustum.
 
14.12.2019  
 




HofK
Eine weitere Etappe ist geschafft. Die Zylinderenden können nun sehr flexibel gestaltet werden. Damit ein notwendiger Schritt um allgemeinere Innengeometrien zu erzeugen.

Da veröffentlicht  [...] 

Da ausprobieren (Schieber benutzen) und den Code betrachten  [...] 

 
14.12.2019  
 




p.specht

Klappt super! Gratulation!
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
15.12.2019  
 




HofK
Die verschiedenen Körper benutzen alle die Kernprozeduren der Triangulation. Damit hat man in den einzelnen Funktionen zur Erzeugung der Körperoberflächen viel identischen Code. Möchte man nun in einer Szene verschiedene Körper darstellen, sind das unnötige identische Codeblöcke. Auch die anderen Teile ähneln sich abgesehen von den körperspezifischen Dingen.

Da ich noch weitere Körperoberflächen und ebene Flächen hinzufüge, ist das ungünstig.

Deshalb habe ich die Funktionen zur Erzeugung der Objekte zusammengefasst.

Bis jetzt für Kugel, Zylinder und neu Polygone mit n Ecken. Natürlich mit Löchern!



Die Eigenschaft surface: spezifiziert im Parameterobjekt die zu erzeugende Geometrie. Die weiteren Eigenschaften müssen dann dazu passen.
const gPly = new THREE.BufferGeometry( );

const parametersPly = {

    surface:'polygon', // or other planes ---> rectangle (divW: divH:), circle(div4)
    d: 0.25,// rough side length of the triangles
    polygonN: 12,
    divN: 6,
    holes: [
    // circular hole, [ div4Adp, x, y ],
    //[ 'circle', 10,  1.2, 0.5 ],
    // polygonal hole, [ polygonNAdp,divNAdp, x, y ],
    //[ 'polygon', 6, 4, 1.2, 0.5 ],
    // points hole,: array of points x, y, ...  (last point is connected to first)
    [ 1.1,0.1,  0.1,0.9,  -0.5,-1.45 ]
    ]

}

innerGeometry( gPly, parametersPly );
// .......................................
const gSph = new THREE.BufferGeometry( );

const parametersSph = {

    // excenter unit: '%' of the radius, 'd' factor to d, 'v' value
    surface:'sphere',
    d: 0.15,// rough side length of the triangles
    div4: 29,// division of the quarter of the great circle (orthodrome)
    holes: [
    // circular hole, [ div4Adp, theta, phi ], div4Adp <= div4
    ['circle', 10,  1.85, -0.75 ],
    ['circle', 12,  2.77,  1.81 ],
    ['circle', 7, -0.66,     0 ],
    // excentric (exc) hole to conect a cylinder, [ div4Adp, theta, phi, exc, unit, <optional: side> ]
    ['cylinder', 4,  0.2, 3.1,   2.45, 'v' ],
    ['cylinder', 3, -0.4, 2.3, 101.5,  '%' ],
    ['cylinder', 9,    0,   0,  12.71, 'd', '+-' ],
    // points hole,: array of points theta, phi, ...  (last point is connected to first)
    [ 1,1,  1.4,1.1,  1.4,1.3, 1,1.3 ]
    ]

}

innerGeometry( gSph, parametersSph );
// .......................................
const gCyl = new THREE.BufferGeometry( );

const parametersCyl = {

    // excenter unit: '%' of the radius, 'd' factor to d, 'v' value
    surface:'cylinder',
    d: 0.14,// rough side length of the triangles
    div4: 17,// division of the quarter circle
    geoBtm:'plane', // 'plane', 'sphere', 'cylinder' solid to be adapted
    bottom:  -4,
    div4Btm: 34,// division bottom adaptation, (to quarter, >= div4)
    phiBtm: 0.77,// rotation of adaptive-deformed circle (Bottom)
    excBtm: 1.2,
    excUnitBtm:'v',
    tiltBtm: 0.5,// tilt of bottom adaption ( -PI/2 < tilt < PI/2 )
    geoTop:'cylinder', //  'plane', 'sphere', 'cylinder' solid to be adapted
    top: 2,
    div4Top: 44,// division top adaptation, (to quarter, >= div4)
    phiTop: 0.77,// rotation of adaptive-deformed circle (Top)
    excTop: 148,
    excUnitTop:'%',
    tiltTop: 0.5,// tilt of top adaption ( -PI/2 < tilt < PI/2 )
    holes: [
    // excentric (exc) hole to conect a sphere:  [ 'sphere', div4AdpSphere, y, phi, exc, unit ]
    ['sphere', 16, -1.11, 0,  2.686, 'v' ],
    // excentric (exc) hole to conect a cylinder: [ 'cylinder', div4AdpCylinder, y, phi, exc, unit, tilt, <optional: side> ]
    ['cylinder', 8,  -2.2, 1.57, 52.898, '%', -0.22, '+-' ], // side is ignored for connected hole
    // points hole,: array of points y, phi, ...  (last point is connected to first)
    [ 0.15,0.45, 0.5,0.9, 0.8,0.6, 0.75,-0.2, 0.1,-0.15  ]
    ]

}

innerGeometry( gCyl, parametersCyl );

 
20.12.2019  
 




HofK
Im Testbeispiel kann man mit dem Schieberegler die Geburt der beobachten. [...] 



Bald auf GitHub.

 
22.12.2019  
 




p.specht

Very weihnachtlich!

Dir und den Deinen ein Frohes Fest!
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
23.12.2019  
 




HofK
Zum Jahresende ist Abschluss.

Die Beispielsammlung aus discourse für 2019 steht zum Download bereit.  [...] 



Bei three.js setzt man jetzt auf die neuen JavaScript ES6 Module. Die von mir geschätzte Seite mediaevent.de  [...]  benutzt übrigens dazu three.js für einige Beispiele.

Allerdings gibt es durch die Module auch neue Probleme.
Beim ersten Versuch ein Modulbeispiel in die Sammlung aufzunehmen, ging es gleich schief. Es gibt neue statische Abhängigkeiten. Hier für OrbitControls.



Auf discourse:  [...] 

Ich habe die Datei verändert, um es zum Laufen zu bringen.  [...] 

Mag sein, es gibt eine bessere Lösung.
 
02.01.2020  
 




HofK
Endlich mal wieder zur Triangulation gekommen.

Bis zum weihnachtlichen Sternenbeispiel hatte ich bereits noch fehlende Schnittlinien für die Zylindergrenzen programmiert.

Beim Zusammensetzen der einzelnen Teile gab es dann immer noch Probleme mit der exakten Übereinstimmung der Schnittlinienteilung. Problem war, dass ich die Winkelteilung dpsi immer auf die Teilung des jeweiligen Körpers bezogen habe.
dpsi = Math.PI * 2 /  g.detail  / 16;

Das führt zu leicht unterschiedlichen Abbrüchen der Schleife
while ( sqlen0 < 0.81 * dd ) {

    psi += sign * dpsi;
    xyzCalculation( );
    dx = x - x0;
    dy = y - y0;
    dz = z - z0;
    sqlen0 = squareLength( dx, dy, dz );

}




Nachdem ich den Fehler lokalisiert hatte, war die Lösung sehr einfach. Man nimmt den größeren Wert der beiden zu verbindenden Körper (Adp - Adaptation)

Damit ist es exakt!

 
06.01.2020  
 




HofK
Zwischendurch mal einige andere Sachen.

Zu den Modulen ein Beispiel mit mehreren Modulen.  [...] 
/*
import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { LineMaterial } from 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
import { Wireframe } from 'https://threejs.org/examples/jsm/lines/Wireframe.js';
import { LineSegmentsGeometry } from 'https://threejs.org/examples/jsm/lines/LineSegmentsGeometry.js';
*/
//import modified modules, see https://hofk.de/main/discourse.threejs/Module%20usage.pdf
import * as THREE from "../jsm/three.module.112.js";
import { OrbitControls } from "../jsm/OrbitControls.js";
import { LineMaterial } from "../jsm/LineMaterial.js";
import { Wireframe } from "../jsm/Wireframe.js";
import { LineSegmentsGeometry } from "../jsm/LineSegmentsGeometry.js";

-----------------------------------------------------------------------------------------------------

Zu einer Frage vom Mai 2018 gab es eine Erweiterung. Daraus resultiert eine kleine Folge von Beispielen. Von  [...]  bis  [...]  Der Aufwand konnte reduziert werden.

------------------------------------------------------------------------------------------------------

Ein Problem mit der Kamera  [...] 

-------------------------------------------------------------------------------------------------------

Alle drei Beispiele sind in der Sammlung verfügbar.  [...] 
 
24.01.2020  
 




HofK
Mit der exakten Übereinstimmung der Schnittlinienteilung gab es auch bei Zylinder - Zylinder noch Probleme. Durch die Parameter für Exzentrik und Schräge ist die Zusammenfügung nicht ganz einfach.

Nun funktioniert es aber und es muss wieder Code aufgeräumt werden.

 
24.01.2020  
 




p.specht

Ein Iglu mit Rauchfang?
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
24.01.2020  
 




HofK
Etwas fehlte dann doch noch.

Hat man ein verbundenes Loch, muss auch da das Gegenstück genau passen. Dazu waren nochmals Änderungen und Ergänzungen nötig. Man muss die Front aus dem Zylinder mit dem größeren Radius "herauslösen" und in die richtige Position bringen. Da tritt in Zwischenschritten wieder der "Halskrauseneffekt" auf.

verbinden



drehen



durchschieben



fertig, es passt ...





... ganz exakt ...



Mal schauen, ob nun wirklich alle Fälle ordentlich behandelt sind. 
 
27.01.2020  
 




Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

332.768 Betrachtungen

Unbenanntvor 0 min.
HofK vor 23 Tagen
Rschnett24.08.2024
Michael W.28.03.2024
Thomas Zielinski17.02.2024
Mehr...

Themeninformationen



Admins  |  AGB  |  Anwendungen  |  Autoren  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Händlerportal  |  Impressum  |  Mart  |  Schnittstellen  |  SDK  |  Services  |  Spiele  |  Suche  |  Support

Ein Projekt aller XProfaner, die es gibt!


Mein XProfan
Private Nachrichten
Eigenes Ablageforum
Themen-Merkliste
Eigene Beiträge
Eigene Themen
Zwischenablage
Abmelden
 Deutsch English Français Español Italia
Übersetzungen

Datenschutz


Wir verwenden Cookies nur als Session-Cookies wegen der technischen Notwendigkeit und bei uns gibt es keine Cookies von Drittanbietern.

Wenn du hier auf unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung von Informationen in unseren Cookies auf XProfan.Net zu.

Weitere Informationen zu unseren Cookies und dazu, wie du die Kontrolle darüber behältst, findest du in unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Ich möchte keinen Cookie