javascript - 在 Three.js 中动态地将一个网格替换为另一个新网格

Question

我正在尝试创建一款突破游戏，其中桨的形状像一 block 屋顶装饰，由屋顶的坡度决定。击中特殊的砖 block 会改变音高变量。增加或减少桨距会改变桨的“陡度”。问题是，当音高发生变化时，它会绘制一个新的桨，但仍将旧的桨保留在屏幕上。正如您在屏幕截图中看到的那样，在击中 5 个特殊砖 block 后，屏幕上出现了 5 个不同间距的桨，而实际上应该只有一个。

//Break out game with changing paddle shape

var gridSize=50;
var geometry;
var extrudeSettings;
var startPitch = 1;
var pitch  = startPitch;
var pitchChange = false;
var paddle;
var paddleWidth = run*2;
var paddleX = 0;
var paddleLineThickness = .5;
var paddleMat = new THREE.MeshLambertMaterial({color: "purple"});
var paddleShape = new THREE.Shape();
var side = 10;
var pi = Math.PI;


function definePaddleShape() {
    roofAngle = Math.atan(pitch/12);
    rise = side*Math.sin(roofAngle);
    run = side*Math.cos(roofAngle);
    paddleWidth = run*2;
    paddleShape.moveTo(  -run, 0 );
    paddleShape.lineTo(  -run, paddleLineThickness );
    paddleShape.lineTo(0, rise + paddleLineThickness );
    paddleShape.lineTo( run, paddleLineThickness );
    paddleShape.lineTo(  run, 0 );
    paddleShape.lineTo(  0, rise );
    extrudeSettings = {amount:4, steps: 1, bevelSegments:0, bevelSize:0, bevelThickness:0};
}

function drawPaddle() {
    geometry = new THREE.ExtrudeGeometry(paddleShape, extrudeSettings);
    paddle = new THREE.Mesh(geometry, paddleMat);
    paddle.castShadow = true;
    scene.add(paddle);
    paddle.rotateX(-pi/2);
    paddle.translateY(-gridSize);
    paddle.translateX(paddleX);
}


function draw() {
    requestAnimationFrame(draw);

// pitch gets changed when a collision 
// between ball and special brick occurs
// sets pitchChange to true

    if(pitchChange) {
        scene.remove(paddle);
        definePaddleShape();
        drawPaddle();
        pitchChange = false;
            }


       renderer.render(scene, camera);
}


definePaddleShape();
drawPaddle();
document.addEventListener("mousemove", mouseMoveHandler, false);
draw();

Answer 1

您可以在 init() 函数中初始化您的 paddle 网格，然后在 drawPaddle() 函数中您只需更新桨的几何形状，如下所示:

function drawPaddle() {
    geometry = new THREE.ExtrudeGeometry(paddleShape, extrudeSettings);
    geometry.rotateX(-pi/2);
    //
    paddle.geometry.dispose();
    paddle.geometry = geometry;
    //
    paddle.castShadow = true;
    //scene.add(paddle); // you don't need it as you have the paddle mesh added already in init()
    paddle.translateY(-gridSize);
    paddle.translateX(paddleX);
}

这种技术用于 Threejs.org 上的几何示例

jsfiddle示例