美文网首页three.js简易教程
three.js(13)-三角形面

three.js(13)-三角形面

作者: 姜治宇 | 来源:发表于2021-11-24 11:18 被阅读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>
    <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

相关文章

  • three.js(13)-三角形面

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

  • THREE.js_的使用(例子)

    THREE.js 下载 THREE.js 官方文档 THREE.js 中文基础教程 THREE.MeshLine ...

  • Three.js

    Three.js 1. 概述 1.1 什么是Three.js Three.js是一个3D javascript库。...

  • 圆锥体和正方体的切面

    首先,我们先把正方体切一个面 ,把他切成两个三角形这两个三角形里面有两个长方形面,还有两个三角形面,而且圆锥体可以...

  • Three.js 之初级入门

    #. 前言 Three.js[https://github.com/mrdoob/three.js] 是基于原生 ...

  • 平面与三维网格求交

    平面与网格相交 计算截面与三角形网格的相交可以分解为三角形面与平面的相交。而三角形面与平面的相交又可以分解为线段与...

  • three.js 的网站连接

    three.js 官网 https://threejs.org/ three.js 官方例子 threejs.or...

  • three.js 3D动画效果

    three.js

  • Three.js 实现VR看房

    准备工作: 1、three.js https://threejs.org/build/three.js 2、搭建项...

  • vue+three.js开发

    Three.js Examples在vue-cli3中使用three.js的OBJLoader和MTLLoader...

网友评论

    本文标题:three.js(13)-三角形面

    本文链接:https://www.haomeiwen.com/subject/kgjntrtx.html