时间戳

首页 > 解决方案 > Three.js 节点 TextureLoader 不工作

javascript - Three.js 节点 TextureLoader 不工作

问题描述

我正在使用 node with three.js 在服务器端呈现对象。我有我的 OBJLoader 和 MTLLoader 工作，我正在使用 MockBrowser 模拟 DOM。每当我打印模型的屏幕截图时，我都可以看到模型很好，但纹理尚未加载。如果我在浏览器中使用three.js，我使用的代码完全可以正常工作并且我可以看到纹理，但是在node.js 中使用完全相同的代码我看不到纹理。我打印出纹理的图像对象，它返回的只是一个空的图像对象。如果需要，我会提供代码，但我不确定还能做什么。

我没有收到任何错误或任何东西，纹理不会加载到对象上。

标签： javascriptnode.jsthree.jsjsdom

解决方案

我想我把它缩小到了这样一个事实：three.js 将纹理的图像 src 分配为 URL 而不是 base64 值，因为我使用的是不起作用的节点画布。我只是自己手动加载了图像：

var request = require('request').defaults({ encoding: null });
var url = "URLHERE";

request(url, function(error, response, data) {
  if (!error && response.statusCode == 200) {
    var image = new Canvas.Image();
    image.src = data;

    var texture = new THREE.Texture(image);
    texture.needsUpdate = true;

    var material = new THREE.MeshPhongMaterial({map: texture, overdraw: true});
  } else {
    response = 'error';
  }
});

然后我将对象的材质设置为该值。由于 js 的执行方式，我仍然在加载多个对象和纹理时遇到问题，但至少纹理加载，只是有时不在正确的对象上。不过我会想办法的。将其留给可能遇到此问题的任何人。

推荐阅读