Skip to content

Loading…

getBoundingBox on curvePath #1811

Closed
AnthorNet opened this Issue · 8 comments

3 participants

@AnthorNet

Hi,
While playing with extruded shape UV, I wanted to add a bounding box based UV, and found that it was erroned.

As I don't really know yet how to pull in Git, I just put it here, hope it's fine.

In https://github.com/mrdoob/three.js/blob/dev/src/extras/core/CurvePath.js at line 162:

else if ( p.y < maxY ) minY = p.y;

Should be read as:

else if ( p.y < minY ) minY = p.y;
@mrdoob
Owner

@zz85 another one for you :)

@zz85

thanks, i'll fix it. interestingly this bounding box is in 2d :P

@zz85 zz85 added a commit to zz85/three.js that referenced this issue
@zz85 zz85 CurvePath.getBoundingBox() fix by @AnthorNet for #1811 4e58654
@AnthorNet

@zz85 And that's exactly what I need to put a flat UV on an extruded shape !

By the way, even if the THREE.ExtrudeGeometry.WorldUVGenerator makes it easier to change the UV Generator, it's still instanciate like that, so for now it's not very useful:

// set UV generator
var uvgen = THREE.ExtrudeGeometry.WorldUVGenerator;

I think it would be cleaner to instantiate it like that:

// set UV generator
var uvgen = options.UVGenerator !== undefined ? options.UVGenerator : THREE.ExtrudeGeometry.WorldUVGenerator;

After, I use this generator to have UV that fit the texture in the bounding box of the main shape.

THREE.ExtrudeGeometry.BoundingBoxUVGenerator = {
    generateTopUV: function( geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC) {
        var bb = extrudedShape.getBoundingBox(),
            ax = geometry.vertices[ indexA ].x,
            ay = geometry.vertices[ indexA ].y,

            bx = geometry.vertices[ indexB ].x,
            by = geometry.vertices[ indexB ].y,

            cx = geometry.vertices[ indexC ].x,
            cy = geometry.vertices[ indexC ].y;
        return [
            new THREE.UV( ax / (bb.maxX - bb.minX), 1 - (ay / (bb.maxY - bb.minY)) ),
            new THREE.UV( bx / (bb.maxX - bb.minX), 1 - (by / (bb.maxY - bb.minY)) ),
            new THREE.UV( cx / (bb.maxX - bb.minX), 1 - (cy / (bb.maxY - bb.minY)) )
        ];
    },

    generateBottomUV: function( geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC) {
        return this.generateTopUV( geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC );
    },

    generateSideWallUV: function( geometry, extrudedShape, wallContour, extrudeOptions,
                                  indexA, indexB, indexC, indexD, stepIndex, stepsLength) {
        return THREE.ExtrudeGeometry.WorldUVGenerator.generateSideWallUV( 
            geometry, extrudedShape, wallContour, extrudeOptions, indexA, indexB, indexC, indexD, stepIndex, stepsLength
        );
    }
};
@zz85

heeheee... you just have just helped confirm the issue (UVs not scaled to its bounds) with #1748

Seems like i've got more refactoring to do :P

@zz85

@AnthorNet i see you have already forked a copy of threejs - its time to learn some git commands :) http://help.github.com/git-cheat-sheets/

@AnthorNet

As far as I understand the two issues, the problem is only a scale one.
The world uv generator assume that your shape will bound between 0 and 1 in the world.

In my application, it results in a lot of UV beeing aroung -849, cause I use millimeters as it's easier for me. The texture was stuck in 1 pixel on the left of my shape.

By using the bounding box, I just make a ratio between boundaries and vertices position so they get converted between 0 and 1 and match a flat UV that scale on the shape.

The code above just follow the world uv generator, and I didn't looked in the sides UV yet as I don't really need them :p

@zz85

if everyone is using a customized version of the UV generators, i wonder who using the default UV generators? I can't think of anyone having an extrude geometry between 0..1 right now, so does it make sense to have the default UV generated scaled with the entire extrude geometry's bounding box? or is there still use case for the current default WorldUVGenerator? (or perhaps i was the one who came up with such strange uvs)

@zz85 zz85 added a commit to zz85/three.js that referenced this issue
@zz85 zz85 condense uvgen as suggested by @AnthorNet in #1811 d9379fc
@mrdoob
Owner

Merged! :)

@mrdoob mrdoob closed this
@wvl wvl pushed a commit to wvl/three.js that referenced this issue
@zz85 zz85 (threejs src) CurvePath.getBoundingBox() fix by @AnthorNet for #1811 cfee7d1
@wvl wvl pushed a commit to wvl/three.js that referenced this issue
@zz85 zz85 (threejs src) condense uvgen as suggested by @AnthorNet in #1811 16d7bd8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.