Question

我最近开始使用Threejs库来使用WebGL。

我试图创建某种图像查看器，但我似乎无法弄清楚如何正确地做到这一点。我想在PlaneGeometry对象上显示图像，即从HTML5-Canvas获取的纹理。

我的代码如下所示：

var RunWebGL = function(img, canvas){
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(img.width, img.height);
    document.body.append(renderer.domElement);

    //Init the Scene;
    var scene = new THREE.Scene();

    //Init the Camera;
    var camera = new THREE.PerspectiveCamera(70, img.width/img.height, 1, 1000); 
    scene.add(camera);

    //Init the texture from the image displayed in the canvas. Then use this image to create the Mesh used to give the created plane a texture;
    var texture = new THREE.Texture(canvas);

    var material = new THREE.MeshBasicMaterial({map : texture});
    var geometry = new THREE.PlaneGeometry(img.widht, img.height);

    var mesh = new THREE.Mesh(geometry, material);

    //Init the Geometry and the texture(material) and mesh it together;
    scene.add(mesh);

    renderer.setClearColor(0xEEEEEE);
    texture.needsUpdate = true;

    renderer.render(scene, camera);
};

提供图像的HTML5-Canvas按预期显示它。

每次执行此代码时，我从WebGL部分获取的所有内容都是黑色方块。在搜索这个问题的答案时，我添加了“renderer.setClearColor（）;” - 这没有改变任何东西，我发现我现在得到的是平滑的灰色而不是死黑色的方块。

我没有任何错误/警告/无论如何。

传递给我的RunWebGL函数的img-object是一个标准的JavaScript Image对象。

如果我可以将此图像用作纹理而不是画布，我会非常高兴。但是使用Canvas的答案，甚至是暗示可以帮助减少我的斗争。

//编辑：我创建了一个JS-Fiddle来显示我的问题。这是链接：https://jsfiddle.net/a5ufknLu/2/

提前干杯，谢谢，

迈克尔

Three.js - WebGL渲染画布仍为黑色

0 个答案: