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

Three Js How To Map A Different Random Image On All Sides Of A Cube In A Group Of Cubes

本文关键字：立方体 侧面 图像 随机 映射 一组 Js 三个      更新时间：2023-09-26

我正在尝试合并类似的例子:

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

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

例如，我希望其中一个多维数据集的每一侧都包裹着一个"Blogger"图标，另一个多维数据集的每一侧都包裹着一个"Facebook"图标，第三个多维数据集的每一侧都包裹着一个"Twitter"图标，…等,等。

我已经得到了一个mapurl工作良好，只有一个立方体，但我有麻烦映射图像，当它涉及到Object3D组。

我是WebGL和Three Js的新手，任何帮助都会非常感激，谢谢!:)

自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 );

此时此刻(2017年12月)loadTexture, MeshFaceMaterial和CubeGeometry不再使用(已弃用)。https://threejs.org/docs/api/弃用/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

相关文章：