Question

我正在尝试使用 Pixi.js 画布 作为Three.js纹理。我一次又一次地重读这段代码，但我无法找到错误。如果您有任何想法，那就太棒了。

当我激活document.body.appendChild(canvas_UI.view);

时

Pixi.js画布显示效果很好，但当我将它用作纹理时，它无法正常显示。

谢谢你的时间！

<body>
<script src="js/pixi.js"></script>
<script src="js/three.min.js"></script>
<script>
    width = window.innerWidth;
    height = window.innerHeight;

    //-------------------------------------------------------------------------------------
    // 3D Scene canvas
    //-------------------------------------------------------------------------------------
    var scene_3D = new THREE.Scene();
    scene_3D.fog = new THREE.Fog( "#a1a1a1", 2000, 4000 );

    var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 );
    camera.position.set( 0, 0, 700);
    camera.updateProjectionMatrix();

    var canvas_3D = new THREE.WebGLRenderer( { antialias: true } );
    canvas_3D.setSize( width, height );
    canvas_3D.setClearColor( scene_3D.fog.color, 1 );
    document.body.appendChild( canvas_3D.domElement );

    var geometry = new THREE.BoxGeometry( 500, 500, 500 );
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh( geometry, material );
    cube.position.z = -500;
    cube.rotation.z = -45;
    scene_3D.add( cube );

    //-------------------------------------------------------------------------------------
    // 2D UI canvas
    //-------------------------------------------------------------------------------------;
    var scene_UI = new PIXI.Stage( 0x66FF99 ); 
    var canvas_UI = PIXI.autoDetectRenderer(width, height, {transparent:true});

    // document.body.appendChild(canvas_UI.view);
    canvas_UI.view.style.position = "absolute";
    canvas_UI.view.style.top = "0px";
    canvas_UI.view.style.left = "0px";

    var graphics = new PIXI.Graphics();
    graphics.beginFill( 0xe60630 );
    graphics.moveTo( width/2-200, height/2+100 );
    graphics.lineTo( width/2-200, height/2-100 );
    graphics.lineTo( width/2+200, height/2-100 );
    graphics.lineTo( width/2+200, height/2+100 );
    graphics.endFill();
    scene_UI.addChild( graphics );

    //-------------------------------------------------------------------------------------
    // Map 2D canvas on 3D Plane
    //-------------------------------------------------------------------------------------
    var texture_UI = new THREE.Texture( canvas_UI ) 
    texture_UI.needsUpdate = true;

    var material_UI = new THREE.MeshBasicMaterial( {map: texture_UI, side:THREE.DoubleSide } );
    material_UI.transparent = true;

    var mesh_UI = new THREE.Mesh( new THREE.PlaneGeometry(width, height), material_UI );
    mesh_UI.position.set(0,0,0);
    scene_3D.add( mesh_UI );

    //-------------------------------------------------------------------------------------
    // Render Animation
    //-------------------------------------------------------------------------------------
    function animate() {
        requestAnimationFrame( animate );
        canvas_UI.render( scene_UI );

        cube.rotation.y += 0.01;
        canvas_3D.render( scene_3D, camera );
    }
    animate();
</script>

如何使用Pixi.js Canvas作为Three.js纹理？

0 个答案: