Last active
September 28, 2017 02:49
-
-
Save AVGP/88dbd972824eb2e0b2a1 to your computer and use it in GitHub Desktop.
Example of using Three.js, the SoftwareRenderer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Isomorphic Three.js</title> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| height: 100vh; | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| box-sizing: border-box; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas width="500" height="500"></canvas> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var THREE = require('three'), | |
| SoftwareRenderer = require('three-software-renderer'); | |
| var scene = new THREE.Scene(), | |
| cam = new THREE.PerspectiveCamera(45, 1, 1, 2000); | |
| cam.position.z = 100; | |
| var box = new THREE.Mesh( | |
| new THREE.BoxGeometry(30, 30, 30), | |
| new THREE.MeshBasicMaterial({color: 0xff0000}) | |
| ); | |
| scene.add(box); | |
| var r = new SoftwareRenderer(); | |
| r.setSize(500, 500); | |
| // render a frame in memory | |
| var pixels = r.render(scene, cam); | |
| // If we're in a browser, get the canvas and the context for it | |
| if(typeof document !== 'undefined') { | |
| var canvas = document.querySelector('canvas'); | |
| canvas.width = 500; | |
| canvas.height = 500; | |
| var ctx = canvas.getContext('2d'); | |
| // render the pixel data onto the canvas | |
| ctx.putImageData(new ImageData(pixels.data, pixels.width, pixels.height), 0, 0); | |
| // render more frames :) | |
| requestAnimationFrame(function render() { | |
| box.rotation.y += Math.PI / 100; | |
| pixels = r.render(scene, cam); | |
| ctx.putImageData(new ImageData(pixels.data, pixels.width, pixels.height), 0, 0); | |
| requestAnimationFrame(render); | |
| }); | |
| } | |
| // Count the red pixels | |
| var redPixels = 0; | |
| for(var i=0; i< pixels.data.length; i+=4) { | |
| if(pixels.data[i] == 255 && pixels.data[i + 1] === 0 && pixels.data[i + 2] === 0) redPixels++; | |
| } | |
| console.log('red pixels: ' + redPixels + ' (' + ((redPixels / (pixels.width * pixels.height)) * 100).toFixed(2) + ' %)'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "isomorphic-threejs-demo", | |
| "version": "1.0.0", | |
| "description": "Example of using Three.js, the SoftwareRenderer", | |
| "main": "main.js", | |
| "scripts": { | |
| "build": "browserify main.js | uglifyjs -mc > app.js", | |
| "dev": "watchify main.js -v -o app.js" | |
| }, | |
| "author": "Martin Naumann <[email protected]>", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "browserify": "^8.1.0", | |
| "uglify-js": "^2.4.16", | |
| "watchify": "^2.2.1" | |
| }, | |
| "dependencies": { | |
| "three": "0.71.1", | |
| "three-software-renderer": "^1.0.2" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment