Created
May 8, 2016 23:46
-
-
Save agconti/e147181ad8eab2818eea10488df55b00 to your computer and use it in GitHub Desktop.
Fake Light
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <title>Bonjourno World</title> | |
| </head> | |
| <body> | |
| <script id="vertex-shader" type="text/vertex-shader"> | |
| /** | |
| * Multiply each vertex by the model-view matrix | |
| * and the projection matrix (both provided by | |
| * Three.js) to get a final vertex position | |
| */ | |
| varying vec3 vNormal; | |
| varying float positionX; | |
| void main() { | |
| vNormal = normal; | |
| gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); | |
| } | |
| </script> | |
| <script id="fragment-shader" type="text/fragment-shader"> | |
| /** | |
| * Set the colour to a lovely pink. | |
| * Note that the color is a 4D Float | |
| * Vector, R,G,B and A and each part | |
| * runs from 0.0 to 1.0 | |
| */ | |
| uniform vec3 color; | |
| uniform vec3 lightSource; | |
| varying vec3 vNormal; | |
| varying float positionX; | |
| void main() { | |
| vec3 normalizedlightSource = normalize(lightSource); | |
| float exposure = max(0.0, dot(normalizedlightSource, vNormal)); | |
| gl_FragColor = vec4(color * exposure, 1.0); | |
| } | |
| </script> | |
| <script src="../jspm_packages/system.js" charset="utf-8"></script> | |
| <script src="../config.js" charset="utf-8"></script> | |
| <script charset="utf-8"> | |
| System.import("three").then(function(three){ THREE = three }) | |
| System.import("./main") | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| import * as THREE from 'three' | |
| const scene = new THREE.Scene() | |
| const renderer = new THREE.WebGLRenderer() | |
| const cameraRatio = window.innerWidth / window.innerHeight | |
| const camera = new THREE.PerspectiveCamera(75, cameraRatio, 1, 10000 ) | |
| let uniforms = { | |
| color: { | |
| type: 'v3' | |
| , value: new THREE.Vector3(1.0, 0.0, 1.0) | |
| } | |
| , lightSource: { | |
| type: 'v3' | |
| , value: new THREE.Vector3(0.8, 0.5, 2.0) | |
| } | |
| } | |
| const geometry = new THREE.BoxGeometry(200, 200, 200) | |
| const vertexShader = document.getElementById('vertex-shader').innerText | |
| const fragmentShader = document.getElementById('fragment-shader').innerText | |
| const shaderMaterial = new THREE.ShaderMaterial({uniforms, vertexShader, fragmentShader}) | |
| const mesh = new THREE.Mesh( geometry, shaderMaterial ) | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| mesh.rotation.x += 0.01; | |
| mesh.rotation.y += 0.02; | |
| renderer.render( scene, camera ); | |
| } | |
| scene.add(mesh) | |
| renderer.setSize(window.innerWidth, window.innerHeight) | |
| camera.position.z = 500 | |
| document.body.appendChild(renderer.domElement) | |
| renderer.render( scene, camera ); | |
| // animate() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment