How to apply texture to custom geometry in Three.js file

I successfully applied the texture to the cube geometry with this:

var geometry = new THREE.CubeGeometry(10, 10, 10);
var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
meshMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, meshMaterial);

With this, I get a nice textured cube similar to this:

enter image description here

Now I want to apply the same texture (512x512 jpg image) to the user model that I load from STL, and this is what I get (in this case, the pyramid):

enter image description here

This is the code:

loader.load(jsonParam.url, function (geometry) {
            var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
            meshMaterial.side = THREE.DoubleSide;

            var mesh = new THREE.Mesh(geometry, meshMaterial);

            mesh.castShadow = false;
            mesh.receiveShadow = true;
            scene.add(mesh);
        });

Why is the texture not applied and I get only what seems like the middle color of the texture?

+4
source share
1 answer

-.
, UV- , , , , .
, , UV-.

+3

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


All Articles