PIXI.RenderTextureの使い方と方法

Question

私は自転車の車輪を視覚化するツールを構築しています。これは約100個のPIXI.Graphicsを使用してホイール全体を構築します。ホイールはすべてPIXI.Containerに配置されてレンダリングされます。私はPIXI.RenderTextureクラスを調べていて、この場合に使用するのが理にかなっていると考えました。だから質問1、これは良いユースケースですか？質問2、私はそれをうまく動作させることができないので、どのように使用することができますか？

const options = { 
 
    transparent: true, 
 
    antialias: true, 
 
    backgroundColor: 0xffffff, 
 
    resolution: window.devicePixelRatio, 
 
    view: canvasEle, 
 
}; 
 

 
const app = new PIXI.Application(width, height, options); 
 

 
const wrapper = new PIXI.Container(); // Wrapper is used for zooming and panning the wheel 
 
app.stage.addChild(wrapper); 
 

 
const wheel = new Wheel(wheelOpts); // Returns PIXI.Container full of PIXI.Graphics 
 
wrapper.addChild(wheel);

そしてrenderTextureを使用する私の試みは次のようです。私はそれを使用する方法を働いたと小さなjsfiddleを作っ

Answer 1

しかし、私は任意の助けてくれてありがとう、それをうまく

const options = { 
 
    transparent: true, 
 
    antialias: true, 
 
    backgroundColor: 0xffffff, 
 
    resolution: window.devicePixelRatio, 
 
    view: canvasEle, 
 
}; 
 

 
const app = new PIXI.Application(width, height, options); 
 

 
const wrapper = new PIXI.Container(); // Wrapper is used for zooming and panning the wheel 
 
app.stage.addChild(wrapper); 
 

 
const wheelRenderTexture = new PIXI.RenderTexture.create(width, height); 
 
const wheelSprite = new PIXI.Sprite(wheelRenderTexture) 
 
wrapper.addChild(wheelSprite) 
 

 
const wheel = new Wheel(wheelOpts); // Returns PIXI.Container full of PIXI.Graphics 
 

 
app.ticker.add(() => 
 
{ 
 
    app.renderer.render(wheel, wheelRenderTexture); 
 
})

ように見えることはできませんhttps://jsfiddle.net/hp98ygz5/1/

const width = 600 
const height = 600 

var app = new PIXI.Application(width, height, {backgroundColor : 0xffffff}); 
document.body.appendChild(app.view); 

const wheelRenderTexture = PIXI.RenderTexture.create(width, height); 
const wheelRenderSprite = new PIXI.Sprite(wheelRenderTexture); 
app.stage.addChild(wheelRenderSprite) 

const wheelContainer = new PIXI.Container() 
//app.stage.addChild(wheelContainer) 
wheelContainer.addChild(drawCircle(100,100,50,0xfec3dc,2,0Xfe68a4)) 
wheelContainer.addChild(drawCircle(100,100,20,0xFFCC66,2,0X55ff77)) 

app.renderer.render(wheelContainer,wheelRenderTexture) 

私は上記の例で何が間違っていたのか分かりませんが、今すぐに動作します。