在three.js中合并几何体不起作用

Question

A path is changed dynamically. So,

previous render function was, (LENGTH, getPosition(), RADIUS, MATERIAL, SCENE are already set)

var prevPosition = getPosition();
for(var i =0; i < LENGTH; i++) {
    drawPath(getPosition());
}

function drawPath(currentPosition) {
    var spline = new THREE.CatmullRomCurve3([prevPosition, currentPosition]);
    var geometry = new THREE.TubeGeometry(spline, 1, RADIUS);
    var mesh = new THREE.Mesh(geometry, MATERIAL);
    SCENE.add(mesh);
}

previous render method works very well. I changed this for performance.

modified render function is,

var mergedGeometry = new THREE.Geometry();
function drawPath(currentPosition) {
    var spline = new THREE.CatmullRomCurve3([prevPosition, currentPosition]);
    var geometry = new THREE.TubeGeometry(spline, 1, RADIUS);
    mergedGeometry.merge(geometry);
    var mesh = new THREE.Mesh(mergedGeometry, MATERIAL);
    SCENE.add(mesh);
} 

mesh is not displayed. I don't know why. Do you know why does not this work? Please help me.

Answer 1

I believe you've confused geometry for a mesh. Geometry is a component of a mesh. You want to add to your geometry, cast it into a new mesh object, and add that new mesh to the scene.

Try:

var mergedGeometry = new THREE.Geometry();
var prevPosition = getPosition();
for(var i =0; i < LENGTH; i++) {
    drawPath(getPosition());
}

var mesh = new THREE.Mesh(mergedGeometry, MATERIAL);
SCENE.add(mesh);


function drawPath(currentPosition) {
    var spline = new THREE.CatmullRomCurve3([prevPosition, currentPosition]);
    var geometry = new THREE.TubeGeometry(spline, 1, RADIUS);
    mergedGeometry.merge(geometry);
} 

If you get stuck, there is a functioning mesh merge fiddle here: http://jsfiddle.net/mt2zbb9k/