three.js根据顶点加载立方体并为为立方体的每个面贴图

最新推荐文章于 2024-07-16 09:50:03 发布

lala_shine

最新推荐文章于 2024-07-16 09:50:03 发布

阅读量8.8k

点赞数 3

分类专栏： threejs 文章标签： three.js 三维

本文链接：https://blog.csdn.net/u013594477/article/details/81566370

版权

在天津噪声管理系统中，为了展示安静小区周边建筑物的三维分布情况，主要对每个建筑物进行贴图，本文以一个建筑物为例，给建筑物的不同表面增加不同的贴图材质。。
刚开始接触的时候，我以为已知立方体各个顶点的坐标还有每个顶点的连接顺序，通过两个三角形平面来构成立方体的每个面，然后通过指定一个materials数组用来加载材质就可以了，但是加载出来之后并没有得到预期的效果，材质并没有加载到每个面，立方体只是有了一个填充颜色，刚开始代码是这样的：

        //立方体
        var cubeGeometry = new THREE.Geometry();
        //创建立方体的顶点
        var vertices = [
            new THREE.Vector3(10, 10, 10), //v0
            new THREE.Vector3(-10, 10, 10), //v1
            new THREE.Vector3(-10, -10, 10), //v2
            new THREE.Vector3(10, -10, 10), //v3
            new THREE.Vector3(10, -10, -10), //v4
            new THREE.Vector3(10, 10, -10), //v5
            new THREE.Vector3(-10, 10, -10), //v6
            new THREE.Vector3(-10, -10, -10) //v7
        ];
        cubeGeometry.vertices = vertices;  //设置立方体的各个坐标点
        //创建立方的面，各个面的排列顺序
        var faces=[
            new THREE.Face3(0,1,2),
            new THREE.Face3(0,2,3),
            new THREE.Face3(0,3,4),
            new THREE.Face3(0,4,5),
            new THREE.Face3(1