Three.js-如何在不縮放筆划的情況下縮放圓？

Question

我正在使用THREE.Path創建圓形路徑，然后使用TubeGeometry使用該路徑來基本上創建一個具有透明填充和筆觸的圓，我可以控制其厚度。 我的問題是，如何在運行時擴展循環路徑？

通過mesh.vertices訪問頂點mesh.vertices產生非常奇怪的結果，因為我訪問的是Tube的Geometry，而不是Path。 如果更改路徑，則必須創建全新的TubeGeometry並通過執行mesh.geometry = newTubeGeometry用新的幾何體更新Tube，這根本不起作用。 縮放Tube本身也會增加其半徑，因此也不是正確的解決方案。

有任何想法嗎？ 謝謝

Answer 1

只是更改geometry屬性不起作用，您必須創建THREE.Mesh的新實例。 您還應該在舊幾何圖形上調用geometry.dispose() ，因為渲染器會在內部緩存相應的WebGLBuffer對象。 此處的更多信息：

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

Answer 2

這是一個如何使用THREE.TorusGeometry()欺騙的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>