03-08 06:25 阅读 218

Three.js中自定义控制几何体的点和面的属性

场景

Three.js中引入dat.gui库实现界面组件控制动画速度变量：

Three.js库中的geometry和其他大多数三维库中的一样，基本上是三维空间中的点集，

以及一些将这些点连接起来的面。举例来说，一个方块:

1、一个方块有8个角。每个角都可以定义为X, y和z坐标的一个组合。所以每个方块

都是三维空间中的8个点。在Three.js库中，这些点称为顶点(vertice) 。

2、一个方块有6个侧面，每个角有一个顶点。在Three.js库里，每个侧面称为面(face)。

当你使用Three. j s库提供的这些几何体时，你不必亲自定义所有的这些顶点和面。对于

一个方块来讲，你只要定义长宽高即可。Three js库会利用这些信息，在正确的位置创建一

个拥有8个顶点的几何体，并用正确的面连接起来。尽管你可以使用Three js库提供的几何

体，或者自动生成，但是你仍然可以通过定义顶点和面，手工创建几何体。创建方法可以参

考下面的代码片段:

        //定义顶点
        var vertices = [
            new THREE.Vector3(1, 3, 1),
            new THREE.Vector3(1, 3, -1),
            new THREE.Vector3(1, -1, 1),
            new THREE.Vector3(1, -1, -1),
            new THREE.Vector3(-1, 3, -1),
            new THREE.Vector3(-1, 3, 1),
            new THREE.Vector3(-1, -1, -1),
            new THREE.Vector3(-1, -1, 1)
        ];

        //定义面
        var faces = [
            new THREE.Face3(0, 2, 1),
            new THREE.Face3(2, 3, 1),
            new THREE.Face3(4, 6, 5),
            new THREE.Face3(6, 7, 5),
            new THREE.Face3(4, 5, 1),
            new THREE.Face3(5, 0, 1),
            new THREE.Face3(7, 6, 2),
            new THREE.Face3(6, 3, 2),
            new THREE.Face3(5, 7, 0),
            new THREE.Face3(7, 2, 0),
            new THREE.Face3(1, 3, 4),
            new THREE.Face3(3, 6, 4),
        ];

        //定义方块
        var geom = new THREE.Geometry();
        geom.vertices = vertices;
        geom.faces = faces;
        geom.computeFaceNormals();

        //定义材质
        var materials = [
            new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})

        ];

        //合并多个材质
        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
        mesh.children.forEach(function (e) {
            e.castShadow = true
        });

        //方块添加进场景
        scene.add(mesh);

注：

博客：

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

上面用到的不是一个单一的材质，而是有两个元素的材质数组。

除了显示一个绿色透明的方块之外，还显示一个线框。

完整示例代码






    dat.gui的使用
    
    
    




"WebGL-output">

实现效果

原文：https://www.cnblogs.com/badaoliumangqizhi/p/15111151.html