需要使用Canvas renderer three.js渲染用户在输入文件中上传的纹理
我使用需要使用Canvas renderer three.js渲染用户在输入文件中上传的纹理,three.js,textures,webgl,Three.js,Textures,Webgl,我使用three.js库加载了一个Blender模型,希望允许用户通过表单中的输入字段更改某些面的纹理。当我使用WebGLRenderer时,我没有任何问题,它在Chrome中运行良好,但当来自输入的纹理为data:image…格式时,它不适用于画布渲染器。似乎如果我从服务器加载一个完整路径映像,它就可以正常工作。有人知道有没有办法以这种方式加载纹理并使用画布渲染器进行渲染 多谢各位 我在这里添加了代码,在我设置相机、灯光和检测它之后,浏览器检测webgl或不使用WebGLRenderer或Ca
three.js
库加载了一个Blender模型,希望允许用户通过表单中的输入字段更改某些面的纹理。当我使用WebGLRenderer
时,我没有任何问题,它在Chrome中运行良好,但当来自输入的纹理为data:image…
格式时,它不适用于画布渲染器。似乎如果我从服务器加载一个完整路径映像,它就可以正常工作。有人知道有没有办法以这种方式加载纹理并使用画布渲染器进行渲染
多谢各位
我在这里添加了代码,在我设置相机、灯光和检测它之后,浏览器检测webgl或不使用WebGLRenderer或CanvasRenderer
首先,我从blender加载模型:
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);
}
});
再次感谢。evt.target.result
是一个数据URL
,因此您应该将其分配给image.src
。像这样的方法应该会奏效:
var image = document.createElement( 'img' );
image.src = evt.target.result;
mesh.material.materials[16].map = new THREE.Texture( image );
你能分享你的代码吗?你好@mrdoob,谢谢你的关注。我已经编辑了添加代码的帖子,我希望你能帮助我,因为这真的让我发疯了)。可能是路径的问题,因为当纹理从输入字段更改为data:image格式时,其效果与如果纹理托管在服务器中而找不到文件时的效果相同,也就是说,不使用纹理显示这些面。但我只是从这开始,真的需要一些大师级的帮助。再次感谢。是的,我正要写一篇评论,说我终于可以这样做了,正如我刚才在回答“如何在JSFIDLE中加载纹理”的问题时看到的那样。非常感谢你。无论如何,我想理解为什么在使用WebGLRenderer时,它没有分配给image.src。非常感谢。