Question

我使用THREE.Path创建圆形路径，然后使用TubeGeometry使用该路径基本上创建一个圆圈，其中包含透明填充和可以控制其厚度的笔触。我的问题是，如何在运行时扩展循环路径？

通过mesh.vertices访问顶点会产生非常奇怪的结果，因为我正在访问Tube的Geometry，而不是Path。如果我更改了路径，那么我必须创建一个全新的TubeGeometry并通过执行mesh.geometry = newTubeGeometry更新具有新几何的Tube，而这根本不起作用。缩放管本身也会增加它的半径，因此也不是正确的解决方案。

有什么想法吗？感谢

Answer 1

只是更改几何属性不起作用，您必须创建THREE.Mesh的新实例。您还应该在旧几何体上调用geometry.dispose()，因为渲染器在内部缓存相应的WebGLBuffer个对象。更多信息：

https://discourse.threejs.org/t/changing-the-geometry-of-a-mesh/306

Answer 2

仅举例说明如何使用THREE.TorusGeometry()执行此操作：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
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 geometry = new THREE.TorusGeometry(5, 0.5, 8, 32);
geometry.rotateX(Math.PI * -0.5);
geometry.vertices.forEach(v => {
  v.initPosition = new THREE.Vector3().copy(v);
});
var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));

scene.add(mesh);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);

  time += clock.getDelta();

  geometry.vertices.forEach(v => {
    v // take a vertex
      .setY(0) // make it scalable in two dimensions (x, z)
      .normalize() // make a normal from it
      .multiplyScalar(Math.sin(time) * 2) // set the distance
      .add(v.initPosition); // add the initial position of the vertex
  });
  geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Three.js - 如何在不缩放圆圈的情况下缩放圆圈？

2 个答案: