Canvas 如何将Pixi.js画布用作Three.js纹理？_Canvas_Three.js_Textures

Canvas 如何将Pixi.js画布用作Three.js纹理？

canvas three.js

Canvas 如何将Pixi.js画布用作Three.js纹理？,canvas,three.js,textures,Canvas,Three.js,Textures,我正在尝试使用一个Pixi.js画布作为一个三点纹理。我一遍又一遍地重读这段代码，但我找不到我的错误。如果你有任何想法，那就太棒了当我激活document.body.appendChild（canvas\u UI.view）时 Pixi.js画布显示得非常完美，但当我将其用作纹理时，它不起作用谢谢你的时间 <body> <script src="js/pixi.js"></script> <script src="js/three.min.js"

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

当我激活

document.body.appendChild（canvas\u 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>


宽度=window.innerWidth；
高度=窗内高度；
//-------------------------------------------------------------------------------------
//三维场景画布
//-------------------------------------------------------------------------------------
var scene_3D=new THREE.scene（）；
场景_3D.fog=新的三层雾（“#a1a1”，2000，4000）；
var摄像机=新的三视角摄像机（75，宽/高，11000）；
摄像机位置设置（0,0,700）；
camera.updateProjectMatrix（）；
var canvas_3D=new THREE.WebGLRenderer（{antialas:true}）；
canvas_3D.设置尺寸（宽度、高度）；
canvas_3D.setClearColor（场景_3D.fog.color，1）；
document.body.appendChild（canvas_3D.doElement）；
var geometry=新的3.BoxGeometry（500500500）；
var material=新的三个.MeshNormalMaterial（）；
var cube=新的三个网格（几何体、材质）；
cube.position.z=-500；
立方体旋转z=-45；
场景_3D.添加（立方体）；
//-------------------------------------------------------------------------------------
//二维用户界面画布
//-------------------------------------------------------------------------------------;
var scene_UI=新的PIXI.Stage（0x66FF99）；
var canvas_UI=PIXI.autoDetectRenderer（宽度、高度，{transparent:true}）；
//document.body.appendChild（canvas_UI.view）；
canvas_UI.view.style.position=“绝对”；
canvas_UI.view.style.top=“0px”；
canvas_UI.view.style.left=“0px”；
var graphics=new PIXI.graphics（）；
图形填充（0xe60630）；
图形。移动到（宽度/2-200，高度/2+100）；
图形。线条（宽度/2-200，高度/2-100）；
图形。线条（宽度/2+200，高度/2-100）；
图形。线条（宽度/2+200，高度/2+100）；
graphics.endFill（）；
场景_UI.addChild（图形）；
//-------------------------------------------------------------------------------------
//在三维平面上映射二维画布
//-------------------------------------------------------------------------------------
var texture\u UI=新的三点纹理（canvas\u UI）
纹理_UI.needsUpdate=true；
var material_UI=新的三点网格基本材质（{map:texture_UI，side:THREE.DoubleSide}）；
材质透明=真；
var mesh_UI=新三个网格（新三个平面几何体（宽度、高度）、材质_UI）；
网格位置设置（0,0,0）；
场景_3D.添加（网格_UI）；
//-------------------------------------------------------------------------------------
//渲染动画
//-------------------------------------------------------------------------------------
函数animate（）{
请求动画帧（动画）；
画布UI.render（场景UI）；
立方体旋转y+=0.01；
canvas_3D.渲染（场景_3D，摄影机）；
}
制作动画（）；

解决了！var texture\u UI=新的三点纹理（canvas\u UI.view）；