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

Question

我正在尝试使用 Pixi.js canvas 作为 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>

Answer 1

如果您想制作交互式材质，您可以使用 THREE.CanvasTexture 并使用光线投射来获取材质上的 x 和 y。这就是 ZIM 对 TextureActive 所做的事情 - 请参阅https://zimjs.com/015 - 在 ZIM 015 中推出。这对于界面面板和 HUD 非常有用，但也适用于网格上的交互式游戏、拼图等。附图显示了一些可能性。

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1