1

我正在尝试复制这个使用 pixi.js v3 制作的http://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=strip-demo.js&title=Strip 。我正在使用 v5，即使在替换了所有已弃用的代码后，我似乎也无法让它工作。

我的代码：

var renderer = new PIXI.Renderer(800, 600, { view: $('.canvas') });

// create the root of the scene graph
var stage = new PIXI.Container();

var count = 0;

// build a rope!
var ropeLength = 918 / 20;

var points = [];

for (var i = 0; i < 20; i++)
{
    points.push(new PIXI.Point(i * ropeLength, 0));
}

var strip = new PIXI.SimpleRope(PIXI.Texture.from('https://lh3.googleusercontent.com/proxy/vhIArUv8tvygt7nxZwB_md9SdQXvMFczJcywCpCLhLDxlEP_S0XC2mNjXlAvVDjXcI1i0uXQ32xMAgSGnHs8r8qY'), points);

strip.x = -459;

var snakeContainer = new PIXI.Container();
snakeContainer.position.x = 400;
snakeContainer.position.y = 300;

snakeContainer.scale.set(800 / 1100);
stage.addChild(snakeContainer);

snakeContainer.addChild(strip);

// start animating
requestAnimationFrame(animate);

function animate() {

    count += 0.1;

    // make the snake
    for (var i = 0; i < points.length; i++) {

        points[i].y = Math.sin((i * 0.5) + count) * 30;

        points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * 20;

    }

    // render the stage
    renderer.render(stage);

    requestAnimationFrame(animate);
}
.canvas {
  height: 75vh;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="canvas" id="board"></div>

4

0 回答 0