1、ConvexGeometry
A、本地项目报错:
ConvexGeometry需要引入,位置在”three/addons/geometries/ConvexGeometry.js”。
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 *π时,物体闭口,再将值调大,绘制不变化。
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绘制平面。
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方法实现字体切换,代码如下: