Question

我正在尝试将类似于示例的内容合并到：

http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy.html

我已经让立方体本身工作正常，但我想在每个立方体上映射不同的图像。

例如，我希望其中一个多维数据集在每一侧都包含一个“Blogger”图标，并在另一个多维数据集的每一侧包裹一个“Facebook”图标，并在每一侧包裹一个“Twitter”图标第三个立方体，等等，

我只使用一个立方体就可以使用mapurl，但是当涉及到Object3D组时，我无法映射图像。

我是WebGL和Three Js的新手，非常感谢任何帮助，谢谢！：）

Answer 1

这是r53以来的完成方式：

var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshFaceMaterial( [
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image1.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image2.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image3.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image4.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image5.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image6.jpg' ) } )
] );

var mesh = new THREE.Mesh( geometry, material );

Answer 2

目前（2017年12月）ImageUtils.loadTexture，MeshFaceMaterial和CubeGeometry不再使用（不建议使用）。 https://threejs.org/docs/#api/deprecated/DeprecatedList

这样做的新方法是：

var geometry = new THREE.BoxGeometry( 10, 10, 10);
var material = [
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image1.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image2.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image3.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image4.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image5.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image6.jpg' ) } )
];

var mesh = new THREE.Mesh( geometry, material );

这是指向解释该流程的优秀简短教程的链接： https://www.youtube.com/watch?v=l77yAZ0E950

三个Js如何在一组立方体中的立方体的所有边上映射不同的随机图像

2 个答案: