En timme med Three.js - Första 20 minuterna
Jag tänkte, som ett experiment, ge mig på Three.js i en timme. Min första timme någonsin med Three.js. Och se vad jag kan åstadkomma. Vi behöver dock lite bakgrund. Vad är Three.js?
Three.js wrappar runt WebGL så att tröskeln att ta sig över ska bli så liten som möjligt. De säger själva att det är en lättvikts-3d-motor "for dummies". Det finns mängder med färdiga metoder att använda som ska förenkla kodandet. Till exempel finns sådant som förstapersonskamera, ladda in färdiga 3d-objekt, ljud, ljus, dimma och skuggningar. Du behöver inte ens rendera med WebGL. Möjligheten finns även att rendera med HTML5:s canvas-element eller SVG. Och Three.js är open source.
Ok, nu kör vi en timmes kodande och ser vart det leder. Jag kommer dock bara skildra de första 20 minuterna i denna artikel. Resterande 40 minuter dyker upp senare.
Jag börjar med att gå in på Github och laddar hem senaste versionen. Inne på Github finns även mängder av exempel på vad man kan åstadkomma med Three.js. Jag väljer att följa deras nybörjar-guide längst ner på sidan. Nu ska det experimenteras.
Jag skapar ett HTML-dokument med en tom body-tagg och inkluderar Three.js som jag fått från deras sida på Github.
Three.js wrappar runt WebGL så att tröskeln att ta sig över ska bli så liten som möjligt. De säger själva att det är en lättvikts-3d-motor "for dummies". Det finns mängder med färdiga metoder att använda som ska förenkla kodandet. Till exempel finns sådant som förstapersonskamera, ladda in färdiga 3d-objekt, ljud, ljus, dimma och skuggningar. Du behöver inte ens rendera med WebGL. Möjligheten finns även att rendera med HTML5:s canvas-element eller SVG. Och Three.js är open source.
Ok, nu kör vi en timmes kodande och ser vart det leder. Jag kommer dock bara skildra de första 20 minuterna i denna artikel. Resterande 40 minuter dyker upp senare.
Jag börjar med att gå in på Github och laddar hem senaste versionen. Inne på Github finns även mängder av exempel på vad man kan åstadkomma med Three.js. Jag väljer att följa deras nybörjar-guide längst ner på sidan. Nu ska det experimenteras.
Jag skapar ett HTML-dokument med en tom body-tagg och inkluderar Three.js som jag fått från deras sida på Github.
<!DOCTYPE html>
<html>
<head>
<title>En timme med Three.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="Three.js"></script>
</head>
<body>
</body>
</html>
Jag ger mig sedan på vårat Javascript.
Jag börjar med att skapa en funktion vi helt enkelt kallar Init(). Första raden i den sätter upp en kamera. Alltså vår viewport, eller synfältet. Den tar parametrarna; field of view, aspect, near och far. Vi sätter även kameran till ett avstånd på 1000 punkter i Z-leden.
Rad 3 skapar vår Scen.
Resterande rader fram till "renderer" skapar en kub med måtten 200 punkter åt alla håll. Och vi avslutar med att sätta lite värden till vår renderare och rendera själva scenen.
Jag börjar med att skapa en funktion vi helt enkelt kallar Init(). Första raden i den sätter upp en kamera. Alltså vår viewport, eller synfältet. Den tar parametrarna; field of view, aspect, near och far. Vi sätter även kameran till ett avstånd på 1000 punkter i Z-leden.
Rad 3 skapar vår Scen.
Resterande rader fram till "renderer" skapar en kub med måtten 200 punkter åt alla håll. Och vi avslutar med att sätta lite värden till vår renderare och rendera själva scenen.
<script type="text/javascript">
var camera, geometry, material, mesh, renderer, scene;
Init();
function Init()
{
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.addObject( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
}
</script>
Allt ovan är körbart och renderar en kub sedd rakt framifrån. Ganska osexigt tilll en början men nu ska vi få den att röra på sig.
Det hela är mycket enkelt. Vi behöver en fil kallad RequestAnimationFrame.js som sköter bilduppdateringarna. Den filen finns att ladda hem här. Inkludera den i din HTML-fil tillsammans med Three.js.
Vi bygger även om lite i vår funktion och lägger till två nya funktioner kallade Animate() och Render(). De båda är ganska självförklarande men vi kan säga att vi lyft ut vår sista rad i Init() och lagt den i Render() samt att vi vrider och vänder lite på vår kub vid varje uppdatering. Animate() anropar Render() 60 gånger per sekund.
Det hela är mycket enkelt. Vi behöver en fil kallad RequestAnimationFrame.js som sköter bilduppdateringarna. Den filen finns att ladda hem här. Inkludera den i din HTML-fil tillsammans med Three.js.
Vi bygger även om lite i vår funktion och lägger till två nya funktioner kallade Animate() och Render(). De båda är ganska självförklarande men vi kan säga att vi lyft ut vår sista rad i Init() och lagt den i Render() samt att vi vrider och vänder lite på vår kub vid varje uppdatering. Animate() anropar Render() 60 gånger per sekund.
<script type="text/javascript">
Animate();
function Animate()
{
requestAnimationFrame( Animate );
Render();
}
function Render()
{
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
</script>
Det var allt som behövdes för att få vår kub att rotera.
Detta tog ca 20 minuter med kodande för att få en roterande kub med Three.js. Jag kommer täcka resterande 40 minuter i två nya artiklar längre fram. Än så länge har vi bara tagit oss igenom det absolut grundläggande med Three.js. Vi gör ett nytt försök längre fram och ser vad vi kan åstadkomma då.
Den färdiga koden med exempel finns att skåda här: Exempel: En timme med Three.js - De första 20 minuterna
Detta tog ca 20 minuter med kodande för att få en roterande kub med Three.js. Jag kommer täcka resterande 40 minuter i två nya artiklar längre fram. Än så länge har vi bara tagit oss igenom det absolut grundläggande med Three.js. Vi gör ett nytt försök längre fram och ser vad vi kan åstadkomma då.
Den färdiga koden med exempel finns att skåda här: Exempel: En timme med Three.js - De första 20 minuterna