Question

在阅读有关使用网络摄像头的增强现实的文章后，我正在体验三个JS。就像实验一样，我尝试在场景中放置一个简单的画布，在我放入webglrender之前，通过插入网络摄像头流。我在这篇文章（https://hacks.mozilla.org/2013/10/an-ar-game-technical-overview/）中读到，对于虚拟场景，需要创建一个虚拟场景，其中是webglrenderer对象的渲染器和现实场景（网络摄像头）。在我的文件testingthreejs.js中，第30行和第41行之间是我写的用于创建新场景（虚拟）的行，以及我创建并在我的网格对象中插入画布的位置。但没有任何事情发生，¿我怎么能像Mesh对象一样插入画布？我试图避免画一个画布，因为它假设画布渲染比用webgl渲染更慢（我也认为使用光线类）这是我的要点：https://gist.github.com/fernandosg/75ec701c0295761a77e6，里面是的文件testingthreejs.js和index.html。谢谢你的帮助。

Answer 1

您可以查看Stemkoski s website，其中包含很多非常好解释的示例。我认为this正是您要找的，请看一下脚本。

更准确地说，这是注释代码：

/////// draw text on canvas /////////

// create a canvas element
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 40px Arial";
context1.fillStyle = "rgba(255,0,0,0.95)";
context1.fillText('Hello, world!', 0, 50);

// canvas contents will be used for a texture
var texture1 = new THREE.Texture(canvas1) 
texture1.needsUpdate = true;

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

var mesh1 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas1.width, canvas1.height),
    material1
  );
mesh1.position.set(0,50,0);
scene.add( mesh1 );

/////// draw image on canvas /////////

// create a canvas element
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
// canvas contents will be used for a texture
var texture2 = new THREE.Texture(canvas2);

// load an image
var imageObj = new Image();
imageObj.src = "images/Dice-Blue-1.png";
// after the image is loaded, this function executes
imageObj.onload = function()
{  
    context2.drawImage(imageObj, 0, 0);
    if ( texture2 ) // checks if texture exists
        texture2.needsUpdate = true;
};  

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

var mesh2 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas2.width, canvas2.height),
    material2
  );
mesh2.position.set(0,50,-50);
scene.add( mesh2 ); 
}

Answer 2

我想也许我正在接近解决方案，最后我可以放画布（使用MeshBasicMaterial和PlaneGeometry），但现在绘制了画布，视频没有渲染： problem canvas

代码：

var canvas=document.createElement("canvas");
canvas.width=512;
canvas.height=512;  
var video=document.createElement("video");
streamVideo(video);
var canvasContext=canvas.getContext("2d");
var glCanvas=document.createElement("canvas");
var renderer_webgl=new THREE.WebGLRenderer({canvas:glCanvas});
renderer_webgl.setSize(512,512);
renderer_webgl.autoClear=false;
document.getElementById("container").appendChild(glCanvas);
var camera = new THREE.Camera();
var scene=new THREE.Scene();
var geometry=new THREE.PlaneGeometry(2,2,0);
var texture=new THREE.Texture(canvas);
var material=new THREE.MeshBasicMaterial({
            map:texture,
            depthTest:false,
            depthWrite:false
        });
var mesh=new THREE.Mesh(geometry,material);

canvas_draw=document.createElement("canvas");
        canvas_draw.width=128;
        canvas_draw.height=128;
        ctx=canvas_draw.getContext("2d");
        ctx.fillStyle = "#AAA";
        ctx.fillRect(1,1,20,25);
// HERE IS WHEN INSERT THE CANVAS
var texture_canvas=new THREE.Texture(canvas_draw);
texture_canvas.needsUpdate=true;
var basic_material_canvas=new THREE.MeshBasicMaterial({
    map:texture_canvas
});
var mesh_canvas=new THREE.Mesh(new THREE.PlaneGeometry(2,2,0),basic_material_canvas);
scene.add(mesh);
scene.add(mesh_canvas);
function renderScenes(){
    renderer_webgl.render(scene,camera);
}

function loop(){
    if(video.readyState===video.HAVE_ENOUGH_DATA){
        canvas.changed=true;
        canvasContext.drawImage(video,0,0);
        verifyDetector();
        texture.needsUpdate=true;
        texture_canvas.needsUpdate=true;
        renderScenes();
    }

    requestAnimationFrame(loop);
}
loop();

function verifyDetector(){
    detector = new AR.Detector();
    imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
    var markers = detector.detect(imageData);
    /*if(markers.length>0)
        canvasContext.drawImage(canvas_draw,markers[0].corners[0].x,markers[0].corners[0].y);               
        */
}

¿为什么会这样？

如何使用Mesh在三维JS中的WebGL渲染中插入画布

2 个答案: