Threejs波纹铁

Question

想象一下一片波纹铁板。它有长度和宽度。从宽度上看，基本上有很多相当紧凑的曲线。对于薄板的填充宽度，曲线每隔几英寸重复一次。为了用三个is来表示，我创建了一个形状，它是许多Bezier曲线。基本上，重复下面的操作，直到我得到所需的宽度：

shape.bezierCurveTo(start + adjustment, curveHeight, start + curveWidth - adjustment, curveHeight, start + curveWidth, 0);
shape.bezierCurveTo(start + curveWidth + adjustment, -curveHeight, start + 2 * curveWidth - adjustment, -curveHeight, start + 2 * curveWidth, 0);

然后我使用ExtrudeGeometry创建一个几何体：

var extrudeSettings = {
            steps: 1,
            amount: this.length,
            bevelEnabled: false,
            bevelThickness: 0,
            bevelSize: 0,
            bevelSegments: 0
        };


let wallGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

但速度很慢。很明显，它会产生很多分数。这是一条非常平滑的曲线。有没有一个设置可以用来减少曲线中的点，使曲线变得不那么平滑？这将减少三角形的总体数量，并加快速度。

我唯一能想到的另一种选择是使用一种看起来像曲线的光/影的纹理。这样做的问题是，它只从一个角度看起来很好。当我旋转我的结构时，光/影不会改变。当我使用ExtrudeGeometry时，它有正确的阴影，看起来很漂亮。

有趣的是，一旦结构被完全绘制出来，我就可以旋转和放大/缩小，一切都很好。所以很明显，它最初要处理的点数是导致问题的原因。

有什么关于如何加速的建议吗？

Answer 1

除了使用extrudeSettings的curveSegments之外，还可以变形薄长方体几何体：

​

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .5));

var geom = new THREE.BoxGeometry(5, 5, .125, 50, 1, 1);
geom.vertices.forEach(function(v){
  v.z += Math.sin(v.x * Math.PI * 2) * .125;
});
geom.computeFaceNormals();
geom.computeVertexNormals();

var corrugated = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({color: "silver"}));
scene.add(corrugated);


render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

​

或者使用2pha中的解决方案。