【问题标题】:Material preview with three.js使用three.js 预览材质
【发布时间】:2013-06-26 23:08:43
【问题描述】:

我正在研究一种在浏览器中显示材料的方法。 将有一个(或多个)几何图形,我想选择一些路径并将 3 个纹理从磁盘上的文件夹加载到几何图形。

所以在每个文件夹中都会有一张颜色贴图、一张高光贴图和一张法线贴图。

我的浏览器左侧应该是带有几何图形的 WebGL 场景。在右侧应该是一些我可以选择路径并加载纹理文件夹的字段。

我是three.js 的新手,我的问题是:

这可以使用three.js 吗?有没有办法在浏览器中加载纹理?我可以在我的几何体上放置一张高光、一张法线和一张颜色图吗?

【问题讨论】:

    标签: dynamic three.js preview


    【解决方案1】:

    是的。请参阅http://threejs.org/ 或下载的示例文件夹中的示例,其中许多具有纹理、法线贴图和高光贴图。

    素材预览可以是它自己的场景,就像任何其他类型的“正常场景”一样。

    【讨论】:

    • 嗨,yaku,感谢您的快速回复。我已经下载了一个带有搅拌机导出的示例,并将现有的几何图形替换为我从搅拌机中导出的几何图形。这工作正常。但是当我尝试使用规格、颜色和法线贴图复制另一个示例的纹理部分并将它们插入到我的文件中时,它不起作用。当我在 three.js 中纹理混合器导出时,有什么特别需要考虑的吗?
    • @user2524500 也许这是另一个问题的主题?您到底尝试了什么以及它如何不起作用?您是否遇到错误,浏览器是否获取正确的路径并实际下载文件?搅拌机导出与其他几何图形相比应该没有什么特别之处,除了可能与 UV 坐标相关的问题。无论如何,您可以先尝试使用在 Three 中创建的简单几何图形。尝试先让颜色和规格正常工作,然后处理法线贴图,因为这可能更难正常工作(或改用 bumb 贴图)。仅使用具有二维幂的纹理。
    • @user2524500 在您的用例中,使用scene.overrideMaterial = mypreviewmaterial; 强制所有几何图形使用您的预览材料可能更容易。
    • var jsonLoader = new THREE.JSONLoader(); jsonLoader.load("models/teapot.js", addModelToScene); varambientLight = new THREE.AmbientLight(0x111111);场景.add(环境光); } 功能 addModelToScene(几何,材料){ var material = new THREE.MeshFaceMaterial(材料); android = new THREE.Mesh(几何,材质); android.scale.set(10,10,10);场景.add(安卓); }
    • 这是示例中定义材质的部分,但是当我想更改某些内容并添加地图时,几何图形在浏览器中变得不可见。
    猜你喜欢
    • 1970-01-01
    • 2012-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-26
    • 1970-01-01
    • 1970-01-01
    • 2018-06-28
    相关资源
    最近更新 更多