All geek questions in one place

3d.js texture image

I use the three.js command to create a minecraft texture editor similar to this . I'm just trying to get basic click and paint functionality, but I can't figure it out. Currently, I have textures for each face of each cube and apply them, creating shader materials with the following functions.

this.createBodyShaderTexture = function(part, update) { sides = ['left', 'right', 'top', 'bottom', 'front', 'back']; images = []; for (i = 0; i < sides.length; i++) { images[i] = 'img/'+part+'/'+sides[i]+'.png'; } texCube = new THREE.ImageUtils.loadTextureCube(images); texCube.magFilter = THREE.NearestFilter; texCube.minFilter = THREE.LinearMipMapLinearFilter; if (update) { texCube.needsUpdate = true; console.log(texCube); } return texCube; } this.createBodyShaderMaterial = function(part, update) { shader = THREE.ShaderLib['cube']; shader.uniforms['tCube'].value = this.createBodyShaderTexture(part, update); shader.fragmentShader = document.getElementById("fshader").innerHTML; shader.vertexShader = document.getElementById("vshader").innerHTML; material = new THREE.ShaderMaterial({fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms}); return material; } SkinApp.prototype.onClick = function(event) { event.preventDefault(); this.change(); //makes texture file a simple red square for testing this.avatar.remove(this.HEAD); this.HEAD = new THREE.Mesh(new THREE.CubeGeometry(8, 8, 8), this.createBodyShaderMaterial('head', false)); this.HEAD.position.y = 10; this.avatar.add(this.HEAD); this.HEAD.material.needsUpdate = true; this.HEAD.dynamic = true; }


Then, when the user clicks anywhere in the grid, the texture file itself is updated using the canvas. An update occurs, but the change does not appear in the browser if the page does not refresh. I found many examples of how to change a texture image into a new file, but not on how to show changes in the same texture file at run time, or even if it is possible. Is this possible, and if not, what alternatives exist?

+6
source share
2 answers

When you update a texture, whether based on canvas, video, or loading from the outside, you need to set the texture property to true:

If the object is created as follows:

 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 changing the texture, set the parameter to true:

cube.material.map.needsUpdate = true;

And the next time you make a scene, it will show a new texture.

+12
source

Here are all the basics of what you need to know about “updating” material in three dimensions. https://github.com/mrdoob/three.js/wiki/Updates

+1
source

Source: https://habr.com/ru/post/952478/

More articles:


All Articles