需要使用Canvas渲染器three.js在输入文件中渲染用户上传的纹理

Question

我已经使用three.js库加载了一个Blender模型，并希望允许用户通过表单中的输入字段更改某些人脸的纹理。我使用WebGLRenderer时没有任何问题，它在Chrome中运行良好，但当输入的纹理为data:image...格式时，它不适用于画布渲染器。似乎如果我从服务器加载一个完整的路径映像，它会正常工作。有人知道是否有办法以这种方式加载纹理并用canvasrenderer渲染它们吗？

谢谢。

我在这里添加了代码，在我设置相机、灯光并检测它之后，浏览器检测到webgl是否使用WebGLRenderer或CanvasRenderer。

首先，我从搅拌机中加载模型：

 var loader = new THREE.JSONLoader();
    loader.load('assets/models/mimaquina9.js', function (geometry, mat) {
        //I set the overdraw property to 1 for each material like i show here for 16    
        mat[16].overdraw = 1;          
        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(mat) );
        mesh.scale.x = 5;
        mesh.scale.y = 5;
        mesh.scale.z = 5;
        scene.add(mesh);
    }, 'assets/images');
        render();
    //To render, I try to make an animation in case WebGL is available and just render one frame in case of using the canvas renderer.
    function render() {
        if(webgl){
            if (mesh) {
                mesh.rotation.y += 0.02;
            }
            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }
        else if(canvas){
            camera.position.x = 30;
            camera.position.y = 20;
            camera.position.z = 40;
            camera.lookAt(new THREE.Vector3(0, 10, 0));
            setTimeout(function (){
                //something you want delayed
                webGLRenderer.render(scene, camera);
            }, 1000);
        }
    }

   $('#datafile').change(function(e)
   {
       e.preventDefault();
       var f = e.target.files[0];
       if(f && window.FileReader)
       {
           var reader = new FileReader();
           reader.onload = function(evt) {
                console.log(evt);
                        mesh.material.materials[16].map = THREE.ImageUtils.loadTexture(evt.target.result);
                            if(canvas && !webgl){
//I read that might be a problem of using Lambert materials, so I tried this commented line without success
                                //mesh.material.materials[16] = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(evt.target.result)});
//If I uncomment the next line, it displays the texture fine when rendering after.    
                                //mesh.material.materials[16].map = THREE.ImageUtils.loadTexture("assets/images/foto.jpg");
                                render();
                            }
           }
           reader.readAsDataURL(f);

       }
   });

再次感谢。

Answer 1

evt.target.result是一个DataURL，所以应该将其分配给image.src。像这样的东西应该起作用：

var image = document.createElement( 'img' );
image.src = evt.target.result;
mesh.material.materials[16].map = new THREE.Texture( image );