three.js => Tekstury i materiały

Wprowadzenie

Ładne wprowadzenie do materiałów i tekstur.

Tekstury rozproszone, wypukłe, zwierciadlane i przezroczyste.

Parametry

Parametr	Detale
kolor	Wartość liczbowa składnika RGB koloru.
intensywność	Wartość liczbowa siły / natężenia światła.
fov	Pionowe pole widzenia kamery frustum.
aspekt	Współczynnik kształtu obrazu z kamery.
Blisko	Aparat frustum w pobliżu samolotu.
daleko	Aparat frustum daleko samolot.
promień	promień kuli. Domyślnie jest to 50.
widthSegments	liczba segmentów poziomych. Minimalna wartość to 3, a domyślna to 8.
wzrostSegmenty	liczba segmentów pionowych. Minimalna wartość to 2, a domyślna to 6.
phiStart	określ poziomy kąt początkowy. Domyślnie 0.
phiLength	określ rozmiar kąta pochylenia w poziomie. Domyślnie jest to Math.PI * 2.
thetaStart	określ pionowy kąt początkowy. Domyślnie 0.
thetaLength	określ rozmiar kąta odchylenia w pionie. Domyślnie jest Math.PI.

Uwagi

Link demonstracyjny

Tworzenie modelu Ziemi

Tekstury tego przykładu są dostępne na stronie: http://planetpixelemporium.com/planets.html

Instalacja lub konfiguracja

Możesz zainstalować trzy za pomocą npm

npm install three

Lub dodaj go jako skrypt do swojej strony HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML:

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

Tworzenie sceny

Aby móc wyświetlać cokolwiek za pomocą pliku Three.js, potrzebujemy trzech rzeczy: sceny, kamery i renderera. Wyrenderujemy scenę za pomocą aparatu.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Tworzenie Kuli

Utwórz geometrię dla kuli
Utwórz materiał phong
Utwórz obiekt 3D
Dodaj to do sceny

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

Dodaj rozproszoną teksturę

Rozproszona tekstura ustawia główny kolor powierzchni. Kiedy zastosujemy go do kuli, otrzymamy następujący obraz.

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

Dodawanie tekstury mapy wypukłości

Każdy z jego pikseli działa jako wysokość na powierzchni.
Góry wyglądają wyraźniej dzięki swojemu cieńowi.
Za pomocą parametru bumpScale można zmienić wpływ mapy na oświetlenie.
Żadne dodatkowe wierzchołki nie są tworzone ani potrzebne do korzystania z mapy wypukłości (w przeciwieństwie do mapy przemieszczeń)

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

Dodawanie tekstury zwierciadlanej

Zmienia „połysk” obiektu o fakturze.
Każdy piksel określa intensywność specularity.
W tym przypadku tylko morze jest lustrzane, ponieważ woda odbija światło bardziej niż ziemia.
Możesz kontrolować kolor zwierciadła za pomocą parametru zwierciadła.

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

Dodawanie warstwy chmury

Tworzymy canvasCloud z płótnem i używamy go jako tekstury.
Robimy to, ponieważ jpg nie obsługuje kanału alfa. (Jednak obraz PNG działa)
Musimy stworzyć kod, aby zbudować teksturę na podstawie następujących obrazów.

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

cloudMesh do earthMesh aby poruszały się razem.
depthWrite i ustawiamy transparent: true jest taka, żeby powiedzieć plikowi.j.j, że chmura chmur jest przezroczysta.
Ustawiamy strony na THREE.DoubleSide aby obie strony były widoczne.
- Pozwala to uniknąć tworzenia artefaktów na krawędzi ziemi.
Na koniec ustawiliśmy opacity: 0.8 aby chmury były bardziej przezroczyste

Dodawanie ruchu obrotowego

W swojej pętli renderowania po prostu zwiększasz obrót

Na koniec animujemy warstwę chmury, aby wyglądała bardziej realistycznie.

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

three.js
Tekstury i materiały

Szukaj…

Wprowadzenie

Parametry

Uwagi

Tworzenie modelu Ziemi