Exploring various substances when combining shapes in Three.js enhances the visual appeal and complexity of

Question

Exploring various substances when combining shapes in Three.js enhances the visual appeal and complexity of

I have a vision to construct a Pine tree using 2 different meshes - one for the trunk and another for the bush. Here is what I have tried so far:

var pine_geometry = new THREE.Geometry();

var pine_texture_1 = THREE.ImageUtils.loadTexture('./res/textures/4.jpg');
var pine_geometry_1 = new THREE.CylinderGeometry(25, 25, 50, 6);
var pine_material_1 = new THREE.MeshBasicMaterial({
  map : pine_texture_1
});

var pine_1 = new THREE.Mesh(pine_geometry_1);
pine_1.position.x = x;
pine_1.position.y = y + 25;
pine_1.position.z = z;

pine_1.updateMatrix();
pine_geometry.merge(pine_1.geometry, pine_1.matrix);

var pine_texture_2 = THREE.ImageUtils.loadTexture('./res/textures/5.jpg');
var pine_geometry_2 = new THREE.CylinderGeometry(0, 70, 250, 8);
var pine_material_2 = new THREE.MeshBasicMaterial({
  map : pine_texture_2
});

var pine_2 = new THREE.Mesh(pine_geometry_2);
pine_2.position.x = x;
pine_2.position.y = y + 175;
pine_2.position.z = z;

pine_2.updateMatrix();
pine_geometry.merge(pine_2.geometry, pine_2.matrix);

var pine = new THREE.Mesh(pine_geometry, new THREE.MeshFaceMaterial([pine_material_1, pine_material_2]));
pine.geometry.computeFaceNormals();
pine.geometry.computeVertexNormals();

Game.scene.add(pine);

The positioning of the Pine tree is exactly as desired. However, after merging both meshes, the whole shape is only using the material of the first mesh. My goal is to have each mesh retain its respective material post-merger.

What am I missing here? Any helpful insights?

javascript merge three.js mesh

Answer 1

Answer №1

Through extensive research, I came to the realization that a crucial parameter was missing when using the 'merge' method with the Geometry object. This missing parameter is the index of the material that corresponds to the mesh within the materials array. For instance, 0 represents the first material in the 'materials' array, and so forth.

As a result, my final code snippet appears as follows:

pine_geometry.merge(pine_1.geometry, pine_1.matrix, 0);

var pine_texture_2 = THREE.ImageUtils.loadTexture('./res/textures/5.jpg');
var pine_geometry_2 = new THREE.CylinderGeometry(0, 70, 250, 8);
var pine_material_2 = new THREE.MeshBasicMaterial({
  map : pine_texture_2
});

var pine_2 = new THREE.Mesh(pine_geometry_2);
pine_2.position.x = x;
pine_2.position.y = y + 175;
pine_2.position.z = z;

pine_2.updateMatrix();
pine_geometry.merge(pine_2.geometry, pine_2.matrix, 1);

(Take note of the additional numbers provided for each merge operation).

However, it's important to emphasize that this approach is effective only when merging geometries of the same type. In our case, we are merging two CylinderGeometries. If we attempted to merge, for example, a Cylinder with a Box while including MeshFaceMaterial, it would not be interpreted correctly, resulting in a console error stating 'Cannot read property map/attributes from undefined'. Despite this limitation, merging both geometries without specifying multiple materials is still possible (a mistake I learned the hard way).

I hope this explanation proves helpful to anyone facing similar challenges.

Answer 2

Through extensive research, I came to the realization that a crucial parameter was missing when using the 'merge' method with the Geometry object. This missing parameter is the index of the material that corresponds to the mesh within the materials array. For instance, 0 represents the first material in the 'materials' array, and so forth.

As a result, my final code snippet appears as follows:

pine_geometry.merge(pine_1.geometry, pine_1.matrix, 0);

var pine_texture_2 = THREE.ImageUtils.loadTexture('./res/textures/5.jpg');
var pine_geometry_2 = new THREE.CylinderGeometry(0, 70, 250, 8);
var pine_material_2 = new THREE.MeshBasicMaterial({
  map : pine_texture_2
});

var pine_2 = new THREE.Mesh(pine_geometry_2);
pine_2.position.x = x;
pine_2.position.y = y + 175;
pine_2.position.z = z;

pine_2.updateMatrix();
pine_geometry.merge(pine_2.geometry, pine_2.matrix, 1);

(Take note of the additional numbers provided for each merge operation).

However, it's important to emphasize that this approach is effective only when merging geometries of the same type. In our case, we are merging two CylinderGeometries. If we attempted to merge, for example, a Cylinder with a Box while including MeshFaceMaterial, it would not be interpreted correctly, resulting in a console error stating 'Cannot read property map/attributes from undefined'. Despite this limitation, merging both geometries without specifying multiple materials is still possible (a mistake I learned the hard way).

I hope this explanation proves helpful to anyone facing similar challenges.

Answer 3

Answer №2

Check out this handy function for combining meshes and their respective materials, plus the option to output as a buffer geometry.

function _combineMeshes(meshes, useBufferGeometry) {

    var resultGeometry,
        allMaterials = [],
        mergedGeometry = new THREE.Geometry(),
        mergedMaterial,
        combinedMesh;

    meshes.forEach(function(mesh, index) {
        mesh.updateMatrix();
        mesh.geometry.faces.forEach(function(face) {face.materialIndex = 0;});
        mergedGeometry.merge(mesh.geometry, mesh.matrix, index);
        allMaterials.push(mesh.material);
    });

    mergedGeometry.groupsNeedUpdate = true;
    mergedMaterial = new THREE.MeshFaceMaterial(allMaterials);

    if (useBufferGeometry) {
        resultGeometry = new THREE.BufferGeometry().fromGeometry(mergedGeometry);
    } else {
        resultGeometry = mergedGeometry;
    }

    combinedMesh = new THREE.Mesh(resultGeometry, mergedMaterial);
    combinedMesh.geometry.computeFaceNormals();
    combinedMesh.geometry.computeVertexNormals();

    return combinedMesh;

}

var combinedMesh = _combineMeshes([trunkMesh, treeTopMesh], true);

Answer 4

Check out this handy function for combining meshes and their respective materials, plus the option to output as a buffer geometry.

function _combineMeshes(meshes, useBufferGeometry) {

    var resultGeometry,
        allMaterials = [],
        mergedGeometry = new THREE.Geometry(),
        mergedMaterial,
        combinedMesh;

    meshes.forEach(function(mesh, index) {
        mesh.updateMatrix();
        mesh.geometry.faces.forEach(function(face) {face.materialIndex = 0;});
        mergedGeometry.merge(mesh.geometry, mesh.matrix, index);
        allMaterials.push(mesh.material);
    });

    mergedGeometry.groupsNeedUpdate = true;
    mergedMaterial = new THREE.MeshFaceMaterial(allMaterials);

    if (useBufferGeometry) {
        resultGeometry = new THREE.BufferGeometry().fromGeometry(mergedGeometry);
    } else {
        resultGeometry = mergedGeometry;
    }

    combinedMesh = new THREE.Mesh(resultGeometry, mergedMaterial);
    combinedMesh.geometry.computeFaceNormals();
    combinedMesh.geometry.computeVertexNormals();

    return combinedMesh;

}

var combinedMesh = _combineMeshes([trunkMesh, treeTopMesh], true);

Exploring various substances when combining shapes in Three.js enhances the visual appeal and complexity of

Answer №1

Answer №2

Similar questions

Add the attribute's value to an array

What is the best way to showcase current elements using Vue.js and firebase without them being outdated?

Loop over JSON data using JQuery

Using JavaScript to halt the playback of HTML5 video in 'injected' HTML code

When the button is clicked, I would like to use JavaScript to toggle the visibility of a div, allowing it to open and

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Activate fancybox when clicked, triggering numerous ajax requests

Is there a way to validate form input before inserting it into a database using the onsubmit event?

Executing a custom object function in AngularJS by using the ng-click directive

When the icon is clicked using `ngClick`, we are triggering the `refresh` event, but unfortunately, it is not functioning as expected

Updating the DOM with an EventListener in Angular 5 is not functioning properly

What is the best way to address ng-invalid and ng-pristine in Angular validation?

Guide to deploying a factory contract using solidity @0.5.0 with Node.js

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

Error: The value of data.isbn is not defined

The problem with reflect-metadata - __webpack_require__ arises from the absence of the 'Require' definition

Exploring Shadertoy's Visual Magic with THREE.js

Implementing a rate limit on the login API that is specific to individual IP addresses rather than being

jQuery does not allow for text input values to be posted

What is the best way to arrange an array of identical objects based on a specific sub property?