未显示三个js CSS3d Sprites

Question

I've been at this for hours, i'm trying to get sprites to show up using the CSS3d renderer in three js, but to no avail.

Here is the code which creates the sprites, allegedly...

        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 );

It's inside an object, when i log the context 'ctx' and 'this.object' i see what i expect, but they just aren't there!

Any help would be greatly appreciated.

Thanks.

Answer 1

Looks like your Sprites are rotated off canvas at "ctx.rotate( Math.PI / 2 );". By default this is rotating it around the origin (0, 0) so the img disappears off canvas..

Try this:

        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 );

That should give you what you're after.