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



HofK
Man braucht no Schnittebene, el Kamera en three.js ha Parámetro para el 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
Un weitere Etappe es geschafft. El Zylinderenden puede nun muy flexibel gestaltet voluntad. Damit una notwendiger Schritt en allgemeinere Innengeometrien a erzeugen.

Como veröffentlicht  [...] 

Como ausprobieren (Schieber benutzen) y el código 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
El verschiedenen Körper benutzen todos el Kernprozeduren el Triangulation. Damit ha uno en el individual Características a Erzeugung el Körperoberflächen viel identischen Code. Möchte uno nun en uno Szene verschiedene Körper darstellen, son el unnötige identische Codeblöcke. Auch el otro Teile ähneln se abgesehen de los körperspezifischen Dingen.

Desde que todavía weitere Körperoberflächen y ebene Flächen hinzufüge, es el ungünstig.

Deshalb Yo el Características a Erzeugung los objetos zusammengefasst.

Bis ahora para Kugel, Zylinder y neu Polygone con n Ecken. Natürlich con Löchern!



El Eigenschaft surface: spezifiziert en el Parameterobjekt el a erzeugende Geometrie. El más Características necesario entonces 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 puede ser con el Schieberegler el Geburt el beobachten. [...] 



Bald en GitHub.

 
22.12.2019  
 




p.specht

Very weihnachtlich!

Usted y el Su una Felices Fiestas!
 
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 es Abschluss.

El Beispielsammlung de discourse para 2019 es para Descargar bereit.  [...] 



En three.js setzt uno ahora en el neuen JavaScript ES6 Module. El de me geschätzte Página mediaevent.de  [...]  benutzt de paso dazu three.js para algunos Beispiele.

Aunque hay por el Module auch neue Problemas.
Beim ersten Intento una Modulbeispiel en el Sammlung aufzunehmen, ging lo igual torcido. Lo son neue statische Abhängigkeiten. Hier para OrbitControls.



Auf discourse:  [...] 

Yo habe el Expediente verändert, en lo para Laufen a bringen.  [...] 

Mag ser, lo son una bessere Solución.
 
02.01.2020  
 




HofK
Endlich veces otra vez a Triangulation gekommen.

Bis para weihnachtlichen Sternenbeispiel Tuve ya todavía fehlende Schnittlinien para el Zylindergrenzen programmiert.

Beim Zusammensetzen el individual Teile gab lo entonces siempre todavía Problemas con el exakten Übereinstimmung el Schnittlinienteilung. Problema war, dass Yo el Winkelteilung dpsi siempre en el Teilung des jeweiligen Körpers bezogen habe.
dpsi = Math.PI * 2 /  g.detail  / 16;

Das führt a ligeramente unterschiedlichen Abbrüchen el Bucle
mientras que ( sqlen0 < 0.81 * dd ) {

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

}




Nachdem Yo, el Fehler lokalisiert hatte, war el Solución muy simplemente. Man nimmt el größeren Valor el beiden a verbindenden Körper (Adp - Adaptation)

Damit es exakt!

 
06.01.2020  
 




HofK
Zwischendurch veces algunos otro Sachen.

Zu el Modulen una Ejemplo con más 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 uno Cuestión vom Mai 2018 gab lo una Erweiterung. Daraus resultiert una kleine Folge de Beispielen. Von  [...]  a  [...]  Der Aufwand podría reduziert voluntad.

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

Ein Problema con el Kamera  [...] 

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

Alle drei Beispiele son en el Sammlung verfügbar.  [...] 
 
24.01.2020  
 




HofK
Mit el exakten Übereinstimmung el Schnittlinienteilung gab lo auch en Zylinder - Zylinder todavía Problemas. Durch el Parámetro para Exzentrik y Schräge Es el Zusammenfügung no bastante simplemente.

Nun funktioniert lo aber y lo muss otra vez Code aufgeräumt voluntad.

 
24.01.2020  
 




p.specht

Ein Iglu con 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 entonces todavía.

Sombrero uno una verbundenes Loch, muss auch como el Gegenstück genau passen. Dazu waren nochmals Los cambios y Ergänzungen nötig. Man muss el Front de el Zylinder con el größeren Radius "herauslösen" y el richtige Position bringen. Como tritt en Zwischenschritten otra vez el "Halskrauseneffekt" en.

verbinden



drehen



durchschieben



fertig, lo passt ...





... bastante exakt ...



Tiempo schauen, si nun wirklich todos Fälle ordentlich behandelt son. 
 
27.01.2020  
 




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.610 Views

Untitledvor 0 min.
Paul Glatz vor 19 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