three.js入门（6）—— 各种模型探究（1）

叁歲伎倆 2021-09-14 14:36 427阅读 1赞

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

![SouthEast][]

可以看到，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本身并没有更新，因此完善了一下插件，在按钮点击事件里加了一个回调函数，方便大家操作，具体代码如下。

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

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 );
    })

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

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);

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

[SouthEast]: /images/20210813/a604de90f6264752bbc2e91bdea1cad3.png
[SouthEast 1]: /images/20210813/5150e0f19d274b9fa95a1c6615568d3f.png
[SouthEast 2]: /images/20210813/45690641b8974ab5b28088de8702d6ed.png