Three.js google colab 中图像的纹理未按预期工作

Question

我正在尝试在 google colab 中使用 Three.js 的 TensorflowGraphics 实现将图像应用于网格，但是当我尝试加载图像时它可以处理修改颜色不起作用，我不确定出了什么问题。

代码如下：

context = threejs_visualization.build_context()
default_material = context.THREE.MeshPhongMaterial.new_object({
  'map':context.THREE.ImageUtils.loadTexture(samplesfn + "missing_tex.png")
})
default_material['vertexColors'] = context.THREE.NoColors

mesh["material"] = default_material
_ = threejs_visualization.triangular_mesh_renderer(mesh, width=100, height=100)

threejs_visualization.triangular_mesh_renderer 提供于 https://github.com/tensorflow/graphics/blob/master/tensorflow_graphics/notebooks/threejs_visualization.py

我知道问题不在于图像无法正确加载，因为在同一文件中 openCV 可以加载它。

非常感谢任何帮助。

Answer 1

我从未使用过这种语法，但我相信您应该能够通过简单地 modifying the .color property 来更改 material 颜色，而不是处理顶点颜色：

default_material = context.THREE.MeshPhongMaterial.new_object({
  'map':context.THREE.ImageUtils.loadTexture(samplesfn + "missing_tex.png"),
  'color': 0xff9900 // Set to orange
});

灯光

如果要使用 map 属性，PhongMaterial 需要用灯光照亮。材料通常不会自己发光，它们需要灯光才能让您看到它们。 See here for a demo of a simple light setup

如果您希望您的纹理“发光”而不是反射光线，请将您的纹理设置为 the emmissiveMap property，而不是 map。

Three.js google colab 中图像的纹理未按预期工作

Three.js texturing from image in google colab not working as expected

three.js

google-colaboratory

灯光