三.js平面缓冲几何uvs答案

【问题标题】：three.js plane buffergeometry uvs三.js平面缓冲几何uvs
【发布时间】：2014-05-27 07:46:02
【问题描述】：

我正在尝试创建一个缓冲几何平面，但我遇到了 uv 坐标问题。我尝试关注Correct UV mapping Three.js，但没有得到正确的结果。

紫外线代码如下。我还将整个缓冲几何代码保存在http://jsfiddle.net/94xaL/。

非常感谢您提示我在这里做错了什么！

谢谢！

    var uvs = terrainGeom.attributes.uv.array;
    var gridX = gridY = TERRAIN_RES - 1;
    for ( iy = 0; iy < gridY; iy++ ) {
        for ( ix = 0; ix < gridX; ix++ ) {

            var i = (iy * gridY + ix) * 12;

            //0,0
            uvs[ i ] = ix / gridX
            uvs[ i + 1 ] = iy / gridY;

            //0,1
            uvs[ i + 2 ] = ix / gridX
            uvs[ i + 3 ] = ( iy + 1 ) / gridY;

            //1,0
            uvs[ i + 4 ] = ( ix + 1 ) / gridX
            uvs[ i + 5 ] = iy / gridY;

            //0,1
            uvs[ i + 6 ] = ix / gridX
            uvs[ i + 7 ] = ( iy + 1 ) / gridY;

            //1,1
            uvs[ i + 8 ] = ( ix + 1 ) / gridX
            uvs[ i + 9 ] = ( iy + 1 ) / gridY;

            //1,0
            uvs[ i + 10 ] = ( ix + 1 ) / gridX
            uvs[ i + 11 ] = iy / gridY;
        }
    }

【问题讨论】：

编辑你的 jsfiddle 以便你有一些视觉输出；即使错了。
这里：jsfiddle.net/94xaL/1 我试过了，但是晚上 atm 太晚了，也无法调试 jsfiddle。但是我在这里上传了整个内容：lizkats.com/temp/shaderBlack/examples/skulpt_terrain.html
我创建了一个平面 buffergeometry（根据 BufferGeometryUtils 如何将 PlaneGeometry 转换为 BufferGeometry），现在一切正常，但很糟糕：由于创建面的方式，定义了相同的顶点8次。有没有办法避免这种情况，例如通过告诉缓冲区几何规则如何构建面？稍后我将添加我的解决方案作为答案

标签： javascript three.js uv-mapping buffer-geometry

【解决方案1】：

dev 分支中的最新 three.js 版本现在使用 BufferGeometry 构建平面：https://github.com/mrdoob/three.js/blob/dev/src/extras/geometries/PlaneGeometry.js

如果您仍然想构建自己的，可以在那里获得一些灵感。

【讨论】：