| |
| |
|
| - 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. |
|
| |
| |
| |
|
| |
| |
| - Página 10 - |
|
|
HofK | El Función explode hay nun auch en THREEf.
El neuesten Versionen befinden se en meiner Página y en GitHub.
--------------------------------------------------------------------------------------
Dann una wenig Abwechselung y eventuell podría Yo helfen.
Dort [...] war veces otra vez una einfache Cuestión - a uno " slot machine" Spielautomat ? .
Im Ergebnis Yo una weiteres kleines Anfängerbeispiel.
Se puede lo bajo [...] o. [...] ausprobieren.
<!DOCTYPE html>
<!-- *** wheel ***
/**
* @author hofk
*/
-->
<html lang="de">
<head>
<title> numberwheel </title>
<meta charset="utf-8" />
</head>
<body>
</body>
<script src="three.min.88.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 20000 );
camera.position.set( 250, 100, 60 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdddddd, 1 );
var container = document.createElement('div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
var clock = new THREE.Clock( true );
var time;
// material
var uvTex = new THREE.TextureLoader().load( "uvgrid_w_0_9 .jpg" );
var material = new THREE.MeshBasicMaterial( { map: uvTex, side: THREE.DoubleSide } );
var geometry = new THREE.CylinderGeometry(80, 80, 80, 10, 1, true);
// mesh
var mesh1 = new THREE.Mesh( geometry, material );
scene.add( mesh1 );
mesh1.rotation.x = 1.57;
animate();
function animate() {
requestAnimationFrame( animate );
time = clock.getElapsedTime();
mesh1.rotation.y = 0.4 * time;
renderer.render( scene, camera );
controls.update();
}
</script>
</html>
Man benötigt sólo passende Gráficos - como hay otro Experten como mich!
Mein Intento:
 |
|
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
HofK | Posesiones el Nähte sólo una vez beiseite gelegt y el Festlegung des Materialindex je face por String-Datenfeld ergänzt. En THREEp es bastante simplemente después de el Reihenfolge el faces por Halbkugel, el Cuerdas son para bottom o. top (Süd/ Nord, si está disponible) para jede Kugelschicht y para el Deckebene y el Keil (si está disponible).
Damit es el Umfang nun ähnlich como en THREEf y el Betaphase erreicht.
Ausprobieren bajo [...] oder Code en GitHub betrachten/ downloaden bajo [...] |
|
| |
| |
| |
|
|
HofK | Tiempo otra vez algo Abwechslung - una interessante 3D Sache. -----
In una Contribución en discourse.threejs.org [...] fand Yo una Spur a uno Biblioteca a "Mischung" de geometrischen Objekten. [...]
Darunter puede ser en el Página una Beispielcode Editar y así seine incluso erstellten Resultate en 3D begutachten.
Ein Intento.
Mit a.setColor(1, 1, 0); oder a.setColor(255, 255, 255);
sieht lo igual bastante anders de.
Einfach veces probieren! |
|
| |
| |
| |
|
|
HofK | Weil en Variante con el Kugelkoordinaten todos Dreiecke (faces) con einerm fixierten Material versehen voluntad puede, Yo para el Zylindervariante THREEf nun todavía el bisher hay fehlenden Boden y Deckel ergänzt.
Anders como en Kugel son Boden y Deckel aber aquí en el Konstruktion muy eigenständig. Deshalb hay dafür zusätzlich para Datenfeld fixedMaterial zwei extra Características fixedMatTop y fixedMatBottom. Sie puede una Zeichenkette de Ziffern 0 a 9 enthalten. Platzhalter es auch hier el Punkt. Damit voluntad el Materialien el Dreiecke / faces fixiert. Auch hier Es el Eingabe fehlertolerant. Also una Zeichenkette .5.5 fixiert el zweite y vierte face en Material 5. Überschreibt Así que una Ergebnis el Características materialBottom o. materialTop. Dabei kann Boden/ Deckel durchaus más que vier faces umfassen.
Bereits hay integriert: [...]
Noch no en GitHub. |
|
| |
| |
| |
|
|
HofK | Rotationen en el Raum 
son una para el Menschen no bastante así simplemente a überschauende Sache.
Gäbe lo Vögel con meschlicher Intelligenz , que three.js verschrieben hätten, wäre el para el primitiv. Sie leben en el Raum y por el Augenstellung haben ellos Rundumblick. Wenn un hombre una Salto con Schraube macht, es el ya Medaillen verdächtig!
Wenn Yo also behaupte, mein räumliches Denken es no schlecht, es el muy relativ.
In three.js voluntad para Rotationen sogenannte Quaternionen benutzt. Wer el Wort todavía nie gehört ha, el es como me a antes einiger Tiempo, obwohl Yo mich muy wohl seit langer Tiempo Mathematik beschäftige. El Mathematik es aber así umfangreich, dass manche Teilbereiche sólo en cierto Anwendungsbereichen una Papel spielen.
Robotik [...]
Autobranche DIN 70000 [...]
Flugregler Página 125 [...]
Und porque lo para mich neu war, Yo después de uno guten Visualisierung gesucht. Viel war no para encontrar y entsprach entonces no media Bedürfnissen.
Aber algunos Grundlagen Yo así zusammengetragen.
Umrechnung [...]
Grafikprogrammierung (Folie 24) [...]
Quaternionen y Drehungen [...]
Understanding Quaternions [...]
Freie Rotation en el Raum - Kamerasteuerung [...]
Ein schöner Umrechner - aber sin Visualisierung. [...]
______________________________________________
Dann also otra vez veces selber gemacht.
Designed para Firefox.
Und hay ausprobieren / Code betrachten. [...] o. [...]
-----------
NACHTRAG 06.12.:
Tipp! Gibt uno no normalisierte Werte en el Eingabefelder una y wechselt para Schieber, voluntad el Vektoren normalisiert (Longitud 1). |
|
| |
| |
| |
|
|
p.specht
 | | Tolle Zusammenstellung, gute Umsetzung! Como sucht uno normalerweise una Monat en el Net - Gracias! |
|
| |
| XProfan 11Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'... | 06.12.2017 ▲ |
|
| |
|
|
HofK | El "Rotations-Testperson" es sí schick gemustert, qué para el Zweck bastante hilfreich es, aber doch muy simplemente.
Sie besteht eben sólo de elementaren Körpern.
Kompliziertere Körper con Características a erzeugen finde Yo incluso muy interessant - siehe oben. Aber es sicher no jedermanns Sache y no todos Körper dejar se así herstellen.
Lo son algunos Tools en 3D Objetos a erzeugen, así es Blender muy verbreitet. [...]
Als Principiante se uno de el Oberfläche aber sólo una vez liso "erschlagen".
Einfacher aber natürlich weniger umfangreich son z.B. [...] (muy simplemente) [...] (Página auch Alemán, Software Inglés - algo umfangreicher)
Aunque bekam Yo beim Export el benötigten .obj Archivos no .mtl Expediente para el Materialien. Diese "Bastelei" me está entweder a langweilig oder a anstrengend - no mein Ding.
Aber uno kann auch fertige Objetos benutzen. Leider hay una Vielfalt a Dateitypen. En three.js en el Startseite [...] son featured projects para encontrar. So auch poly [...]
Dort puede ser Objetos hoch- y algunos auch runterladen. Nur Yo wenige herunterladbare (Lizenz!) .obj Archivos ( plus .mtl Expediente para el Material) gefunden.
A Lizenz:
Diesen Inhalt remixen
Dieser Inhalt se bajo uno CC-BY-Lizenz veröffentlicht. Wenn du el Autor namentlich nennst, kannst du esta Inhalt libre uso.
Nun fehlt todavía una kleines Script, en el Spinner cualquier en three.js utilizarse. Das Problema son como siempre se rápidamente ändernde Statements en three.js. Ein gutes Ejemplo [...] [...] es después de ca. 11 Monaten ya no mehr bastante aktuell. Lo son Warnungen, se ejecuta aber todavía bajo el aktuellen Revision 88.
Ganz así simplemente es el Ejemplo aber auch no.
Das offizielle Ejemplo en threejs.org es para Principiante como meist a komplex. Erst una vez Wichtiges es schwer herauszufiltern.
Also Yo radikal zusammengestrichen.
Dann restos sólo el überschaubare Kern übrig.
Etwas gewöhnungsbedürftig:
Lo se en uno Función el Material geladen y dieser Función entonces el Objeto.
Si el Objeto erstellt se, muss el zugehörige Material bekannt ser. Also verschachtelt uno lo.
var exampleObject = new THREE.Object3D();
var mtlLoaderExample = new THREE.MTLLoader( );
mtlLoaderExample.load(
'spiner.mtl', // Lizenz
function (materials) {
materials.preload();
var objLoaderExample = new THREE.OBJLoader( );
objLoaderExample.setMaterials( materials );
objLoaderExample.load(
'spiner.obj', // Lizenz
function (object) {
exampleObject.add(object);
}
);
}
);
scene.add( exampleObject );
Das komplette Ejemplo: [...] o. [...]
_________________________________
Nachträge:
Como [...] hay algunos obj Archivos con Vorschaubild. Aber sin Material!
---
Weitere siehe Contribución vom 16.01.2018 más unten. |
|
| |
| |
| |
|
|
HofK | Wenn uno una Geometrie "von Hand" producido, siehe Ver código fuente (Strg+U) de [...] trägt uno Werte para Positionen usw. en JavaScript Datenfelder una. Man ha el Geometrie sozusagen voll en el Griff y kann veces rápidamente una Valor ändern.
Benutzt uno nun aber mein Addon THREEf.js, así son uno sólo unos pocos Características como Parámetro a y fertig Es el Geometrie.
Como sieht el nun aber intern de? Como el Datenfelder?
Weil Yo neugierig bin, Yo quería me natürlich ahora veces ansehen. Ausserdem dazu el Concepto, por Características erzeugte Geometrie nachträglich a modifizieren. Das macht Sinn, si la Grundform klar es y rápidamente por Características producido voluntad kann, aber algunos Kleinigkeiten muy individuell gestaltet voluntad debería. Und si uno dazu no una Modellierungstool como Blender benutzen möchte - Yo möchte no!
Deshalb Yo una kleines Script geschrieben. Lo son el Datenfelder de. Um a sehen, si el auch korrekt son y como Vorbereitung a Umsetzung el Concepto a Modifizierung el Geometrie, Yo pero no el Zahlenwerte aneinandergereiht, pero en ellos herum auch el JavaScript Code a Erzeugung el Geometrie por three.js con generiert. Kopiert uno nun esta Code por Strg+A, Strg+C, Strg+V en un vacío Expediente geo.js y bindet esta por
<script src="geo.js"></script>
en el Script con el Edición una, erhält uno después de Aktualisierung el Vergleich, si en el Script todavía
// skript geo.js definiert Geometrie geo
var me = new THREE.Mesh( geo, materials );
scene.add( me );
me.add( geo.quadLine );
me.position.x = 50;
a Erzeugung el gedoppelten Geometrie 50 rechts ergänzt se. Unten dran el a kopierende JavaScript.
Der Quellcode:
<!DOCTYPE html>
<!-- *** modify THREEf geometries ***
/**
* @author hofk / https://sandbox.threejs.hofk.de/
*/
-->
<html lang="de">
<head>
<title> modify </title>
<meta charset="utf-8" />
</head>
<body>
<div id="webGL"> </div>
<div id="output"> output </div>
</body>
<script src="three.min.88.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script src="THREEf.js"></script>
<script src="geo.js"></script>
<script>
'use strict'
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200000 );
camera.position.set( 0, 80, 200 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xeeeeee, 1 );
var container = document.getElementById('webGL' );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
// material
var uvTex = new THREE.TextureLoader().load( "uvgrid01.png" );
var waterlilyTex = new THREE.TextureLoader().load( "waterlily.png" );
var side = THREE.DoubleSide;
var materials = [// material index:
new THREE.MeshBasicMaterial( { transparent: true, color: 0x00ff00, opacity: 0.7, side: side } ),// 0 transparent
new THREE.MeshBasicMaterial( { map: uvTex, side: side } ),// 1 uv grid
new THREE.MeshPhongMaterial( { color: 0xff0000, emissive: 0xff0000, side: side, } ),// 2 red
new THREE.MeshPhongMaterial( { color: 0x00ff00, emissive: 0x00ff00, side: side, } ),// 3 green
new THREE.MeshPhongMaterial( { color: 0x0000ff, emissive: 0x0000ff, side: side, } ),// 4 blue
new THREE.MeshPhongMaterial( { color: 0xffff00, emissive: 0xffff00, side: side, } ),// 5 yellow
new THREE.MeshPhongMaterial( { color: 0xff00ff, emissive: 0xff00ff, side: side, } ),// 6 mgenta
new THREE.MeshPhongMaterial( { color: 0x00ffff, emissive: 0x00ffff, side: side, } ),// 7 cyan
new THREE.MeshBasicMaterial( { map: waterlilyTex, side: side } ),// 8 photo waterlily (free)
new THREE.MeshPhongMaterial( { color: 0x7755ff, emissive: 0x4433dd, side: side } ),// 9 color
new THREE.MeshPhongMaterial( { color: 0x444444, emissive: 0x333333, side: side } )// 10 grey
];
var sun1 = new THREE.DirectionalLight();
sun1.intensity = 0.6;
sun1.position.set(50, 200, 300);
scene.add(sun1);
var sun2 = new THREE.DirectionalLight();
sun2.intensity = 0.5;
//sun2.position.set(-50, -200, 300);
sun2.position.set(0, 0, 0);
scene.add(sun2);
// geometry
var parámetros = {
height: 20,
quadLine: true,
quadColor: 0xff00ff,
circOpen: true,
unrollCover: function ( v, t ) { volver 0.2 },
radiusSegments: 2,
heightSegments: 1,
rCircHeight: function ( u, v, t ) { volver u + v },
materialCover: function ( u, v, t ) { volver 0 },
}
var geometry = new THREE.BufferGeometry();
geometry.createMorphGeometry = THREEf.createMorphGeometry;
geometry.createMorphGeometry( parámetros );
// ........... start output JavaScript Code ....................................................
var vc3 = geometry.vertices.length;
var uvc2 = geometry.uvs.length;
var fc = geometry.faceIndices.length / 3;
output.innerHTML = "var geo = new THREE.BufferGeometry(); <br />";
output.innerHTML += "geo.faceIndices = new Uint32Array( [ " + geometry.faceIndices + " ] ); <br /> ";
output.innerHTML += "geo.vertices = new Float32Array( [ ";
for ( var v = 0; v < vc3 ; v ++ ) {
output.innerHTML += geometry.vertices[ v ];
output.innerHTML += v < vc3 - 1 ? ", " : "";
}
output.innerHTML += " ] ); <br /> ";
output.innerHTML += "geo.normals = new Float32Array( [ ";
for ( var v = 0; v < vc3 ; v ++ ) {
output.innerHTML += geometry.normals[ v ];
output.innerHTML += v < vc3 - 1 ? ", " : "";
}
output.innerHTML += " ] ); <br /> "
output.innerHTML += "geo.uvs = new Float32Array( [ ";
for ( var v = 0; v < uvc2 ; v ++ ) {
output.innerHTML += geometry.uvs[ v ];
output.innerHTML += v < uvc2 - 1 ? ", " : "";
}
output.innerHTML += " ] ); <br /> "
output.innerHTML += "geo.setIndex( new THREE.BufferAttribute( geo.faceIndices, 1 ) ); <br /> geo.addAttribute( 'position', new THREE.BufferAttribute( geo.vertices, 3 )); <br />geo.addAttribute( 'normal', new THREE.BufferAttribute( geo.normals, 3 )); <br /> geo.addAttribute( 'uv', new THREE.BufferAttribute( geo.uvs, 2 ) );<br /> ";
output.innerHTML += "var geoG = [ ";
for ( var f = 0, p = 0; f < fc ; f ++, p += 3 ) {
output.innerHTML += geometry.groups[ f ].start + ", " + geometry.groups[ f ].count + ", " + geometry.groups[ f ].materialIndex ;
output.innerHTML += f < fc - 1 ? ", " : "";
}
output.innerHTML += " ]; <br /> ";
output.innerHTML += " for ( var f = 0, p = 0; f < " + fc + "; f ++, p += 3 ) { geo.addGroup( geoG[ p ], geoG[ p + 1 ], geoG[ p + 2 ] ); } <br /> ";
if ( geometry.quadLine ) {
output.innerHTML += "geo.lineGeometry = new THREE.BufferGeometry(); <br />";
output.innerHTML += "geo.quadLine = new THREE.Line( geo.lineGeometry, new THREE.LineBasicMaterial( { color: " + geometry.quadColor + "} ) ); <br />";
output.innerHTML += "geo.linePositions = new Float32Array( [ ";
for ( var v = 0; v < 2 * vc3 ; v ++ ) {
output.innerHTML += geometry.linePositions[ v ];
output.innerHTML += v < 2 * vc3 - 1 ? ", " : "";
}
output.innerHTML += " ] ); <br /> ";
output.innerHTML += "geo.lineGeometry.addAttribute( 'position', new THREE.BufferAttribute( geo.linePositions, 3 ) ); <br />";
}
// .............. end output JavaScript Code .......................................................
// mesh
var mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
mesh.add( geometry.quadLine );
mesh.colorsNeedUpdate = true;
//... skript geo.js def. Geometry geo ............ ......
var me = new THREE.Mesh( geo, materials );
scene.add( me );
me.add( geo.quadLine );
me.position.x = 50;
//..........................................................
animate();
//-----------------
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
}
</script>
</html>
|
|
| |
| |
| |
|
|
HofK | Wenn uno el Geometrie modifizieren möchte, benötigt uno el 3D Zugriff por Ratón y algunos Informationen. Dazu podría Yo mein Raycaster Ejemplo [...] como Grundlage uso.
Raycaster ermittelt así manche Werte.
Como en Vorstellung des Beispiels (erste Versión 29.10.2016 , Alemán) besprochen, voluntad Positionen en el lokalen Speicher des Browsers abgelegt. Neuere Browserversionen ermöglichen nun el Zugriff! Como puede ser después de el gespeicherten Werten sehen y ellos en Bedarf auch löschen. Mit Firefox sieht el beim Ejemplo así de.
Also veces schauen, qué otro Páginas como así abladen!
Kein Geheimnis:
Laufende Projekte bearbeite Hice uno RAM-Disk heraus. Kein Festplattenlärm, SSD schonen y superschnell.
Como uno en el oberen Bild erkennt, trat en indices una Fehler en.
undefined
Nach Recherche fand Yo una Problema y el para mich erstaunlicherweise en BufferGeometry faceIndex funktioniert.
Das Yo veces como Cuestión en discourse.threejs.org gestellt: [...]
Soeben kam ya una Antwort herein! |
|
| |
| |
| |
|
|
HofK | Mittlerweile Yo una wenig a el Manipulation el Positionen el Geometrie herumgewerkelt. El principio es eigentlich bastante simplemente, aber como así oft steckt el en el Detalle y ha me manchmal dazwischengefunkt.
Man berechnet el Richtung y el Abstand (Vektor) des Schnittpunktes des Strahls de el Kamera con el Hilfsebene (raycaster.intersectObjects( ... ) a Ecken a, b, c des Dreiecks. Bewegt una continuación el Ratón, voluntad el Eckpunkte entsprechend mitbewegt, indem uno el Vektor addiert.
Der todavía unfertige Arbeitsstand es aktuell como Video hay [...] (Mittlerweile hay neuere Videos!) a sehen.El Reacción el Hilfsebene en el Mausbewegung macht me todavía Problemas, como es Feinarbeit angesagt, oder lo muss algo al Grundkonzept geändert voluntad.
Tuve con gridHelperXY = new THREE.GridHelper( ... todavía total drei Hilfsgitter eingeblendet, aber entonces war el Mausreaktion "Glückssache".
El eigentliche Manipulation el Werte en el Datenfeld es muy überschaubar:
Dabei es handle... el Schnittpunkt en el Hilfsebene perpendicular a Kamera y paV, pbV y pcV el Vektoren de hay a Eckpunkten.
 |
|
| |
| |
| |
|
|
ByteAttack | | Ob se el wirklich hier en el Foro wirklich anschaut? Wage Yo a bezweifeln... Yo persönlich finde deine Arbeit toll! |
|
| |
| |
| |
|
(519)
Deutsch
English
Français
Español
Italia