three.js所：如何获得一个网状

工作的多种材料我有一个大问题，three.js所：three.js所：如何获得一个网状

我想用不同颜色的每个面上一个简单的立方体。我已经试过这样：

// set the scene size 
    var WIDTH = jQuery('#showcase').width() - 20, HEIGHT = jQuery('#showcase').height(); 

    // set some camera attributes 
    var VIEW_ANGLE = 45, ASPECT = WIDTH/HEIGHT, NEAR = 0.1, FAR = 10000000; 

    this.container = jQuery('#showcase'); 

    this.renderer = new THREE.WebGLRenderer(); 
    this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
    this.scene = new THREE.Scene(); 
    this.scene.add(this.camera); 

    // camera start position 
    this.camera.position.z = this.model.radius; 
    this.camera.position.y = this.model.cameraY; 
    this.camera.position.x = 0; 
    this.camera.lookAt(this.scene.position); 

    this.renderer.setSize(WIDTH, HEIGHT); 
    this.container.append(this.renderer.domElement); 

    //Multiple Colors 
    var materials = [new THREE.MeshBasicMaterial({ 
     color : 0xFF0000 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x00FF00 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x0000FF 
    }), new THREE.MeshBasicMaterial({ 
     color : 0xAA0000 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x00AA00 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x0000AA 
    })]; 

    this.geometry = new THREE.CubeGeometry(100, 100, 100, materials); 

    this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial()); 

    this.scene.add(this.mesh); 

    // create a point light 
    this.pointLight = new THREE.PointLight(0xFFFFFF); 
    this.pointLight.position = this.scene.position; 
    this.scene.add(this.pointLight); 

    this.renderer.render(this.scene, this.camera);

但我收到此错误信息： “遗漏的类型错误：无法读取的未定义的属性‘地图’”在three.js所行19152。

对我来说，这似乎是一个webgl渲染器的问题。在大多数我在这里和其他地方发现的主题中，他们都使用画布渲染器。但我想留在webgl渲染器中。

有没有人知道这个问题的一些事情？非常感谢:-)

来源

2013-04-02 user2235189

你可以找到你的答案在 http://stackoverflow.com/questions/13922130/trying-to-color-a-cube-in-three-js/13922407 – gaitat

试试这个

this.geometry = new THREE.CubeGeometry(100, 100, 100); 
this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial(materials));

来源

2013-04-02 08:45:49 samulisoderlund

但它是如何分配材料面临？ – user151496

这篇文章提供了关于材料映射到面的更多信息：https：//stackoverflow.com/questions/45796655/what-is-the-status-on-multiple-materials – duhaime

也许尝试与阵列工作。

与I使用此代码为用不同的材料一天空盒three.js所49（如果它与57的工作原理的不要）：

var axes = new THREE.AxisHelper(); 
scene.add(axes); 

var materialArray = []; 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    var skyboxGeom = new THREE.CubeGeometry(5000, 5000, 5000, 1, 1, 1, materialArray); 
    var skybox = new THREE.Mesh(skyboxGeom, new THREE.MeshFaceMaterial()); 
    skybox.flipSided = true; 
    scene.add(skybox);

来源

2013-04-02 14:09:42 Larkis

尝试此也，应用vertexcolors。

var geom = new THREE.BoxGeometry(20, 20, 20); 
var faceIndices = ['a', 'b', 'c']; 
var vertexIndex, point; 
mat = new THREE.MeshBasicMaterial({ 
vertexColors: THREE.VertexColors 
}); 
mesh = new THREE.Mesh(geom, mat); 
scene.add(mesh); 
geom.faces.forEach(function (face) { // loop through faces 
for (var i = 0; i < 3; i++) { 
vertexIndex = face[ faceIndices]; 
point = geom.vertices[vertexIndex]; 
color = new THREE.Color(
point.x + 0.5, 
point.y + 0.5, 
point.z + 0.5 
); 
face.vertexColors[ i ] = [![the output will be as in the attached picture][1]][1]color; 
} 
});

来源

2017-08-09 05:43:30

three.js所：如何获得一个网状

回答

相关问题