• three.js之访问几何体数据与几何体的旋转平移

    文章目录

    专栏目录请点击

    访问几何体数据

    简介

    1. 一般我们在开发项目的时候，可能会加载外部模型，这个时候，我们就需要获取到几何体的顶点数据
    2. 这个时候，我们尽量先熟悉BoxGeometry和BufferGeometry这样的结构

    例子

    对于BoxGeometry、PlaneGeometry、SphereGeometry等几何体的基类是Geometry

    BoxGeometry

    我们先写下面的例子，然后看打印

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  style>
  
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js">script>
  
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js">script>
head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    console.log(geometry);
    console.log('几何体顶点位置数据',geometry.vertices);
    console.log('三角面数据',geometry.faces);

    // var geometry = new THREE.PlaneBufferGeometry(100, 100); //创建一个立方体几何对象Geometry
    // console.log(geometry);
    // console.log('几何体顶点位置数据',geometry.attributes.position);
    // console.log('几何体索引数据',geometry.index);

    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
      // wireframe:true,//线框模式渲染
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();
    //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);
  script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85

    那么常用的属性如下

    1. geometry.vertices:顶点的位置数据

    2. geometry.colors:顶点的颜色数据

    3. geometry.faces:多个三角形面构成的数组 ，如图在这里插入图片描述

      1. a,b,c顶点1，2，3的索引
      2. 法线
        1. normal
        2. vertexNormals
      3. 颜色
        1. color
        2. vertexColors

    PlaneBufferGeometry

    PlaneBufferGeometry表示一个矩形平面几何体

    1. 我们可以把上面的注释代码打开，并注释上面的代码
    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// console.log(geometry);
// console.log('几何体顶点位置数据',geometry.vertices);
// console.log('三角面数据',geometry.faces);

var geometry = new THREE.PlaneBufferGeometry(100, 100); //创建一个立方体几何对象Geometry
console.log(geometry);
console.log('几何体顶点位置数据',geometry.attributes.position);
console.log('几何体索引数据',geometry.index);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    那么，我们常用的属性如下

    1. geometry.attributes，如图在这里插入图片描述
      1. attributes.position:顶点的位置
      2. attributes.color:顶点的颜色数据
      3. attributes.normal:顶点的法向量数据
      4. attributes.uv:纹理贴图坐标
    2. geometry.index:顶点的索引数据

    旋转、缩放、平移变换

    一般结合体的旋转、缩放、平移变换通过一下方法进行

    缩放

    • scale()

    平移

    • translate()

    旋转

    • rotateX()
    • rotateY()
    • rotateZ()

    这些旋转本质上都是改变几何体的顶点坐标位置

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>源码对应电子书:百度"three.js 郭隆邦"title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    style>
    
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js">script>
    
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js">script>
head>

<body>
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
        // 几何体xyz三个方向都放大2倍
        geometry.scale(2, 2, 2);
        // 几何体沿着x轴平移50
        geometry.translate(50, 0, 0);
        // 几何体绕着x轴旋转45度
        geometry.rotateX(Math.PI / 4);
        // 居中：偏移的几何体居中
        geometry.center();
        console.log(geometry.vertices);

        var material = new THREE.MeshLambertMaterial({
            color: 0x0000ff
        }); //材质对象Material
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
        controls.addEventListener('change', render);
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86

    我们可以修改如下属性，来进行几何体的旋转和平移

    // 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
// 居中：偏移的几何体居中
geometry.center();
console.log(geometry.vertices);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    注意

    1. 一般几何体的旋转平移缩放都是通过变换顶点，但是网格模型Mesh不同
    2. Mesh模型的变换是通过改变模型的本地矩阵、世界矩阵，改变坐标系来完成的
  • 相关阅读:
    SpringBoot面试题3：Spring Boot 的核心注解是哪个？它主要由哪几个注解组成的？
    栈与队列：设计循环队列
    衡量算法的性能-时空复杂度分析
    深度学习(18):nerf、nerf-pytorch代码运行与学习
    使用CubeMX生成STM32的ThreadX实时操作系统工程模板
    Vue2 Element description组件 列合并
    peer_connection_interface参数
    Flink SQL: UNLOAD Statements
    探索状态驱动开发的奇妙世界——Cola-StateMachine的介绍与使用
    机器人制作开源方案 | 家庭清扫拾物机器人
  • 原文地址：https://blog.csdn.net/youhebuke225/article/details/128052715