When you update a texture, whether its based on canvas, video or loaded externally, you need to set the following property on the texture to true:If an object is created like this: var canvas = document.createElement('canvas');var canvasMap = new THREE.Texture(canvas)var mat = new THREE.MeshPhongMaterial;mat.map = canvasMap;var mesh = new THREE.Mesh(geom,mat);After the texture has been changed, set the following to true:cube.material.map.needsUpdate = true;And next time you render the scene it'll show the new texture.
In this post, we’ll talk about Three.js. A javascript library and API that allows you to create a 2D or 3D graphic on your web page easily without having to deal directly with WebGL using just javascript. Creating an immersive web experience with cross browsers support. What is Three.jsThree.js is basically an abstracted layer build on top of webGL to make it’s easier to use.
Users can just use their web browser without having to download any additional framework or application in order to experience 3D graphic. Checkout some demos of three.js implementationSince three.js is based on javascript, it’s relatively easy to add interactivity between 3D objects and user interfaces like keyboard and mouse. So three.js is perfectly suitable for making a 3D game on web platform.How to Use Three.jsTo show you the ideas of fundamental steps to create an animating 3D object with three.js, we’re going to add a spinning cube to an empty webpage.