有时候自定义几何体 需要贴各种图怎么办?
比如加载geojson数据
简单描述一下 计算方法吧...
const texture = this.app.textureLoader.load(
'https://www.wellyyss.cn/public/logo.png'
)
texture.wrapS = texture.wrapT = this._3d.RepeatWrapping;
texture.repeat.set( 1, 1);
const _3d = this._3d
const geometry = new _3d.BufferGeometry();
const vertices = [
0, 0, 0, // 0
30, 0, 0, // 1
30, 0, 30, // 2
0, 0, 30 // 3 这种顺序 将会 构成 三角面的 index角标规划
];
let normals = [];
const indices = new _3d.Uint16BufferAttribute([0, 3, 1, 1, 3, 2], 1);
// 每个数字代表 vertices 中的 顶点顺序 位置 —— 多种排序方法 构成三角面的正反面
const number = 10 // uv 的 x y 都是 从 0 到 1 ;
// 当 number > 1 时候 如果没有写 Repeat方式 那么 超出的 会显示空白
// 当 number < 1 时候 那么 就会显示 ‘裁剪后’得图片
const uvs = [
0, 0,
0, number,
number, number,
number, 0
]
// 类球面法向量计算
const v = new this._3d.Vector3()
vertices.forEach((e, i) => {
if(i > vertices.length -2) return
if(i % 3 === 0) {
v.x = vertices[i]
v.y = vertices[i + 1]
v.z = vertices[i + 2]
v.normalize();
normals.push( v.x, v.y, v.z );
}
})
// // 单平面 向上的 法向量
// normals = [
// 0, 0, 1,
// 0, 0, 1,
// 0, 0, 1,
// 0, 0, 1
// ]
geometry.setIndex(indices);
geometry.setAttribute('position', new this._3d.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new this._3d.Float32BufferAttribute(normals, 3));
geometry.setAttribute('uv', new this._3d.Float32BufferAttribute( uvs, 2));
const mesh = new _3d.Mesh(
geometry,
new _3d.MeshPhongMaterial({ side: _3d.DoubleSide, map: texture }),
);
this.scene.add(mesh)
图例示意
更多教程 见