three.js => Texturen en materialen

Invoering

Een leuke inleiding tot materiaal en texturen.

Diffuse, hobbelige, spiegelende en transparante structuren.

parameters

Parameter	Details
kleur	Numerieke waarde van de RGB-component van de kleur.
intensiteit	Numerieke waarde van de sterkte / intensiteit van het licht.
fov	Camerafrustum verticaal gezichtsveld.
aspect	Beeldverhouding camera frustum.
in de buurt	Camerafrustum dichtbij vliegtuig.
ver	Camera frustum ver vliegtuig.
straal	bol straal. Standaard is 50.
widthSegments	aantal horizontale segmenten. De minimumwaarde is 3 en de standaardwaarde is 8.
heightSegments	aantal verticale segmenten. De minimumwaarde is 2 en de standaardwaarde is 6.
phiStart	specificeer horizontale starthoek. Standaard is 0.
phiLength	geef de horizontale zwaaihoekgrootte op. Standaard is Math.PI * 2.
thetaStart	specificeer verticale starthoek. Standaard is 0.
thetaLength	geef de verticale zwaaihoek op. Standaard is Math.PI.

Opmerkingen

Demolink

Een modelaarde maken

Texturen voor dit voorbeeld zijn beschikbaar op: http://planetpixelemporium.com/planets.html

Installatie of instellingen

U kunt er drie installeren via npm

npm install three

Of voeg het toe als een script aan uw HTML-pagina

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

De scène maken

Om echt alles met three.js te kunnen weergeven, hebben we drie dingen nodig: een scène, een camera en een renderer. We zullen de scène met de camera weergeven.

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 );

Het gebied creëren

Maak geometrie voor de bol
Maak een phong-materiaal
Maak een 3D-object
Voeg het toe aan de scène

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

Voeg een diffuse textuur toe

De diffuse textuur bepaalt de hoofdkleur van het oppervlak. Wanneer we het op een bol toepassen, krijgen we de volgende afbeelding.

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

Een Bump Map-textuur toevoegen

Elk van de pixels fungeert als een hoogte op het oppervlak.
De bergen verschijnen duidelijker dankzij hun schaduw.
Het is mogelijk om de invloed van de kaart op de verlichting te wijzigen met de parameter bumpScale.
Er zijn geen extra hoekpunten gemaakt of nodig om een bultkaart te gebruiken (in tegenstelling tot een verplaatsingskaart)

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

Speculaire textuur toevoegen

Verandert de 'glans' van een object met een textuur.
Elke pixel bepaalt de intensiteit van de speculariteit.
In dit geval is alleen de zee spiegelend omdat water meer licht reflecteert dan de aarde.
U kunt de spiegelende kleur regelen met de spiegelende parameter.

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

Een cloudlaag toevoegen

We maken canvasCloud met een canvas en gebruiken het als textuur.
We doen dit omdat jpg geen alfakanaal verwerkt. (Een PNG-afbeelding doet dit echter wel)
We moeten de code maken om de textuur te bouwen op basis van de volgende afbeeldingen.

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)

We koppelen de cloudMesh aan earthMesh zodat ze samen zullen bewegen.
We schakelen depthWrite en stellen transparent: true to tell three.js dat de cloudmesh transparant is.
We hebben zijden ingesteld op THREE.DoubleSide zodat beide zijden zichtbaar zijn.
- Dit voorkomt het maken van artefacten op de rand van de aarde.
Ten slotte stellen we de opacity: 0.8 om de wolken doorzichtiger te maken

Rotatiebeweging toevoegen

In uw renderlus verhoogt u eenvoudig de rotatie

Als laatste punt zullen we de cloudlaag animeren om deze er realistischer uit te laten zien.

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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

three.js
Texturen en materialen

Zoeken…

Invoering

parameters

Opmerkingen

Een modelaarde maken