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

1、ConvexGeometry

        A、本地项目报错:

        ConvexGeometry需要引入,位置在”three/addons/geometries/ConvexGeometry.js”。


2、LatheGeometry

        A、按照github的代码,本地得到的运行效果为:

        看上去是一个平面,以为自己照着敲敲错了,直接将generatePoints函数复制替换,刷新页面后,还是上图效果。
        看官网其的示例用的是Vector2,根据官网示例调整代码:

        刷新后,发现效果同LatheGeometry部分同书籍一样,球体组没有绘制出来,应该是Vector2类型不能赋值给Mesh.position。
        将Vector2改回Vector3,对比官网,感觉是z坐标为0,y不是,调整代码:

        刷新页面,绘制效果如下:

        并且控制台,有报错:

        难道是要x轴的值设置为0?调整代码:

        绘制效果如下:

        后面发现可以只给Vector3传两个值,这样的绘制效果与github的运行效果一样。看了Vector3的x、y、z的值都是默认为0,不明白为什么对于z轴,传0和不传0的绘制效果相差这么大。

        B、调整segments的值,小于1报错并无内容绘制;等于1绘制线条,球体组的点没有和线条叠在一起;等于2绘制平面A,发现球体的位置是在平面A的垂直面上。大于2,绘制物体闭口,值越大,物体月平滑。

        C、调整phiLength的值,当物体的绘制结果接近线条,再将值调小,绘制不变化;phiLength的值为2 *π时,物体闭口,再将值调大,绘制不变化。


3、ExtrudeGeometry

        A、本地项目报错:

        看官网ExtrudeGeometry.js文件,确实没有applyMatrix函数。

        B、调整amount的值,绘制无变化,查看官网,发现没有这个属性,对比功能感觉用depth替换。当depth的值为0,且bevelThickness和bevelSegments的值都不为0时,绘制结果不是原本Shape生成的二维平面A,当bevelThickness和bevelSegments任一为0,绘制结果为平面A。当bevelThickness和bevelSegments任一为0,绝对值相等的正负值,绘制结果相近,否则正负值的绘制结果相差大。

        C、调整bevelThickness的值,bevelThickness的值可以为负值,和绝对值相同的正值对比,绘制效果相差较大。

        D、调整bevelSegments的值,其值小于0将会报错且绘制内容为平面A与通过Shape绘制的平面相差较大。

        E、调整curveSegm6ents的值,其值小于1将会报错且无内容绘制。bevelSegments和curveSegments的值越大,物体越平滑。

        F、调整bevelEnabled的值,绘制无变化。猜测,bevelEnabled的值为false,修改bevelThickness和bevelSegments的值无效,测试发现,上述猜测是错的。

        G、调整steps的值,发现其能取的负值取决于bevelSegments的值,不能小于-2 * bevelSegments,否则会报错。值大于0的绘制效果相同,值小于1,值越趋近于-2 * bevelSegments,物体的厚度越小越接近Shape绘制平面。


4、TubeGeometry

        A、本地项目报错:

        看VSCode提示有SplineCurve,用其替换,刷新页面发现报错:

        看官网SplineCurve的点是Vector2。将points推入的点类型改为Vector2,发现还是不行。。。
        搜索TubeGeometry的示例,发现文章A,生成路径用的是CatmullRomCurve3,改成CatmullRomCurve3后,刷新页面,绘制正常。

        B、调整closed的值,值为false,管道不首尾链接,值为true,首尾连接。

        C、调整radiusSegments的值,值小于1,管道不绘制;值为1,绘制线条;值为2,绘制扭曲的面;值大于2,绘制管道;radiusSegments的值可以为小数,绘制的物体有缺口,如:

        D、调整radius的值,值为0时,绘制线条;绝对值相同的正负值的绘制效果形状大小相近。
        调整segments的值,值小于0时,无内容绘制且报错。值为1,绘制内容趋近直线。当该值小到一定程度,球体组的绘制无法与管道紧贴:

        E、CatmullRomCurve3传入的点数小于2时,无内容绘制。


5、从SVG拉伸

        A、本地项目报错:

        将github中”d3-threeD.js”的transformSVGPathExposed的内容单独放入一个文件引入。

        B、本地项目报错:

        单独引入,地址”three/addons/controls/OrbitControls.js”。

        C、本地项目报警:

        去除属性配置。


6、ParametricGeometry

        A、本地项目报错:

单独引入,位置”three/addons/geometries/ParametricGeometry.js”。

        B、容器无物体绘制,对比别人的ParametricGeometry实例,构造函数传入的函数A需要参数position,对position赋值。看官网,发现THREE的ParametricGeometries.js提供四种几何体。


7、渲染文本

        A、页面无内容绘制,对比官网,TextGeometry需要单独引入,地址”three/addons/geometries/TextGeometry.js”。

        B、经过A部分处理,页面还是没有内容绘制。对比官网,需要引入FontLoader,地址”three/addons/loaders/FontLoader.js”并加载字体文件,调整代码如下:

        需要将读取字体的相关代码放到controls重绘函数的外面防止多次加载文件且scene.remove异步执行导致去除字体失败。

        C、本地项目报警:

        将depth替换height。调整depth的值,值为0,当bevelThickness和bevelSegments都不为0,绘制效果不为2D字体。当depth和bevelThickness的值不同时为正值或负值,且bevelThickness的绝对值小于depth时,才会有字体凹陷效果。

        D、调整size的值,值为0时,报错且无内容绘制;绝对值相同的两个正负值,字体大小相同,左右相反,上下相反。

        E、调整bevelThickness的值,当depth和bevelThickness的值不同时为正值或负值,bevelThickness的值越趋近于- depth / 2,字体凹陷越深。

        F、调整bevelSegments的值,值小于0时,字体绘制2D效果并有报错。

        G、调整bevelSize的值,值越大,字体越往外胀,值越小,字体越往里缩。

        H、当bevelEnabled的值为false,调整bevelThickness、bevelSegments、bevelSize对绘制效果无影响。

        I、调整curveSegments的值,当值小于1时,出现报错信息,值为0时,字体绘制不完整,小于0时,字体不绘制。值越大,字体越圆滑。

        J、调整steps的值,其值不能小于- 2 * bevelSegments,否则报错并绘制2D字体。值大于1,调整steps的大小,绘制效果无变化。值小于1时,值越小,绘制结果越趋近2D字体。

        K、对于书籍实现的字体切换的实现,本来想用FontLoader加载多个路径。查看官网说,.load传入的url的类型是string,感觉不能加载多个路径,本地做了多次调用load方法实现字体切换,代码如下:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容