three.js(13)-三角形面

作者: 姜治宇 | 来源:发表于2021-11-24 11:18 被阅读0次

three.js(13)-三角形面
THREE.js_的使用(例子)
Three.js
圆锥体和正方体的切面
Three.js 之初级入门
平面与三维网格求交
three.js 的网站连接
three.js 3D动画效果
Three.js 实现VR看房
vue+three.js开发

我们知道，两点确定一条直线，三点可以确定一个平面，也就是三角形面。
我们所看到的网格模型，实际上都是根据顶点坐标，绘制成一个个三角形面，然后拼接而成的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="webgl"></div>
</body>

</html>
<script>
    var scene = new THREE.Scene();
    console.log(scene);
    //添加坐标轴
    var axes = new THREE.AxesHelper(300);//50表示xyz轴的长度，红:x,绿:y,蓝:z
    scene.add(axes);
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

    // pop()：删除数组的最后一个元素   shift：删除数组的第一个元素
    geometry.faces.pop();//割掉一个三角形
    // geometry.faces.pop();
    geometry.faces.shift();
    geometry.faces.shift(); //割掉整个面
    console.log('faces>>>', geometry.faces);

    var material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
        side: THREE.DoubleSide, //两面可见
    }); //材质对象Material
    //合成对象
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    // 光源设置，打光效果比较明显
    var point = new THREE.PointLight(0xffffff);
    point.position.set(300, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //创建相机对象
    var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
    camera.position.set(200, 200, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
        antialias: true //消除锯齿
    });
    renderer.setSize(1000, 500);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    renderer.render(scene, camera);//渲染必须有场景和相机两个对象

    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);
    render();
    function render() {
        renderer.render(scene, camera);//渲染必须有场景和相机两个对象
        mesh.rotateY(0.01);

        requestAnimationFrame(render);//递归调用
    }
</script>

tri.gif

那么如何自己实现一个面呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="webgl"></div>
</body>

</html>
<script>
    var scene = new THREE.Scene();
    console.log(scene);
    //添加坐标轴
    var axes = new THREE.AxesHelper(300);//50表示xyz轴的长度，红:x,绿:y,蓝:z
    scene.add(axes);
    var geometry = new THREE.BufferGeometry();
    console.log(geometry);
    var points = new Float32Array([
        -5, 5, 5,
        5, 5, 5,
        5, 5, -5,
        -5, 5, -5
    ]);
    geometry.attributes.position = new THREE.BufferAttribute(points, 3);
  
    var material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
        side: THREE.DoubleSide, //两面可见
    }); //材质对象Material
    //合成对象
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    // 光源设置，打光效果比较明显
    var point = new THREE.PointLight(0xffffff);
    point.position.set(300, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //创建相机对象
    var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 200);
    camera.position.set(10, 20, 20); //设置相机位置
    camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向(指向的场景对象)


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
        antialias: true //消除锯齿
    });
    renderer.setSize(1000, 500);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    renderer.render(scene, camera);//渲染必须有场景和相机两个对象

    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);
    //增加鼠标拾取效果
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
        renderer.render(scene, camera);
    });
</script>

sanjiaoxing.gif

这样就实现了一个三角形。那如何实现一个完整的矩形呢？
三个点只能决定一个三角形，如果要画一个矩形，那就要再画一个三角形。
而我们给的顶点一共是4个，那前面4个画完了一个三角形，后面一个顶点找不到另外两个点，肯定是画不出来了。
一种办法是再给出两个顶点，但这样就太啰嗦了。我们可以指定一下顶点的索引位置。

img.png

我们把图形的顶点做个索引编号，其中0,1,2顶点可以确定一个三角形面，而2,3,0可以再确定一个三角形面，二者合起来就是一个完整的矩形了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="webgl"></div>
</body>

</html>
<script>
    var scene = new THREE.Scene();
    console.log(scene);
    //添加坐标轴
    var axes = new THREE.AxesHelper(300);//50表示xyz轴的长度，红:x,绿:y,蓝:z
    scene.add(axes);
    var geometry = new THREE.BufferGeometry();
    console.log(geometry);
    var points = new Float32Array([
        -5, 5, 5,
        5, 5, 5,
        5, 5, -5,
        -5, 5, -5
    ]);
    var index = [
        0,1,2,
        2,3,0
    ];
    geometry.attributes.position = new THREE.BufferAttribute(points, 3);
    geometry.setIndex(index); 
    var material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
        side: THREE.DoubleSide, //两面可见
    }); //材质对象Material
    //合成对象
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

    scene.add(mesh); //网格模型添加到场景中
    // 光源设置，打光效果比较明显
    var point = new THREE.PointLight(0xffffff);
    point.position.set(300, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //创建相机对象
    var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 200);
    camera.position.set(10, 20, 20); //设置相机位置
    camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向(指向的场景对象)


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
        antialias: true //消除锯齿
    });
    renderer.setSize(1000, 500);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    renderer.render(scene, camera);//渲染必须有场景和相机两个对象

    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);
    //增加鼠标拾取效果
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
        renderer.render(scene, camera);
    });
</script>

rect1.gif

我们打印一下BoxGeometry信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="webgl"></div>
</body>

</html>
<script>
    var scene = new THREE.Scene();
    //添加坐标轴
    var axes = new THREE.AxesHelper(300);//50表示xyz轴的长度，红:x,绿:y,蓝:z
    scene.add(axes);
    var geometry = new THREE.BoxGeometry(10, 10, 10); //创建一个立方体几何对象Geometry
    console.log(geometry);
    
    var material = new THREE.MeshLambertMaterial({
        color: 0x00ffff
    });
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh);
    //创建相机对象
    var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
    camera.position.set(20, 20, 20); //设置相机位置
    camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向(指向的场景对象)


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
        antialias: true //消除锯齿
    });
    renderer.setSize(1000, 500);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    renderer.render(scene, camera);//渲染必须有场景和相机两个对象

    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);

</script>

face.png

其实faces放的就是索引信息，vertices放的是顶点，threejs已经给我们封装好了。这样我们可以按图索骥，自己实现一个正方体了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="webgl"></div>
</body>

</html>
<script>
    var scene = new THREE.Scene();
    //添加坐标轴
    var axes = new THREE.AxesHelper(300);//50表示xyz轴的长度，红:x,绿:y,蓝:z
    scene.add(axes);
    var geometry = new THREE.BufferGeometry();
    console.log(geometry);
    var points = new Float32Array([
        5, 5, 5,
        5, 5, -5,
        5, -5, 5,
        5, -5, -5,
        -5, 5, -5,
        -5, 5, 5,
        -5, -5, -5,
        -5, -5, 5
    ]);
    var index = [
        0, 2, 1,
        2, 3, 1,
        4, 6, 5,
        6, 7, 5,
        4, 5, 1,
        5, 0, 1,
        7, 6, 2,
        6, 3, 2,
        5, 7, 0,
        7, 2, 0,
        1, 3, 4,
        3, 6, 4,
    ];
    geometry.attributes.position = new THREE.BufferAttribute(points, 3);
    geometry.setIndex(index);
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ffff
    });

    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh);
    //创建相机对象
    var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
    camera.position.set(20, 20, 20); //设置相机位置
    camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向(指向的场景对象)


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
        antialias: true //消除锯齿
    });
    renderer.setSize(1000, 500);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    renderer.render(scene, camera);//渲染必须有场景和相机两个对象

    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);

</script>

rect2.png