three.js自学之旅（6）—— 各种模型探究（1）

在探究模型之前，先放一张官网的图，看一下大致有多少种模型可供使用。接下来两到三章应该都是针对于geometry的研究，关于material材质的研究放到后面去（发现了一个大坑）

可以看到，API文档里给出的模型大体分为两种，一种是XX模型，还有一种是XX缓存模型，之前的demo演示中我一直使用的是最基本的BoxGeometry（盒模型）。关于缓存几何模型的官网描述

缓存几何模型（BufferGeometry）：该类是一个几何模型(Geometry) 的高效替代，因为它使用缓存（buffer）来保存所有数据，包括顶点位置、面索引、法向量、颜色、UVs以及自定义属性。这节约了向
GPU传递全部这些数据的成本。但同时也使得BufferGeometry要比几何模型(Geometry) 更难以处理，不是以对象的方式来访问，比如使用Vector3来访问位置数据，以Color对象来访问颜色数据，你得从相应的attribute缓存中访问原始数据。这使得BufferGeometry很适合用来存储静态对象，也就是当我们创建完模型实例后不太需要去操作它。

感觉不是很适合我这样的新手，所以打算先舍弃对缓存几何模型的探究，直接探究简单的几何模型。

1.盒子模型(BoxGeometry)

先从我一直在用的盒子模型开始说，看一下几何模型有哪些通用属性。

var material = new THREE.MeshLambertMaterial({color:0xff0000,wireframe:true});//注意这里设置材质
var geometry =  new THREE.BoxGeometry(2,2,2,1,1,1);
var cube  = new THREE.Mesh(geometry,material);

在对上一章的插件使用的过程中发现一个坑，当我更新cube.geometry.parameters的值时，cube本身并没有更新，因此完善了一下插件，在按钮点击事件里加了一个回调函数，方便大家操作，具体代码如下。

var  assistantTool = {
    modifyParameters:function(obj,parArr,callback){
        console.log(typeof(callback))
        for(var i = 0;i<parArr.length;i++) {
            var index = i;
            var now = obj[parArr[index].par];
            $("body").append("<span class='wz'>"+parArr[index].par+"：</span></span><button index='"+i+"' class='buttonadd'>+</button><span class='sz'>"+ now +"</span></span><button index='"+i+"' class='buttonsubduction'>-</button>");
            $(".buttonadd").eq(i).bind("click",function(ev){
                ev .stopPropagation();
                var _index = $(this).attr("index");
                if(obj[parArr[_index].par] < parArr[_index].max){
                    obj[parArr[_index].par] = floatObj.add($(".sz").eq(_index).html(),parArr[_index].every);
                }
                $(".sz").eq(_index).html(obj[parArr[_index].par]);
                if(typeof(callback)=="function"){
                    callback();//代码加在这儿
                }
            })
            $(".buttonsubduction").eq(i).bind("click",function(ev){
                ev .stopPropagation();
                var _index = $(this).attr("index");
                if(obj[parArr[_index].par] > parArr[_index].min){
                    obj[parArr[_index].par] = floatObj.subtract($(".sz").eq(_index).html(),parArr[_index].every);
                }
                $(".sz").eq(_index).html(obj[parArr[_index].par]);
                if(typeof(callback)=="function"){
                    callback();
                }
            })
            $(".buttonsubduction").eq(i).css("top",50*i);
            $(".buttonadd").eq(i).css("top",50*i);
            $(".wz").eq(i).css("top",50*i);
            $(".sz").eq(i).css("top",50*i);
        }
    }
}

具体代码可以直接跳过，在使用的时候，只要加入回调函数即可，具体的思路就是注销原来的模型，动态生成新的模型即可，请看具体回调的写法：

assistantTool.modifyParameters(cube.geometry.parameters,[
    {
        par:"width",
        max:20,
        min:1,
        every:1
    },{
        par:"height",
        max:20,
        min:1,
        every:1
    },{
        par:"depth",
        max:20,
        min:1,
        every:1
    },{
        par:"widthSegments",
        max:20,
        min:1,
        every:1
    },{
        par:"heightSegments",
        max:20,
        min:1,
        every:1
    },{
        par:"depthSegments",
        max:20,
        min:1,
        every:1
    }
],function(){
    var newGeometry = geometry.parameters;
    cube.geometry.dispose();
    cube.geometry =  new THREE.BoxGeometry( newGeometry.width,newGeometry.height,newGeometry.depth,newGeometry.widthSegments,newGeometry.heightSegments,newGeometry.depthSegments );
})

最终的效果如图所示，可以动态修改右上角的值进行查看。

2.圆形模型(CircleGeometry)

注意是圆形模型，不是圆柱模型，也不是球，你可以把它当做平面模型来看。

CircleGeometry(radius, segments, thetaStart, thetaLength)
radius — 圆的半径, 默认值 = 50.
segments — 分割面数量 (三角形), 最低值 = 3, 默认值 = 8.
thetaStart — 第一个分割面的开始角度, 默认值 = 0 (3点钟方向).
thetaLength — 圆形扇形的圆心角通常称为θ。默认为2 * Pi，这形成了一个完整的圆

把四个参数放到辅助函数里去，自己玩就可以了。

//圆/扇形模型
var geometry = new THREE.CircleBufferGeometry( 4, 3 ,0,6.28);
var circle = new THREE.Mesh(geometry,material);
scene.add(circle);

先写到这里，后续会把所有的模型玩一遍，熟悉里面的各个参数，方便具体实施做东西。

three.js自学之旅（6）—— 各种模型探究（1）

猜你喜欢