Question

我正在尝试使用Three.js在React-Native中创建一个3D模型，因为我必须使用图像作为纹理，而使用＆＃39;文档＆＃39;的TextureLoader（）函数。和＆＃39;帆布＆＃39;对象创建逻辑，不能在react-native中使用。

那么，如何使用three.js在

Answer 1

简短摘要：Textureloader无法正常工作，因为它需要一个图像加载器，该图像加载器需要不正确的DOM。

大概有一个THREE.Texture函数，我这样使用：

let texture = new THREE.Texture(
     url //URL = a base 64 JPEG string in this case     
     );

var img = new Image(128, 128);
img.src = url;
texture.normal = img;

如您所见，我使用了一个Image构造函数，它是从React Native导入的，像这样：

import { Image } from 'react-native';

在 react native documentation中，它将解释如何使用它，它支持base64编码的JPEG。

最后将纹理映射到材质：

material.map = texture;

注意：我尚未尝试在我的webglview中显示最终结果，但是在元素检查器中，它似乎显示了正确的THREEjs对象。

Answer 2

（注意：这不是答案）

编辑：使代码更短一些，并使用DOMParser，但仍然无法正常工作，因为： “ image.addEventListener不是函数” 这意味着用此方法创建的图像对象似乎无法在THREEjs中使用。..

var DOMParser = require('react-native-html-parser').DOMParser;
var myDomParser = new DOMParser();
window.document = {};

window.document.createElementNS = (x,y) => {
    if (y === "img") {
        let doc = myDomParser.parseFromString("<html><head></head><body><img class='image' src=''></img></body></html>");
        return doc.getElementsByAttribute("class", "image")[0];
    }
}

编辑：要小心，因为它也会覆盖其他createElemensNS变体，它们会在其中创建画布或其他东西。

如何在React native中使用THREE js TextureLoader（）？

2 个答案: