未顯示三個js CSS3d Sprites

Question

我已經花了幾個小時了，我試圖在3個js中使用CSS3d渲染器來顯示精靈，但無濟於事。

這是創建精靈的代碼，據稱...

        var sprite = document.createElement( 'img' );
        this.mapCanvas = document.createElement( 'canvas' );
        this.mapCanvas.width = this.hotspotWidth;
        this.mapCanvas.height = this.hotspotWidth;
        var ctx = this.mapCanvas.getContext( '2d' );
        console.log( "canvas: ", ctx );
        ctx.rotate( Math.PI / 2 );


        this.object = new THREE.CSS3DSprite( this.mapCanvas );
        console.log( "CSSObject", this.object );
        sprite.src = this.imageSource;
        sprite.addEventListener( "load", function( event ) { 
            console.log( "Sprite Loaded: ", event );
            ctx.drawImage( sprite, 0, 0 ) }, false );
        scene.add( this.object );
        console.log( "HS Object: ", this.object );

它在一個對象內部，當我記錄上下文“ ctx”和“ this.object”時，我看到了我期望的結果，但是它們根本不在那兒！

任何幫助將不勝感激。

謝謝。

Answer 1

看起來您的Sprites已從“ ctx.rotate（Math.PI / 2）;”處的畫布上旋轉了。 默認情況下，它繞原點（0，0）旋轉，因此img從畫布上消失。

嘗試這個：

        sprite.addEventListener( "load", function( event ) { 
            ctx.translate( 20, 20 );
            ctx.rotate( 180*Math.PI/180 );
            ctx.translate( -20, -20 );
            ctx.drawImage( sprite, 0, 0, 40, 40 );
            ctx.restore();
            }, false );

那應該給你你所追求的。