threejs中Ribbon的替代方案

Question

有没有人在threejs中有一个简单的功能区示例。

我已经看过这些示例here和here，但第一个使用THREE.Ribbon已不再存在，而第二个看起来过于复杂，因为我只想构建一个功能区在threejs中看起来像我之前question发布的这些缎带。

如果没有人有任何替代方案的话，我正在打破第二个。

由于

注意 - 要清楚我并不是要求任何人做这项工作我只是想要一个正确方向的链接或点。

修改

好的 - 所以我已经成功了。我创建了一个jsfiddle，其功能区的第一部分如下所示：

并且fiddle我尝试旋转矢量，我认为应该是y轴，以便从曲线中取出曲线：

Answer 1

不是最终的解决方案，只是一个想法。

将THREE.ExtrudeGeometry()与THREE.CatmullRomCurve3()一起使用。结果与您想要的结果不完全相同，但足够相似。

您可以交换hh和hw的值，看看结果是如何变化的。

＆＃13;

＆＃13;

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

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

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

scene.add(new THREE.GridHelper(2, 10));

var ribbonBase = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-1, 1, 0),
  new THREE.Vector3(-1, 1.2, 0),
  //new THREE.Vector3(-1, 1, 0.125),
  new THREE.Vector3(0, 0, 0.5),
  //new THREE.Vector3(1, 1, 0.125),
  new THREE.Vector3(1, 1.2, 0),
  new THREE.Vector3(1, 1, 0)
]);

var segments = 300;

var hh = 0.0625;
var hw = 0.001;
var profile = new THREE.Shape([
  new THREE.Vector2(-hw, -hh),
  new THREE.Vector2(-hw, hh),
  new THREE.Vector2(hw, hh),
  new THREE.Vector2(hw, -hh),
  new THREE.Vector2(-hw, -hh)
]);

var ribbonGeometry = new THREE.ExtrudeGeometry(profile, {
  steps: 200,
  bevelEnabled: false,
  extrudePath: ribbonBase
});

var ribbonMaterial = new THREE.MeshLambertMaterial({
  color: "white"
});

var ribbon = new THREE.Mesh(ribbonGeometry, ribbonMaterial);
scene.add(ribbon);

render();

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

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;