Three.js - 使用CubeTextureLoader在多维数据集的每个面上创建不同的图像

时间:2016-03-08 20:35:02

标签: javascript 3d three.js

我尝试使用CubeTextureLoader创建每边都有不同图像的多维数据集。我的流程是:

  1. 使用new THREE.CubeTextureLoader()
  2. 加载立方体纹理
  3. 使用立方体纹理
  4. 创建新材质
  5. 使用此材料创建多维数据集
  6. 绘制立方体
  7. 相关代码如下。我可以使用THREE.TextureLoader()为所有面部绘制一个单一材质的多维数据集,但是当我使用CubeTextureLoader时,屏幕上没有任何内容或任何控制台错误。

    var textureLoader = new THREE.CubeTextureLoader();
    
    textureLoader.load([
        'textures/face-1.jpg',
        'textures/face-2.jpg',
        'textures/face-3.jpg',
        'textures/face-4.jpg',
        'textures/face-5.jpg',
        'textures/face-6.jpg'
     ], function (texture) {
        var material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            map: texture
        });
    
        var cube = new THREE.Mesh(
            new THREE.BoxGeometry(20, 20, 20),
            material
        );
    
        // add & draw calls happen after all this
    });
    

    我猜测我使用了错误的材料类型或网格,但无法找到有关如何正确执行此操作的任何信息或示例。有什么想法吗?

2 个答案:

答案 0 :(得分:9)

正如Micnil所说, >>> if raw_input().lower() not in ['male','female','others']: ... raise ValueError("Give a valid gender") ... nothing Traceback (most recent call last): File "<stdin>", line 2, in <module> ValueError: Give a valid gender 用于CubeMap,用于SkyBox或EnvMap。

改为使用CubeTextureLoader

MeshFaceMaterial

答案 1 :(得分:5)

THREE.MultiMaterial也已删除,如:https://github.com/mrdoob/three.js/issues/10931

中所述

现在,您可以在网格构造函数中使用一组材质。例如:

let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
    new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );