《three开发指南》阅读笔记——第五章

1、CircleGeometry

        A、看书籍提到属性thetaLength的值,以为其值设置超过2 *π会有报错信息,或者其值真正绘制的弧长等于thetaLength % (2 *π)。经过尝试发现超过2 *π的部分也会被绘制:

        B、书籍提到segments的值最少3个,当segments的值小于3,其绘制效果与等于3的效果一样。


2、ShapeGeometry

        A、点击Gui的asPoints按钮报错:

        对比Shape的官网信息,感觉和Shape.extractPoints方法相近,extractPoints的返回值有两个,看github的效果,只绘制外层线框,那应该是用Shape.extractPoints(divisions).shape替换。
        调整代码:

        刷新页面,可以绘制与github示例相同的效果,但是控制台报错:

        不明白为什么BufferGeometry.boundingSphere是有值的,查看模块“LineBasicMaterial”的C点内容BufferGeometry的boundingSphere也是有值的,属性相近。对比模块“LineBasicMaterial”的C点内容,本示例属性boundingSphere的center的类型应该是Vector2,不知道怎么修改。
        将BufferAttribute构造函数的2改成3,这样boundingSphere的center的类型是Vector3,计算应该没有问题。刷新页面发现报错依然存在。看BufferGeometry.attribute.position.count的值不是整数,不知道是不是这个的问题。本来打算修改传入dataList的长度余3为0,后面想“我为什么不把dataList.pust(item.x, item.y)改成dataList.pust(item.x, item.y, 0)呢?反正二维转三维就是z坐标为0。”。修改后刷新页面发现,报错信息没有。
        经过这一遭,感觉用在BufferGeometry上,BufferAttribute构造函数传入的数字只能为3。

        B、A部分值绘制的外框,两个圆和一个圆没有绘制出来。可以通过Shape.extractPoints(divisions).holes获取这部分的点,参照A部分的内容加圆的点追加到dataList,刷新页面后,发现页面只绘制外框,并有报错A部分的错误。
        打印Shape.extractPoints(divisions).holes,发现其结构与Shape.extractPoints(divisions).shape不一样,调整圆点传入方式:

        绘制效果如下:

        不知道是不是因为是Line,所以必须点点相连。调整代码只传入一个圆,刷新代码,发现这个圆会于外框的一个点连起来,验证的推测。

        C、点击Gui的asSpacePoints按钮报错:

        根据报错,Shape没有createSpacedPointsGeometry方法,对于官网,没有找到符合的替换方法。下载github的代码运行,这部分也是报错的,不知道书籍原本的效果是什么样的。


补充:github上写了与RingGeometry的示例,书籍没有提到。

        A、调整thetaSegments的值,小于3的绘制效果与值为3的效果一样。thetaSegments的值越大,绘制的图形越趋近于圆环。

        B、调整phiSegments的值,小于1的绘制效果与值为1效果一样。

        C、调整thetaLength的值,面形成闭环的值为2 *π。thetaLength的超过2 *π,图形收缩绘制如:

        thetaLength的值也可以设置为负值,相较于绝对值相等的正值,其形状大小相同,颜色不同(材质为MeshNormalMaterial,且MeshNormalMaterial.side为THREE.DoubleSide)。

        D、调整innerRadius的值,当innerRadius和outerRadius同为正值或负值时,大的部分做外环的半径,小的做内环的半径;当innerRadius和outerRadius一正一负,会绘制两个叠一起的圆形,如:


3、CubeGeometry

        A、BoxGeometry的属性widthSegments、heightSegments、depthSegments不能为0,为0会有报错信息:

        不过上面三个属性其中某一个A属性为0,也能渲染物体,与属性A相关分段的4个页面将不会绘制。当上面三个属性为0的数量大于1时,物体将不会绘制。


4、SphereGeometry

        A、绘制一个完整的球体,属性phiLength的值需要为2 *π,属性thetaLength的值为π。phiLength的值可以大于2 *π,thetaLength的值大于π时,图形会卷着绘制,如:

        当phiLength等于phiStart或者thetaLength等于thetaStart时,只绘制一条线,当前面两个条件同时满足,没有物体绘制。

        B、感觉属性widthSegments和heightSegments应该值小于3的绘制效果等同值为3的效果。经过尝试widthSegments确实是,heightSegments是值小于2时的绘制效果等同与值为2。


