gpt4 book ai didi

three.js - 如何在 Three.js 立方体中使用多种 Material ?

转载 作者:行者123 更新时间:2023-12-04 01:40:21 24 4
gpt4 key购买 nike

我正在尝试使用 Three.js 渲染一个带有 6 个不同图像的立方体。

THREE.CubeGeometry 的构造函数如下所示:

THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides )

我从代码中可以看出,“ Material ”应该是一种 Material ,或者是由 6 种不同 Material 组成的数组,但是这里传入的 Material 似乎从未在渲染时使用过。

相反,提供给 Mesh 构造函数的单一 Material 用于所有 6 个面。
var face_materials = ... <load 6 textures here>...
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored?
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead

即使我将 null 或 undefined 作为“some_material”传递,它似乎也覆盖了 face_material 并且不渲染任何内容。

有没有办法使用 CubeGeometry 来完成这项工作?还是我必须分别创建 6 个面并将它们添加到场景中?

最佳答案

您需要为网格使用 THREE.MeshFaceMaterial。这是示例代码:

var materials = [];
for (var i=0; i<6; i++) {
var img = new Image();
img.src = i + '.png';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function() {
this.tex.needsUpdate = true;
};
var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex});
materials.push(mat);
}
var cubeGeo = new THREE.CubeGeometry(400,400,400,1,1,1, materials);
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial());

关于three.js - 如何在 Three.js 立方体中使用多种 Material ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8820591/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com