Last active
November 24, 2017 06:37
-
-
Save marcopompili/0251e1a6e86bfeefd5f740bcca7fa084 to your computer and use it in GitHub Desktop.
Three.js basic texture loading
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> | |
| <meta charset="utf-8"> | |
| <title>Texture loading 01</title> | |
| <style media="screen"> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js" charset="utf-8"></script> | |
| <script src="test.js" charset="utf-8"></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 scene = new THREE.Scene(); | |
| var ratio = window.innerWidth / window.innerHeight; | |
| var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, | |
| 0.1, 50); | |
| camera.position.z = 30; | |
| var renderer = new THREE.WebGLRenderer({ | |
| antialias: true | |
| }); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setClearColor(0x000000, 1); | |
| var canvas = renderer.domElement; | |
| canvas.style.display = 'block'; | |
| document.body.appendChild(canvas); | |
| var lights = []; | |
| lights[0] = new THREE.PointLight(0xffffff, 1, 0); | |
| lights[1] = new THREE.PointLight(0xffffff, 1, 0); | |
| lights[2] = new THREE.PointLight(0xffffff, 1, 0); | |
| lights[0].position.set(0, 200, 0); | |
| lights[1].position.set(100, 200, 100); | |
| lights[2].position.set(-100, -200, -100); | |
| scene.add(lights[0]); | |
| scene.add(lights[1]); | |
| scene.add(lights[2]); | |
| /** | |
| * Will be called when load completes. | |
| * The argument will be the loaded texture. | |
| */ | |
| var onLoad = function (texture) { | |
| var objGeometry = new THREE.BoxGeometry(20, 20, 20); | |
| var objMaterial = new THREE.MeshPhongMaterial({ | |
| map: texture, | |
| shading: THREE.FlatShading | |
| }); | |
| var mesh = new THREE.Mesh(objGeometry, objMaterial); | |
| scene.add(mesh); | |
| var render = function () { | |
| requestAnimationFrame(render); | |
| mesh.rotation.x += 0.010; | |
| mesh.rotation.y += 0.010; | |
| renderer.render(scene, camera); | |
| }; | |
| render(); | |
| } | |
| // Function called when download progresses | |
| var onProgress = function (xhr) { | |
| console.log((xhr.loaded / xhr.total * 100) + '% loaded'); | |
| }; | |
| // Function called when download errors | |
| var onError = function (xhr) { | |
| console.log('An error happened'); | |
| }; | |
| var loader = new THREE.TextureLoader(); | |
| loader.load('texture.jpg', onLoad, onProgress, onError); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment