Question

我已经在这里工作了好几个小时，我试图让精灵出现在三个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

看起来你的精灵在“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 );

那应该会给你你想要的东西。

三个js CSS3d Sprites没有出现

1 个答案: