Canvas textures and javaScript code solutions for material maps - threejs demo смотреть онлайн

Canvas elements can be used as a way to create textures that in turn can then be used for the various kinds of maps that are used for materials in threejs. If I just want to have a simple color map and not do anything with light I can use the map property of the Mesh basic Material. In the event that I do want to work with one or more light sources I can use the map and emissveMap properties of a material like the standard material.

On top of the use of the THREE.CanvasTexture constructor there are a number of other options to create textures with a little javaScript code rather than an external image asset. One such option that I often use would be the THREE.DataTexture constructor which allows for me to create textures with raw color channel data in the form of a typed array.

Once nice thing about using canvas elements is that I can work with all the various methods that there are to work with in the 2d drawing context of canvas elements. If for example I want to draw a circle I can use the draw arc method where is with data textures I will need to find or write some quick javaScript code for that.

THE POST:
https://dustinpfister.github.io/2018/04/17/threejs-canvas-texture/

OTHER RELATED POSTS:
https://dustinpfister.github.io/2017/05/17/canvas-getting-started/
https://dustinpfister.github.io/2022/04/15/threejs-data-texture/
https://dustinpfister.github.io/2021/06/21/threejs-texture-loader/

THREEJS DOCS:
https://threejs.org/docs/index.html#api/en/textures/CanvasTexture

THE CANVAS DRAWING API:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

GITHUB:
https://github.com/dustinpfister/test_threejs/tree/master/views/forpost/threejs-canvas-texture