three.js => Texturer och material

Introduktion

En trevlig introduktion till material och strukturer.

Diffusa, stumpa, speciella och transparenta strukturer.

parametrar

Parameter	detaljer
Färg	Numeriskt värde för RGB-komponenten i färgen.
intensitet	Numeriskt värde för ljusets styrka / intensitet.
FOV	Vertikalt synfält för kamerafrustum.
aspekt	Kameraformat bildförhållande.
nära	Kamerahus nära planet.
långt	Camera frustum far plan.
radie	sfärradie. Standard är 50.
widthSegments	antal horisontella segment. Minsta värde är 3 och standardvärdet är 8.
heightSegments	antal vertikala segment. Minsta värde är 2 och standardvärdet är 6.
phiStart	ange horisontell startvinkel. Standard är 0.
phiLength	specificera horisontell svepvinkelstorlek. Standard är Math.PI * 2.
thetaStart	ange vertikal startvinkel. Standard är 0.
thetaLength	specificera vertikal svepvinkelstorlek. Standard är Math.PI.

Anmärkningar

Demolänk

Skapa en modelljord

Texturer för detta exempel finns på: http://planetpixelemporium.com/planets.html

Installation eller installation

Du kan installera tre via npm

npm install three

Eller lägg till det som ett skript till din HTML-sida

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

Skapa scenen

För att faktiskt kunna visa vad som helst med three.js, behöver vi tre saker: En scen, en kamera och en återgivare. Vi kommer att återge scenen med kameran.

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

Skapa sfären

Skapa geometri för sfären
Skapa ett phong-material
Skapa ett 3D-objekt
Lägg till den i scenen

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

Lägg till en diffus struktur

Den diffusa strukturen ställer in huvudytan på ytan. När vi applicerar det på en sfär får vi följande bild.

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

Lägga till en humörkartaxtur

Var och en av dess pixlar fungerar som en höjd på ytan.
Bergen visas tydligare tack vare deras skugga.
Det är möjligt att ändra hur mycket kartan påverkar belysningen med bumpScale-parameter.
Inga extra vertikaler skapas eller behövs för att använda en stötkarta (till skillnad från en förskjutningskarta)

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

Lägga till en speciell struktur

Ändrar ett "glans" för ett objekt med en struktur.
Varje pixel bestämmer intensiteten hos spekulariteten.
I detta fall är bara havet spekulärt eftersom vatten reflekterar ljus mer än jorden.
Du kan kontrollera den speciella färgen med den spekulära parametern.

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

Lägga till ett molnlager

Vi skapar canvasCloud med en duk och använder den som en struktur.
Vi gör detta eftersom jpg inte hanterar en alfakanal. (Men en PNG-bild gör det)
Vi måste skapa koden för att bygga strukturen baserat på följande bilder.

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)

Vi fäster cloudMesh till earthMesh så att de kommer att röra sig tillsammans.
Vi inaktiverar depthWrite och ställer in transparent: true att säga three.js att molnmask är transparent.
Vi sätter sidorna till THREE.DoubleSide så att båda sidorna kommer att vara synliga.
- Detta undviker att skapa artefakter på jordkanten.
Slutligen satte vi opacity: 0.8 att göra molnen mer genomskinliga

Lägga till rotationsrörelse

I din renderingslinga ökar du helt enkelt rotationen

Som en sista touch kommer vi att animera molnskiktet för att det ska se mer realistiskt ut.

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

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

three.js
Texturer och material

Sök…

Introduktion

parametrar

Anmärkningar

Skapa en modelljord