Three.js的绘制流程(三)----地形
博客专区 > 李勇2 的博客 > 博客详情
Three.js的绘制流程(三)----地形
李勇2 发表于3年前
Three.js的绘制流程(三)----地形
  • 发表于 3年前
  • 阅读 31
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

最简单的地形是单一的平面, 这个通过

var geo = new THREE.PlaneGeometry(2, 2, 256, 256) 几何体构建, 可以设定平面的切分块的数量。

var pmesh = new THREE.Mesh(geo, material);

可以为平面提供纹理, 从而是地面看起来更真实一些,而纹理坐标在geo中已经自动设定好了。 因此只需要写材质就可以了。

这里使用ShaderMaterial 用于材质。

顶点shader:

varying vec2 vUV; //从定点shader 传递到 片段shader的纹理坐标

void main()

{

      vUV = uv; //uv 是默认存在的顶点属性, 用于做纹理坐标

      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);// projectionMatrix 默认存在的投影矩阵 modelViewMatrix默认模型视图矩阵 position定点坐标 
}


片段shader:

uniform sampler2D texture_grass;//纹理

varying vec2 vUV;

void main()

{

     gl_FragColor = texture2D(texture_grass, vUV);
}

材质则是:

var mat = new THREE.ShaderMaterial({

     uniforms:{

          texture_grass:{type:'t', value:0,  texture:TRHEE.ImageUtils.loadTexture("texture_grass.png")},//类型纹理, 纹理编号0, 加载图片数据 

    },

     attributes:{},

     vertexShader:text,

     fragmentShader:text,

});

var pmesh = new THREE.Mesh(geo, mat);


这样就得到一个添加了纹理的平面, 平面在x,y 平面上, 平面的正方向指向z正向, 可以调整平面x轴逆时针旋转90度, 得到x,z 方向的平面。


现在我们期望能够调整地面的高度, 采用的方式是鼠标点击屏幕位置, 计算实际的地面的位置, 接着调整地面上该点附近的所有定点的高度。

调整高度有两种方式, 一是调整geo几何体中的vertices 中的y值, 或者在修改shader程序 增加一个顶点属性, displacement 用于记录所有顶点的高度,这样只需要修改这一个数据就可以了,而不需要修改整个定点数组。

顶点shader调整:

attribute float displacement;

varying vec2 vUV;

void main()

{

       vUV = uv;

       gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy,  displacement, 1);
}

材质调整:

var mat = new THREE.ShaderMaterial({

      //其它部分相同

       attributes:{

     displacement:{type:'f',  value:[]},

   }

});

需要根据平面顶点个数 来初始化displacement值为0

for(var i = 0; i < geo.vertices.length; i++)

      mat.attributes.displacement.value.push(0);


因为需要动态调整displacement的值 所以需要设定geo是动态更新的

geo.dynamic = true;


这样现在仍只是看到一个平面;接下来需要设定鼠标点击的时间处理函数。

var projector = new THREE.Projector(); //计算从屏幕坐标到 世界坐标的工具


renderer.domElement.onmousedown = function(e){

     var mx = e.offsetX;

     var my = e.offsetY;

     //计算相机近平面上的坐标

      mx = 2*mx/SCREEN_WIDTH-1;

     my = 1 - 2*my/SCREEN_HEIGHT;

    var vec = new THREE.Vector3(mx, my, 0);//只有 x y 坐标有意义

     var ray = project.pickingRay(vec, camera);//计算从相机发出的穿过近平面上mx my 点的射线

    var intersects = ray.intersectObject(pmesh); //计算射线和 平面的所有交点 0 或者 1个

     if(intersects.length > 0)

    {

            //存在交点

           updateDisplacement(intersects[0].point); //调整该点附近顶点的高度。

    }

}


function updateDisplacement(point)

{

//平面方位 -1, 1  -1, 1 x轴切分256份, WIDTH= 257,  y轴切分256份 , HEIGHT=257

//计算交点附近 0.1为边长的矩形框的上下左右范围, 接着计算geo中相应的定点的行和列范围。

//调整所有顶点的高度, 设定材质中的 mat.attributes.displacement.needsUpdate = true;  设定displacement需要更新

var radius = 0.05; 
    var left = point.x-radius;
    var right = point.x+radius;
    var bottom = point.z-radius;
    var up = point.z + radius;

    var rowGrid = 2/(HEIGHT-1);
    var colGrid = 2/(WIDTH-1);
    
    var rowBegin = ~~Math.max((bottom+1)/rowGrid, 0);
    var rowEnd = ~~Math.min((up+1)/rowGrid, HEIGHT);
    var colBegin = ~~Math.max((left+1)/colGrid, 0);
    var colEnd = ~~Math.min((right+1)/colGrid, WIDTH);
for(var i = rowBegin; i <= rowEnd; i++)
    {
        for(var j = colBegin; j <= colEnd; j++)
        {
            var num = ~~(i*WIDTH+j);
            //console.log(num);
            pmesh.displacement.value[num] += 0.05;

            //console.log("new", pmesh.displacement, pmesh.displacement.needsUpdate);
        }
    }
    pmesh.displacement.needsUpdate = true;

}


结束:

   通过设定几何体可以动态更新,  设定 材质中的属性需要更新, 则实现了调整displacement的目的。


共有 人打赏支持
李勇2
粉丝 43
博文 183
码字总数 60421
×
李勇2
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: