THREE.js 几何图不出现 [英] THREE.js Geometry map does not appear

问题描述

在我在自定义几何图形上加载图像贴图之后，它代表上图中的棕色几何图形:

Following I'm loading a image map on a custom geometry, it represents the brown colored geometry on the picture above:

var aqua_ground_geo = new THREE.Geometry();

var top0 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top1 = new THREE.Vector3(aqua_ground_geo_x_POS, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top2 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_f_y'], aqua_ground_geo_z_POS);

aqua_ground_geo.vertices.push(top0);
aqua_ground_geo.vertices.push(top1);
aqua_ground_geo.vertices.push(top2);

aqua_ground_geo.faces.push( new THREE.Face3(0,1,2) );

aqua_ground_geo.computeFaceNormals();
aqua_ground_geo.computeVertexNormals();

var textureUrl = "http://www.lifeguider.de/wp-content/uploads/aquag/bodengrund/dennerle_kies_naturweiss_1-2mm.jpg";
var aqua_bodengrund_tex = new THREE.TextureLoader().load( textureUrl );
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
    map: aqua_bodengrund_tex,
    color: 0xffffff,
} );
aqua_bodengrund_mat.shading = THREE.FlatShading;
aqua_bodengrund_mat.side = THREE.DoubleSide;

var aqua_bodengrund = new THREE.Mesh( aqua_ground_geo,aqua_bodengrund_mat);

在一个简单的 THREE.BoxGeometry 上，使用相同的材​​料(它代表上图中的立方体)按预期工作:

On a simple THREE.BoxGeometry all works as expected with the same material (it represents the cube in the picture above):

var lala = new THREE.BoxGeometry( 100, 100, 100 );
var lala2 = new THREE.Mesh( lala,aqua_bodengrund_mat);

我不是 3D 专家，我的代码中缺少哪些图像纹理可以正确显示的内容?

I'm not an expert in 3D, what is missing in my code that the image texture will be shown correctly?

推荐答案

您需要在 THREE.TextureLoader 的回调中应用纹理.另请查看文档此处；第二个参数 (onLoad) 是回调.

You need to apply the texture in the callback of the THREE.TextureLoader. Check also the documentation here; the second argument (onLoad) is the callback.

var textureUrl = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif";
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
    color: 0xffffff
});
var onLoad = function( texture ){
    aqua_bodengrund_mat.map = texture;
    aqua_bodengrund_mat.needsUpdate = true;
}
var loader = new THREE.TextureLoader();
loader.load( textureUrl, onLoad );

有关演示，请参阅此小提琴.

See this fiddle for a demo.

如果您有自定义几何体，您还需要计算 UV 以正确显示纹理.我使用这里的答案在另一个在这里小提琴

In case you have a custom geometry you also need to calculate the UVs for showing the texture correctly. I used this answer here to calculate them in another fiddle here

注意.我小提琴中的 UV 是针对 XY 平面中的面计算的，如果您的面在另一个平面中，则必须相应地更新...

Note. The UVs in my fiddle are calculated for faces in the XY plane, if your faces are in another plane you will have to update accordingly...

这篇关于THREE.js 几何图不出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！