3

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

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

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

例如，我希望其中一个立方体的每一面都有一个“Blogger”图标，另一个立方体的每一侧都有一个“Facebook”图标，第三个立方体的每一侧都有一个“Twitter”图标，……等等，等等。

我已经得到了一个 mapurl 可以在一个立方体上正常工作，但是当涉及到 Object3D 组时，我在映射图像时遇到了问题。

我是 WebGL 和三个 Js 的新手，任何帮助将不胜感激，谢谢！:)

4

2 回答 2

3

这就是它的完成方式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 );
于 2013-01-02T21:10:43.887 回答
0

目前（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

于 2017-12-13T12:59:35.537 回答