three.js - 在经过 CSG.js 过程后将纹理添加到 three.js 形状

Question

我同时使用 three.js 和 CSG.js 来制作一个新形状。

var materialText = new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture(rel_path_name+"images/wood.jpg")
});
var material = new THREE.MeshLambertMaterial({
    color: 0xFFFFFF
});
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(120, 100, 300, 40, 50, false), material);
cylinder.position.y = 100;
var bodyMainCSG = new THREE.CSG.toCSG(cylinder);

var cutOutShapeMaterial = new THREE.MeshLambertMaterial({
    color: 0x000000
});

var bodyMainFront = new THREE.Mesh(new THREE.CylinderGeometry(200, 190, 300, 40, 50, false), material);
bodyMainFront.position.z = -126;
bodyMainFront.position.y = 100;
var bodyMainFrontCSG = new THREE.CSG.toCSG(bodyMainFront);

var cutOutShapeFront = new THREE.Mesh(new THREE.CubeGeometry(300,300,200), cutOutShapeMaterial);
cutOutShapeFront.position.z = 140;
cutOutShapeFront.position.y = 100;
var cutOutShapeFrontCSG = new THREE.CSG.toCSG(cutOutShapeFront);

var cutOutShapeBack = new THREE.Mesh(new THREE.CubeGeometry(300,300,200), cutOutShapeMaterial);
cutOutShapeBack.position.z = -140;
cutOutShapeBack.position.y = 100;
var cutOutShapeBackCSG = new THREE.CSG.toCSG(cutOutShapeBack);

var spareCube = new THREE.Mesh(new THREE.CubeGeometry(400,300,400), cutOutShapeMaterial);
    spareCube.position.z = -160;
    spareCube.position.y = 100;
    var spareCubeCSG = new THREE.CSG.toCSG(spareCube);


    var bodyMainBack = new THREE.Mesh(new THREE.CylinderGeometry(220, 210, 300, 40, 50, false), material);
bodyMainBack.position.z = 148;
bodyMainBack.position.y = 100;
var bodyMainBackCSG = new THREE.CSG.toCSG(bodyMainBack);

var spareCube2 = new THREE.Mesh(new THREE.CubeGeometry(440,300,440), cutOutShapeMaterial);
    spareCube2.position.z = 180;
    spareCube2.position.y = 100;
var spareCube2CSG = new THREE.CSG.toCSG(spareCube2);
//Front creation Shape - Mixture of body main shape/Cube cut out shape
var extraCircle = bodyMainFrontCSG.subtract(spareCubeCSG);




//Front creation Shape - Mixture of body main shape/Cube cut out shape
var extraCircle = bodyMainFrontCSG.subtract(spareCubeCSG);
var extraCircleBack = bodyMainBackCSG.subtract(spareCube2CSG);
var frontCreationShape = bodyMainCSG.subtract(cutOutShapeFrontCSG);
var backCreationShape = frontCreationShape.subtract(cutOutShapeBackCSG);
var geometry = extraCircle.union(backCreationShape);
var geometry = geometry.union(extraCircleBack);
//var bulkRemoval = bodyMainCSG.subtract(cubeBulkCG);
//var geometry = bulkRemoval.subtract(frontCreationShape);

var mesh = new THREE.Mesh(THREE.CSG.fromCSG( geometry ), materialText);

不是最好的代码——最重要的几行是

    var materialText = new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture(rel_path_name+"images/wood.jpg")
    });

    var mesh = new THREE.Mesh(THREE.CSG.fromCSG( geometry ), materialText);

我正在尝试将纹理添加到已转换为 CSG 的切割形状，然后再转换回三。每次我这样做时，我都会从 three.js 中得到一个随机错误。我厌倦了将 MeshBasicMaterial 更改为“MeshPhongMaterial”和“MeshLambertMaterial”，仍然是同样的错误。

所以我的问题是，我做错了什么还是不可能的？

Answer 1

这实际上很容易，只需稍微更改 CSG.js 和 THREE.CSG.js。需要将 UV 引入 CSG 顶点原型(prototype)，在 THREE.CSG 中，需要将 UV 传入和传出 CSG 多边形。

修改后的代码如下所示:

CSG.js 中的顶点原型(prototype):

CSG.Vertex = function(pos, normal, uv) {
  this.pos = new CSG.Vector(pos);
  this.normal = new CSG.Vector(normal);
  // modification
  this.uv = new CSG.Vector(uv);  
};

CSG.Vertex.prototype = {
  clone: function() {
    return new CSG.Vertex(
        this.pos.clone(),
        this.normal.clone(),
        // modification
        this.uv.clone()
    );
  },

  // Invert all orientation-specific data (e.g. vertex normal). Called when the
  // orientation of a polygon is flipped.
  flip: function() {
    this.normal = this.normal.negated();
  },

  // Create a new vertex between this vertex and `other` by linearly
  // interpolating all properties using a parameter of `t`. Subclasses should
  // override this to interpolate additional properties.
  interpolate: function(other, t) {
    return new CSG.Vertex(
      this.pos.lerp(other.pos, t),
      this.normal.lerp(other.normal, t),
      // modification
      this.uv.lerp(other.uv, t)
    );
  }
};

整个THREE.CSG.js文件:

/*
    THREE.CSG
    @author Chandler Prall <chandler.prall@gmail.com> http://chandler.prallfamily.com

    Wrapper for Evan Wallace's CSG library (https://github.com/evanw/csg.js/)
    Provides CSG capabilities for Three.js models.

    Provided under the MIT License
*/

THREE.CSG = {
    toCSG: function ( three_model, offset, rotation ) {
        var i, geometry, offset, polygons, vertices, rotation_matrix;

        if ( !CSG ) {
            throw 'CSG library not loaded. Please get a copy from https://github.com/evanw/csg.js';
        }

        if ( three_model instanceof THREE.Mesh ) {
            geometry = three_model.geometry;
            offset = offset || three_model.position;
            rotation = rotation || three_model.rotation;
        } else if ( three_model instanceof THREE.Geometry ) {
            geometry = three_model;
            offset = offset || new THREE.Vector3( 0, 0, 0 );
            rotation = rotation || new THREE.Vector3( 0, 0, 0 );
        } else {
            throw 'Model type not supported.';
        }
        rotation_matrix = new THREE.Matrix4( ).setRotationFromEuler( rotation );

        var polygons = [];
        for ( i = 0; i < geometry.faces.length; i++ ) {
            if ( geometry.faces[i] instanceof THREE.Face3 ) {


                vertices = [];
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].a].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][0].u, geometry.faceVertexUvs[0][i][0].v, 0 ] ) );
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].b].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][1].u, geometry.faceVertexUvs[0][i][1].v, 0 ] ) );
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].c].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][2].u, geometry.faceVertexUvs[0][i][2].v, 0 ] ) );
                polygons.push( new CSG.Polygon( vertices ) );

            } else if ( geometry.faces[i] instanceof THREE.Face4 ) {

                vertices = [];
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].a].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][0].u, geometry.faceVertexUvs[0][i][0].v, 0 ] ) );
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].b].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][1].u, geometry.faceVertexUvs[0][i][1].v, 0 ] ) );
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].d].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][3].u, geometry.faceVertexUvs[0][i][3].v, 0 ] ) );
                polygons.push( new CSG.Polygon( vertices ) );

                vertices = [];
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].b].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][1].u, geometry.faceVertexUvs[0][i][1].v, 0 ] ) );
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].c].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][2].u, geometry.faceVertexUvs[0][i][2].v, 0 ] ) );
                vertices.push( new CSG.Vertex( rotation_matrix.multiplyVector3( geometry.vertices[geometry.faces[i].d].clone( ).addSelf( offset ) ), [ geometry.faces[i].normal.x, geometry.faces[i].normal.y, geometry.faces[i].normal.z ], [ geometry.faceVertexUvs[0][i][3].u, geometry.faceVertexUvs[0][i][3].v, 0 ] ) );
                polygons.push( new CSG.Polygon( vertices ) );

            } else {
                throw 'Model contains unsupported face.';
            }
        }

        return CSG.fromPolygons( polygons );
    },

    fromCSG: function( csg_model ) {
        var i, j, vertices, face,
            three_geometry = new THREE.Geometry( ),
            polygons = csg_model.toPolygons( );

        if ( !CSG ) {
            throw 'CSG library not loaded. Please get a copy from https://github.com/evanw/csg.js';
        }

        for ( i = 0; i < polygons.length; i++ ) {

            // Vertices
            vertices = [];
            for ( j = 0; j < polygons[i].vertices.length; j++ ) {
                vertices.push( this.getGeometryVertice( three_geometry, polygons[i].vertices[j].pos ) );
            }
            if ( vertices[0] === vertices[vertices.length - 1] ) {
                vertices.pop( );
            }

            for (var j = 2; j < vertices.length; j++) {
                face = new THREE.Face3( vertices[0], vertices[j-1], vertices[j], new THREE.Vector3( ).copy( polygons[i].plane.normal ) );
                three_geometry.faces.push( face );
                three_geometry.faceVertexUvs[0].push([
                    new THREE.UV(polygons[i].vertices[0].uv.x, polygons[i].vertices[0].uv.y),
                    new THREE.UV(polygons[i].vertices[j-1].uv.x, polygons[i].vertices[j-1].uv.y),
                    new THREE.UV(polygons[i].vertices[j].uv.x, polygons[i].vertices[j].uv.y)
                ]);
            }
        }

        three_geometry.computeBoundingBox();

        return three_geometry;
    },

    getGeometryVertice: function ( geometry, vertice_position ) {
        var i;
        for ( i = 0; i < geometry.vertices.length; i++ ) {
            if ( geometry.vertices[i].x === vertice_position.x && geometry.vertices[i].y === vertice_position.y && geometry.vertices[i].z === vertice_position.z ) {
                // Vertice already exists
                return i;
            }
        };

        geometry.vertices.push( new THREE.Vector3( vertice_position.x, vertice_position.y, vertice_position.z ) );
        return geometry.vertices.length - 1;
    }
};

使用这些代码，将 CSG 操作应用到两个具有相同纹理贴图的三个几何体的纹理效果很好，同时保持正确的顶点 UV。

希望对您有所帮助!