Three.js - 我如何使用EllipseCurve作爲擠出路徑？

Question

問題： 在真棒Three.js中，我無法弄清楚如何將EllipseCurve轉換爲我可以擠出的路徑。

在下面的例子中，如果我取消了LineCurve3的註釋，我的方形很好地沿着它展開。如果我將它作爲EllipseCurve運行，則沒有錯誤，但屏幕上不顯示任何內容。我試圖將相機放大，以確保它不出於任何原因不在屏幕上。

我知道EllipseCurve正在正確生成，因爲我可以用線條材料（未在下面的代碼中顯示）寫出它。

代碼

var radius = 1100; 
var degreesStart = 75; 
var degreesEnd = 30; 
var radiansStart = (degreesStart * Math.PI)/180; 
var radiansEnd = ((degreesEnd) * Math.PI)/180; 

// this won't seem to work as an extrude path, but doesn't give any errors 
var path = new THREE.EllipseCurve(0, 0, radius, radius, radiansStart, radiansEnd, true); 

// this works fine as an extrude path 
//var path = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(1000, 1000, 0)); 

var extrusionSettings = { steps: 100, bevelEnabled: false, extrudePath: path }; 

// draw a square to extrude along the path 
var sectionSize = []; 
sectionSize.push(new THREE.Vector2(0, 0)); 
sectionSize.push(new THREE.Vector2(1000, 0)); 
sectionSize.push(new THREE.Vector2(1000, 1000)); 
sectionSize.push(new THREE.Vector2(0, 1000)); 

var sectionShape = new THREE.Shape(sectionSize); 

var componentGeometry = new THREE.ExtrudeGeometry(sectionShape, extrusionSettings); 
var component = new THREE.Mesh(componentGeometry, material); 

group.add(component); 

我曾嘗試： 我試圖使其工作都試圖從曲線與點提取到的路徑擠出使用。我覺得我得到的最接近是

var ellipsePath = new THREE.CurvePath(path.getSpacedPoints(20)); 
// where 'path' is my EllipseCurve in the code above 
// (and then changed the extrusion settings to use 'ellipsePath ' instead). 

這給了錯誤「無法讀取屬性‘distanceTo’空的」。

我似乎無法理解EllipseCurve如何與有關路徑的點相關。

任何人都可以點我在正確的方向請，或有一些代碼，你已經遇到了同樣的問題？非常感謝。

Answer 1

我遇到了同樣的問題。在對EllipseCurve和CurvePath進行實驗之後，我得出結論：這兩者正在構建導致ExtrudeGeometry內部問題的2D路徑。檢查three.js的來源和基於3D樣條的示例擠出，我構建了自己的Curve並定義了3D .getPoint函數。這解決了問題，並呈現出完美的擠壓效果。用下面的替換代碼的「VAR路徑」行：

var path = new THREE.Curve(); 
path.getPoint = function (t) { 
    // trace the arc as t ranges from 0 to 1 
    var segment = (radiansStart - radiansEnd) * t; 
    return new THREE.Vector3(radius * Math.cos(segment), radius * Math.sin(segment), 0); 
    };