Last active
October 17, 2018 13:03
-
-
Save duhaime/60c7083009bbd49ce50a58c371d8c818 to your computer and use it in GitHub Desktop.
Using canvas textures in three.js
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
| <html> | |
| <head> | |
| <style> | |
| html, body { width: 100%; height: 100%; background: #000; } | |
| body { margin: 0; overflow: hidden; } | |
| canvas { width: 100%; height: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js'></script> | |
| <script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script> | |
| <script> | |
| /** | |
| * Generate scene object with a background color | |
| **/ | |
| function getScene() { | |
| var scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x111111); | |
| return scene; | |
| } | |
| /** | |
| * Generate the camera to be used in the scene. Camera args: | |
| * [0] field of view: identifies the portion of the scene | |
| * visible at any time (in degrees) | |
| * [1] aspect ratio: identifies the aspect ratio of the | |
| * scene in width/height | |
| * [2] near clipping plane: objects closer than the near | |
| * clipping plane are culled from the scene | |
| * [3] far clipping plane: objects farther than the far | |
| * clipping plane are culled from the scene | |
| **/ | |
| function getCamera() { | |
| var aspectRatio = window.innerWidth / window.innerHeight; | |
| var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000); | |
| camera.position.set(0, 1, 5); | |
| return camera; | |
| } | |
| /** | |
| * Generate the light to be used in the scene. Light args: | |
| * [0]: Hexadecimal color of the light | |
| * [1]: Numeric value of the light's strength/intensity | |
| * [2]: The distance from the light where the intensity is 0 | |
| * @param {obj} scene: the current scene object | |
| **/ | |
| function getLight(scene) { | |
| var light = new THREE.PointLight(0xffffff, 1, 0); | |
| light.position.set(1, 1, 1); | |
| scene.add(light); | |
| var ambientLight = new THREE.AmbientLight(0x111111); | |
| scene.add(ambientLight); | |
| return light; | |
| } | |
| /** | |
| * Generate the renderer to be used in the scene | |
| **/ | |
| function getRenderer() { | |
| // Create the canvas with a renderer | |
| var renderer = new THREE.WebGLRenderer({antialias: false}); | |
| // Add support for retina displays | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| // Specify the size of the canvas | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| // Add the canvas to the DOM | |
| document.body.appendChild(renderer.domElement); | |
| return renderer; | |
| } | |
| /** | |
| * Generate the controls to be used in the scene | |
| * @param {obj} camera: the three.js camera for the scene | |
| * @param {obj} renderer: the three.js renderer for the scene | |
| **/ | |
| function getControls(camera, renderer) { | |
| var controls = new THREE.TrackballControls(camera, renderer.domElement); | |
| controls.zoomSpeed = 0.4; | |
| controls.panSpeed = 0.4; | |
| return controls; | |
| } | |
| /** | |
| * Create retina quality canvas | |
| **/ | |
| var PIXEL_RATIO = (function () { | |
| var ctx = document.createElement('canvas').getContext('2d'), | |
| dpr = window.devicePixelRatio || 1, | |
| bsr = ctx.webkitBackingStorePixelRatio || | |
| ctx.mozBackingStorePixelRatio || | |
| ctx.msBackingStorePixelRatio || | |
| ctx.oBackingStorePixelRatio || | |
| ctx.backingStorePixelRatio || 1; | |
| return dpr / bsr; | |
| })(); | |
| createRetinaCanvas = function(w, h, ratio) { | |
| if (!ratio) { ratio = PIXEL_RATIO; } | |
| var can = document.createElement('canvas'); | |
| can.width = w * ratio; | |
| can.height = h * ratio; | |
| can.style.width = w + 'px'; | |
| can.style.height = h + 'px'; | |
| can.getContext('2d').setTransform(ratio, 0, 0, ratio, 0, 0); | |
| return can; | |
| } | |
| function addTexture() { | |
| var text = 'cats' | |
| //create image | |
| var bitmap = createRetinaCanvas(100, 100); | |
| var ctx = bitmap.getContext('2d', {antialias: false}); | |
| ctx.font = 'Bold 20px Arial'; | |
| ctx.beginPath(); | |
| ctx.rect(0, 0, 100, 100); | |
| ctx.fillStyle = 'red'; | |
| ctx.fill(); | |
| ctx.fillStyle = 'white'; | |
| ctx.fillText(text, 0, 20); | |
| ctx.strokeStyle = 'black'; | |
| ctx.strokeText(text, 0, 20); | |
| // canvas contents will be used for a texture | |
| var texture = new THREE.Texture(bitmap) | |
| texture.needsUpdate = true; | |
| var material = new THREE.MeshBasicMaterial({ map: texture }); | |
| var geometry = new THREE.BoxGeometry( 1, 1, 1 ); | |
| cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube) | |
| } | |
| // Render loop | |
| function render() { | |
| requestAnimationFrame(render); | |
| renderer.render(scene, camera); | |
| controls.update(); | |
| cube.rotation.y += 0.01; | |
| cube.rotation.z += 0.01; | |
| }; | |
| var scene = getScene(); | |
| var camera = getCamera(); | |
| var light = getLight(scene); | |
| var renderer = getRenderer(); | |
| var controls = getControls(camera, renderer); | |
| var cube; | |
| addTexture() | |
| render(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment