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 31 -



HofK
on braucht aucun Schnittebene, qui caméra dans three.js hat paramètre pour qui 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 le camera's viewing frustum.
 
14.12.2019  
 




HofK
une weitere étape ist geschafft. qui Zylinderenden peut eh bien très flexibel gestaltet volonté. avec cela un notwendiger Schritt um allgemeinere Innengeometrien trop erzeugen.

là veröffentlicht  [...] 

là ausprobieren (Schieber benutzen) et 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
qui verschiedenen Körper benutzen alle qui Kernprozeduren qui Triangulation. avec cela hat on dans den individuel Funktionen zur Erzeugung qui Körperoberflächen viel identischen Code. voudrais on eh bien dans einer Szene verschiedene Körper représenter, sommes cela unnötige identische Codeblöcke. aussi qui anderen Teile ähneln sich abgesehen de den körperspezifischen Dingen.

là je encore weitere Körperoberflächen et plaine Flächen hinzufüge, ist cela ungünstig.

c'est pourquoi habe je qui Funktionen zur Erzeugung qui Objekte zusammengefasst.

jusqu'à maintenant pour Kugel, Zylinder et récente Polygone avec n Ecken. Bien sûr avec Löchern!



qui qualité surface: spezifiziert im Parameterobjekt qui trop erzeugende Geometrie. qui weiteren Eigenschaften doit ensuite en supplément 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 le 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, ...  (charge 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 le radius, 'd' factor to d, 'v' value
    surface:'sphere',
    d: 0.15,// rough side length of le triangles
    div4: 29,// division of le quarter of le 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, ...  (charge 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 le radius, 'd' factor to d, 'v' value
    surface:'cylinder',
    d: 0.14,// rough side length of le triangles
    div4: 17,// division of le quarter circle
    geoBtm:'plane', // 'plane', 'sphere', 'cylinder' solid to être 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 être 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, ...  (charge 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 peux on avec dem Schieberegler qui naissance qui beobachten. [...] 



bientôt sur GitHub.

 
22.12.2019  
 




p.specht

Very weihnachtlich!

Dir et den Deinen un Heureux 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.

qui Beispielsammlung aus discourse pour 2019 steht zum Télécharger bereit.  [...] 



chez three.js mets on maintenant sur qui neuen JavaScript ES6 Module. qui de mir geschätzte page mediaevent.de  [...]  benutzt incidemment en supplément three.js pour quelques Beispiele.

Allerdings gibt es par qui Module aussi neue Probleme.
Beim ersten Versuch un Modulbeispiel dans qui recueil aufzunehmen, ging es juste de travers. il y a neue statische Abhängigkeiten. ici pour OrbitControls.



sur discourse:  [...] 

j'ai qui Dossier modifié, um es zum courir trop apporter.  [...] 

Mag son, il y a une bessere Solution.
 
02.01.2020  
 




HofK
enfin la fois wieder zur Triangulation gekommen.

jusqu'à zum weihnachtlichen Sternenbeispiel J'ai eu bereits encore fehlende Schnittlinien pour qui Zylindergrenzen programmiert.

Beim Zusammensetzen qui individuel Teile donnais es ensuite toujours Probleme avec qui exakten Übereinstimmung qui Schnittlinienteilung. Problem était, dass je qui Winkelteilung dpsi toujours sur qui partage des jeweiligen Körpers bezogen habe.
dpsi = Math.PI * 2 /  g.detail  / 16;

cela führt trop léger unterschiedlichen Abbrüchen qui Boucle
tandis que ( sqlen0 < 0.81 * dd ) {

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

}




après que Je l' faute lokalisiert hatte, était qui Solution très simple. on nimmt den größeren Wert qui beiden trop verbindenden Körper (Adp - Adaptation)

avec cela ist es exakt!

 
06.01.2020  
 




HofK
Zwischendurch la fois quelques autre Sachen.

trop den Modulen un Beispiel avec mehreren Modulen.  [...] 
/*
importation * as THREE à partir de "https://threejs.org/build/three.module.js";
importation { OrbitControls } à partir de "https://threejs.org/examples/jsm/controls/OrbitControls.js";
importation { LineMaterial } à partir de 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
importation { Wireframe } à partir de 'https://threejs.org/examples/jsm/lines/Wireframe.js';
importation { LineSegmentsGeometry } à partir de 'https://threejs.org/examples/jsm/lines/LineSegmentsGeometry.js';
*/
//importation modified modules, lac https://hofk.de/main/discourse.threejs/Module%20usage.pdf
importation * as THREE à partir de "../jsm/three.module.112.js";
importation { OrbitControls } à partir de "../jsm/OrbitControls.js";
importation { LineMaterial } à partir de "../jsm/LineMaterial.js";
importation { Wireframe } à partir de "../jsm/Wireframe.js";
importation { LineSegmentsGeometry } à partir de "../jsm/LineSegmentsGeometry.js";

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

trop einer Frage vom mai 2018 donnais es une Erweiterung. Daraus resultiert une kleine Folge de Beispielen. de  [...]  jusqu'à  [...]  qui Aufwand konnte reduziert volonté.

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

un Problem avec qui caméra  [...] 

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

Alle trois Beispiele sommes dans qui recueil disponible.  [...] 
 
24.01.2020  
 




HofK
avec qui exakten Übereinstimmung qui Schnittlinienteilung donnais es aussi chez Zylinder - Zylinder encore Probleme. par qui paramètre pour Exzentrik et Schräge ist qui Zusammenfügung pas entier simple.

eh bien funktioniert es mais et es muss wieder Code aufgeräumt volonté.

 
24.01.2020  
 




p.specht

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




HofK
quelque chose fehlte ensuite doch encore.

Hat on un verbundenes Loch, muss aussi là cela Gegenstück oui c'est ca passen. en supplément étions nochmals Changements et Ergänzungen nötig. on muss qui Front aus dem Zylinder avec dem größeren Radius "herauslösen" et dans qui richtige Position apporter. là tritt dans Zwischenschritten wieder qui "Halskrauseneffekt" sur.

relier



drehen



durchschieben



fertig, es passt ...





... entier exakt ...



la fois regarder, si eh bien wirklich alle Fälle réglé behandelt sommes. 
 
27.01.2020  
 




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.681 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