Metainformationen zur Seite
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
|
computer:basteln:threejs [2014/09/22 18:04] gaubes [THREE.PlaneGeometry()] |
computer:basteln:threejs [2018/03/16 21:11] (aktuell) |
||
|---|---|---|---|
| Zeile 71: | Zeile 71: | ||
| </code> | </code> | ||
| Im Vergleich zur PerspectiveCamera werden die Grenzen statt dem Verhältnis eingefügt. | Im Vergleich zur PerspectiveCamera werden die Grenzen statt dem Verhältnis eingefügt. | ||
| + | |||
| + | ===== Material ===== | ||
| + | Bisher wurde nur das MeshBasicMaterial() als ''normales'' Material erwähnt. Da Körper mit dieser Umhüllung nicht die schönsten sind, besteht zunächst einmal die Möglichkeit, die Farbe zu ändern: | ||
| + | <code javascript> koerper.color.setRGB(0.36,0.54,0.66);</code> | ||
| + | Dabei stehen die Zahlen jeweils für prozentuale Anteile der Farben rot, grün und blau. | ||
| + | |||
| + | ==== WebGL ==== | ||
| + | Befindet man sich nun im WebGL-Renderer, so kann man mit Licht, Reflektion am Material und Schatten arbeiten. | ||
| + | |||
| + | === Licht === | ||
| + | Damit das Licht auf einem Körper gut strahlen kann und er nicht matt bleibt sollte man das | ||
| + | ** THREE.MeshPhongMaterial()** benutzen und eine Lichtquelle zur Szene hinzufügen. | ||
| + | <code javascript> | ||
| + | var sonnenlicht = new THREE.DirectionalLight(); | ||
| + | sonnenlicht.intensity =0.5; | ||
| + | sonnenlicht.position.set (100,100,100); | ||
| + | scene.add(sonnenlicht); | ||
| + | </code> | ||
| + | Benutzt man nun das MeshPhongMaterial, so ändert man die Farbe anders als beim MeshBasicMaterial, nämlich folgendermaßen: | ||
| + | <code javascript> koerper.emissive.setRGB(0.8,0.1,0.1);</code> | ||
| + | Dadurch strahlt die Farbe mehr, als beim color-Attribut. | ||
| + | Weiterhin lässt sich die Lichtspiegelung des Körpers durch das specular-Attribut angeben: | ||
| + | <code javascript> koerper.specular.setRGB(0.9,0.9,0.9);</code> | ||
| + | |||
| + | === Schatten === | ||
| + | Um Schatten zu verwenden muss man diese im Renderer aktivieren: | ||
| + | <code>render.shadowMapEnabled = true;</code> | ||
| + | Weiterhin muss man in dem Programm mitteilen, welches Objekt durch welches Licht auf welchen anderen Körper oder Boden der Schatten geworfen werden soll. Da dieses einiges an Rechnerleistung verwendet, sollte man diesbezüglich sparsam sein. | ||
| + | <code javascript> | ||
| + | scene.add(koerper); | ||
| + | scene.add(sonnenlicht); | ||
| + | koerper.castShadow = true; | ||
| + | sonnenlicht.castShadow = true; | ||
| + | |||
| + | scene.add(boden); | ||
| + | boden.receiveShadow = true; | ||
| + | </code> | ||
| + | |||
| + | |||