用three.js中的另一个新网格动态替换一个网格

Question

我正在努力创造一个突破性游戏，其中桨形状像一块屋顶装饰，由屋顶的间距决定。击中特殊砖块会改变音高变量。增加或减少音高会改变音高＆＃34;陡度＆＃34;桨的。 问题是当发生音高变化时，它会绘制一个新的桨，但仍然将旧的桨保持在屏幕上。正如你在屏幕截图中看到的那样，在击中5个特殊砖块时，屏幕上有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()函数中初始化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); } 函数中更新球拍的几何图形，如下所示：

040

这种技术用于threejs.org

上几何的例子

jsfiddle示例