Stap 5: Three.js: aan de slag
Dit is gewoon een gif. Klik hier voor de volledige JSFiddle!
Three.js kan worden uitdagend om stap in voor de eerste keer. De verwarring was voor mij, alle van de stukken die ik moest samenstellen voor enkel het meest elementaire "Hello, World" soort voorbeeld uitzoeken. Ik kon vinden enkele goede tutorials die zou geven me de code om te zetten van een kubus op het scherm, draaien, maar ik kon niet achterhalen wat alle stukken aan het doen waren. Ik zou iets veranderen en de hele rotzooi zou breken.
Ik hoop dat het bovenstaande diagram lost dit voor sommige van mijn lezers. Aan de slag met threejs moet u elk stuk in dat diagram, en u wilt hen monteren zoals beschreven zelfs voor de meest minimale voorbeeld. Er bestaat geen als een one-liner om "een kubus". Ik zal stap doorheen; Als u meer hulp nodig hebt, zou ik beginnen met de Aerotwist leerprogramma, het beste van degene die ik vond. Ook handig, de "maken een Scene" pagina in de ThreeJS docs.
De ThreeJS leerprogramma hierboven gaat, voor mij, in een vreemde volgorde vermeld. Hoewel zeker zwakkere code aan iemand die al het begrijpt, zou ik aantekeningen op het voorbeeld van "animeren kubus" uitzien (de code is hetzelfde als de ThreeJS doc, hier herhaald met een verschillende uitleg):
Een kubus maken:
var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); Maak een scène:
var scene = new THREE.Scene();
De kubus toevoegen aan de scène:
scene.add( cube );
Maak een Renderer:
var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
Voeg een Camera, en maken:
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); renderer.render(scene, camera);
Stap terug voor een tweede. Werkte het? OK, nu voorzien van animatie.
Een Rendering-lus toevoegen, vervangen function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render(); met:
var particleGeometry = new THREE.Geometry(); // add a bunch of vertices to the geometry var particle = new THREE.Vector3(pX, pY, pZ); particleGeometry.vertices.push(particle); // repeat for every point var material = new THREE.ShaderMaterial({ uniforms: uniforms, attributes: attributes, vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, blending: THREE.AdditiveBlending, depthTest: false, transparent: true }) var system = new THREE.ParticleSystem( particleGeometry, material ); // scene defined elsewhere scene.add(system); ... en tevreden naar huis!
requestAnimationFrame(render) is een shim voor de inheemse methode met (ongeveer) dezelfde naam die u als vergelijkbaar met JavaScript setInterval() kon bedenken. Behalve er tal van voordelen zijn: requestAnimationFrame niet brand wanneer de pagina niet weergegeven, bijvoorbeeld wordt, zodat u niet hoeft om middelen te gebruiken voor een animatie waarop is niet wordt weergegeven. Boom in het bos soort situatie. Het is ook een API waarmee de browser vernieuwen van veel dingen op zodra (van JS, CSS, WebGL, enz), dus het uw herschrijven cyclus optimaliseren zal. Lees meer.
