three.js(13)-三角形面

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

<!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

最后编辑于：2021.12.15 10:35:56

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,922评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,591评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,546评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,467评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,553评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,580评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,588评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,334评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,780评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,092评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,270评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,925评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,573评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,194评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,437评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,154评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,127评论 2赞 352

three.js(13)-三角形面

推荐阅读更多精彩内容