5、CylinderGeometry

        A、调整属性radialSegments的值,发现值为2时,绘制结果为平面,值为1时,绘制结果为线条,值为0时,无内容绘制并报错(前提属性radiusTop、radiusBottom和height不为0)。
        设置radialSegments的值为负值,绘制效果同值为0时。

        B、当属性height的值不为0,radiusTop或radiusBottom的值为0时,绘制效果为圆锥。当属性height为0时,radiusTopd和radiusBottom的值都不为0时,会绘制两个叠一起的圆,如:

        当属性openEnded的值为true时,且属性height为0时,radiusTopd和radiusBottom的值都不为0时,绘制效果如下:

        当height、radiusTopd和radiusBottom都为0时,无内容绘制。
        radiusTopd和radiusBottom都可以设置为负值,当值为负值时对应的圆形不会绘制,通过openEnded也无法使圆形绘制。
        Height可以设置为负值,绘制效果看上去与值为正值无区别,通过MeshNormalMaterial反馈的颜色不同,得到负值和正值的区别。

        C、调整属性heightSegments的值,发现值为0时,绘制两个圆形并报错(前提属性radiusTop、radiusBottom和height不为0)。
        设置heightSegments的值为负值,绘制效果同值为0时。


6、TorusGeomaterial

        A、调整tube的值,绝对值相同,绘制效果相同。值为0时,绘制线条。

        B、调整radius的值,绝对值相同的两个值,绘制物体的大小形状一样,材质会MeshNormalMaterial时,颜色不同。

        C、调整arch的值,效果同B部分,绘制一个完整的环对应的值为2 *π,超过将会卷着绘制:

        D、调整radialSegments的值,效果同30小点A部分。

        E、调整tubularSegments的值,效果同D部分。


7、TorusKnotGeometry

        A、调整radius的值,值为0,无内容绘制;绝对值相同的两个值,绘制物体的颜色一样,形状大小看起来像按某个方向反转。

        B、调整tube的值,值为0,绘制线条;绝对值相同的两个值,绘制物体的颜色形状大小一样。

        C、调整radialSegments的值,小于1时,无内容绘制且报错;值为1时,绘制线条圆形;值为2时,绘制一个被扭曲的面;值大于2,正常绘制内容。

        D、调整tubularSegments的值,小于1时,无内容绘制且报错;值为1时,radialSegments的值为1,无内容绘制,radialSegments的值2,绘制直线,radialSegments值大于2,绘制成环的线条;值为2时,当radialSegments的值为1时,绘制一条直线,radialSegments的值为3,绘制一个平面,radialSegments大于3,绘制被折叠的面;值大于2,管道样式封口。

        E、调整P的值,值为0时,无内容绘制并报错;绝对值相同的两个值,正值和负值绘制物体的形状大小一样,颜色不同。

        F、调整q的值,值为0时,有物体绘制。绝对值相同的两个值,正值和负值绘制物体的颜色一样,形状大小看起来像按某个方向反转。

        G、书籍提到的属性heightScale,对比官网,应该是被移除了。


8、PolyhedronGeomery

        A、调整radius的值,值为0,无内容绘制;绝对值相同的两个值,正值和负值绘制物体的形状大小一样,颜色不同。

        B、调整detail的值,值小于0,无内容绘制。值越大,绘制的物体也趋近于球体


9、IcosahedronGeometry

        A、调整radius值为0,无内容绘制;绝对值相同的两个值,正值和负值绘制物体的形状大小一样,当detail的值为0时,两者颜色相同,detail大于0时,两者颜色不同。

        B、调整detail的值,效果同33小点B部分。


10、TetrahedronGeometry

        A、调整radius值为0,无内容绘制;绝对值相同的两个值,正值和负值绘制物体的形状大小看起来像按某个方向反转,颜色不同。

        B、调整detail的值,效果同33小点B部分。


10、Octahedron

        小节整体内容同模块“IcosahedronGeometry”。


补充:DodecahedronGeometry的属性radius和detail的调整效果同模块“IcosahedronGeometry”。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容