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

已于 2022-11-27 10:34:43 修改
阅读量832 收藏
点赞数
分类专栏： three.js 文章标签： javascript 前端 vue.js
于 2022-11-27 10:26:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youhebuke225/article/details/128052715
版权

文章目录

专栏目录请点击

访问几何体数据

简介

  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>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <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. 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. 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>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <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>

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

// 几何体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. 一般几何体的旋转平移缩放都是通过变换顶点，但是网格模型Mesh不同
  2. Mesh模型的变换是通过改变模型的本地矩阵、世界矩阵，改变坐标系来完成的
youhebuke225
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs+shader绘制常用的图形
榴莲不好吃的专栏
07-19 3509
x轴渐变从圆点向右，由0到1，越来越不透明，vPosition.x的-1到0的部分，透明度按0处理。[-1,0]的部分相乘的结果和[0,1]相乘的结果是一样的，会得到对称的从两边到中间越来越透明，x*x得到x镜像叠加x*x==-x*-x；x相加，透明度超过1的,按1处理,所以范围只有x的一半。[0,1]透明度由0到1，超过1的透明度都按1处理。x+y的基础上范围缩小，透明度超过1的,按1处理。x*y的基础上范围缩小，透明度超过1的,按1处理。.................................
ThreeJs开发（移动，旋转，相机，纹理，鼠标事件等源代码）
11-16
threejs开发小实例，实现了创建场景灯光，摄像机，对物体的移动，旋转，以及摄像机的移动旋转，动画效果，灯光设置（源代码）
threejs学习之自定义几何体BufferGeometry
最新发布
旅行中的伊蕾娜的博客
05-04 119
第二种方法是只编写出需要的坐标，不编写完整绘制点，顺序也可以打乱，通过索引，控制编写的坐标应该按照什么顺序进行绘制。这次学习了两个自定义几何体的方法，第一个通过编写完整的顶点坐标，绘制一个正方形。去掉重复的右上和坐下坐标点，然后编写索引，这样就会按照索引来取坐标点进行绘制。几何体是由坐标点绘制成线，线绘制成三角形，多个三角形拼接成的。
threejs 几何体变换
征途人生&梦
01-22 1529
参考： http://www.yanhuangxueyuan.com/Three.js_course/transformation.html#1   //创建场景对象 var scene = new THREE.Scene(); // var cube = new THREE.BoxGeometry(100, 100, 100); // var...
three.js插入多个元素 并设置偏移值
jiuweiyaoy的博客
12-24 1000
和之前插入元素相同，声明不同的对象，设置位置参数，并添加到场景中 如下列代码
threejs 形状几何体,仅扩展Three.js几何体
weixin_42545163的博客
01-30 258
I'm trying to scale the geometries y-axis. This made my cube scale both up and down. I think mesh.transformY works to animate the cube up half of the scaling value. This would make it look like the cu...
threejs球体旋转与场景旋转_Threejs 创建一个虚拟城市三维场景
biyusr的专栏
04-29 604
前情回顾 前几篇文章大概讲述了threejs如何创建场景,创建几何体,纹理贴图等... 本篇文章主要讲述threejs如何去搭建一个智慧城市虚拟场景(主要讲述如何去加载模型以及加载贴图) 开发前准备 1.从官方下载threejs的包,引入到项目中 2.智慧城市模型一份( 本篇文章主要加载的 OBJ+ MTL) 3.具备前几章节讲到的一些基础知识(如果还不会的话请看前几篇文章哦) 4.学习了解MTLLoader.js和OBJLoader.js(加载模型主要用到这两个js) 5....
Three.js学习之几何形状
10-21
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。
Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_
10-03
利用threejs实现海洋温度颜色体绘制
three.js3维坐标系+绘制立方体（带边框）
02-28
1、three.js绘制3维坐标系； 2、绘制多个立方体； 3、立方体设置边框； 4、立方体表面绘制线条；
three.js旋转立方体
04-18
three.js示例 使用three.js 实现的旋转立方体 代码注释完善
three. js的人体解剖图.zip
07-14
three. js的人体解剖图
Three.js物体绕轴心旋转
weixin_45547217的博客
10-09 1539
Three.js如何让叶轮转起来 ** Three.js如何让叶轮转起来 做主机房的监控，没有代码基础的我开始用Three.js做3维的机房视图。用叶轮的转动代表水泵的运行，为了实现这个效果，百度了好多代码，也改动好多代码，好像还动过OrbitControls这里的源码，但应该影响不大，它是会转的但我不会截动图 <script src="../Scripts/build/three.js"></script> <script type="text/javascri
Threejs系列--2几何体
小猴子喝牛奶的博客
07-07 1109
Threejs系列--案例一（掌握场景设置）序言Treejs简介 随着上章基本知识的了解，相信你应该对Treejs基本流程及一些常见术语等有了基本的认识，本章将对场景设置进行详细讲解。 Treejs简介 treejs是基于原生WebGL封装运行的三维引擎。可以使用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 ...
three.js学习笔记(十五)——着色器图案
hongsir的博客
05-24 2212
介绍 通常在创建着色器时，我们需要绘制特定如星星、圆圈、光透镜、波等图案。 初始设置 像上篇笔记中的一样，场景中有个使用ShaderMaterial着色器材质的PlaneBufferGeometry平面缓冲几何体 const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32) // Material const material = new THREE.ShaderMaterial({ vertexShader: testVertexSha
无限灯光(1)
qq_21476953的博客
12-24 502
翻译自: https://tympanus.net/codrops/2019/11/13/high-speed-light-trails-in-three-js/ 代码: https://github.com/dslming/learningComputerGraphics/tree/master/ThreejsLearning/017-InfiniteLights 无限灯光 灵感来自 海...
Three.js几何体旋转、缩放、平移变换
u014291990的博客
11-29 2187
几何体旋转、缩放、平移变换 本文是Three.js电子书的2.8节 通过前7节课的学习，我相信你已经对Threejs几何体内部顶点构成有了一定了解。 Geometry、BufferGeometry.scale().translate().rotateX().rotateY().rotateZ()缩放平移绕X轴旋转绕Y轴旋转绕Z轴旋转 几何体Geometry对象有一系列的顶点属性，也封装了一系列的方...
小程序使用threejs第三篇—介绍几种几何模型
WeiHan_Seven的博客
02-26 5769
在上一篇[小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转](https://blog.csdn.net/WeiHan_Seven/article/details/104493821)中，我们还遗留了一个小问题，就是展示的立方体如何随手势旋转缩放，当我们处理了这个问题，接下来介绍几种几何模型，大家可以试着把他们添加到场景下再渲染出来...
使用Three.js 心得系列一 如何创建三维网格
霍城延的随笔
12-16 2393
three.js如何创建三维网格。 官方提供了gridHelper的方式： 先看下我的测试效果： 上源码： 源码为完整的源码，其中包括一个小实例，点击也年的移动按钮，人物会沿着X的方向，前进行走。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试三维图</title> <script src="j.
vue three.js 立方体
08-18
9. 可以通过添加控制器(Controls)来实现用户交互，例如旋转、缩放和平移。 10. 最后，将Vue组件中的场景、相机和渲染器进行清理，以避免内存泄漏。 请注意，上述步骤只是一个简单的示例，你可以根据自己的需求和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值