小编Set*_*eth的帖子

Three.js 挤出二维面,同时绕挤出轴旋转

我希望在挤压过程中旋转形状,以显示绕 Z 轴的“扭曲”效果,如下所示

\n\n

在此输入图像描述

\n\n

和这里

\n\n

在此输入图像描述

\n\n

我生成这个扭曲立方体的尝试如下:

\n\n
var squareShape = new THREE.Shape();\nsquareShape.moveTo(10,0);\nsquareShape.lineTo(0,10);\nsquareShape.lineTo(-10,0);\nsquareShape.lineTo(0,-10);\nsquareShape.lineTo(10,0);\n\n\nvar extrudeSettings={amount:10, bevelEnabled:false};\nvar geometry = new THREE.ExtrudeGeometry( gearShape, extrudeSettings );\n
Run Code Online (Sandbox Code Playgroud)\n\n

显然,这只会沿着 z 轴直线挤压形状。使用geometry.applyMatrix();似乎不可能将立方体剪切成绕z轴的扭曲。

\n\n

做到这一点的唯一方法可能是在挤压时将某些内容硬编码到 2D 形状的法线、双法线和切线中。我相信答案就在 extrudePath \xe2\x80\x94 THREE.CurvePath 和frames-THREE.TubeGeometry.FrenetFrames 内,但不确定是否有更简单的方法。

\n\n

任何有关此事的帮助将不胜感激!

\n

javascript three.js

2
推荐指数
1
解决办法
1412
查看次数

标签 统计

javascript ×1

three.js ×1