Three.js几何体BufferGeometry①

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量193 收藏
点赞数
文章标签： javascript 开发语言 前端 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43900698/article/details/131455206
版权

  最近学习Three.js，此贴供学习记录之用。
  学习视频：Three.js教程。讲解很详细，也有配套的笔记，但不包含前端基础知识的讲解，如果是纯小白的朋友，可以找这位up之前的教程学习一下。

文章目录

类型化数组

  有关类型化数组的详细介绍请看这里。

类型化数组将实现拆分为缓冲ArrayBuffer和视图DataView两部分，缓冲为具体数据，视图为数据格式，可对同一缓冲创建多个视图。
我的理解是缓冲像一盒水，视图就像是不同形状的冰块模具，过改变模具来得到不同形状的冰块。

模型对象的导出和引入

export default导出

export default导出：
1、本模块唯一默认对外接口，只能出现一次
2、只能先定义后导出 
export default points;
  • export default对应引入
export default对应引入：
1、引入不加花括号
2、引入变量可自定义名字 
import points from './0621_1module.js';

export导出

export导出：
1、export可以有多个
2、可以各自分开导出，也可以多个同时导出
3、可以先定义后导出，也可以在定义的同时导出 如：export const…
4、可使用as进行导出重命名 如：export { mesh as box, … } 
// 两种方法均可
export {line, lineLoop, lineSegments};
export {line as l1, lineLoop, lineSegments};
  • export对应引入
export对应引入：
1、可以一次用*引入所有，也可以用{}引入任意数量
2、引入变量的名字不可以自定义
3、可使用as进行导入重命名 如：import { mesh as box, … } … 
// 两种方法均可
import * as LINE from './0621_2module.js';
import { line } from './0621_2module.js';
  • .html文件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>0621_1</title>
        <style>
            body{
                overflow: hidden;
                margin: 0;
            }
        </style>
    </head>

    <body>
        <script type="importmap">
            {
                "imports":{
                    "three": "./three.js/build/three.module.js",
                    "three/addons/": "./three.js/examples/jsm/"
                }
            }
        </script>

        <script src="./0621_1.js" type="module"></script>
    </body>
</html>

一、点模型

  • .js文件
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// export default引入模型对象
/* export default对应引入:
    1、引入不加花括号
    2、引入变量可自定义名字
*/
import points from './0621_1module.js';

const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper(100, 100, 100);
scene.add(axesHelper);

// 将点模型加入场景
scene.add(points);

// 光源设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(300, 300, 300);
scene.add(directionalLight);

const width = window.innerWidth;
const height = window.innerHeight;
// 相机设置
const camera = new THREE.PerspectiveCamera(30, width/height, 0.1, 3000);
camera.position.set(500, 500, 500);
scene.add(camera);

// 渲染设置
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);

document.body.appendChild(renderer.domElement);

// 模型预览
const controls = new OrbitControls(camera, renderer.domElement);

// 渲染循环
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();
  • 创建缓冲几何体对象
// 创建缓冲几何体对象
const geometry = new THREE.BufferGeometry();
  • 类型数组创建顶点类型数据
// 类型数组创建顶点类型数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
])
  • 创建属性缓冲区对象
    创建属性缓冲区对象可将类型数组分割为坐标表示（xyz轴）
// 创建属性缓冲区对象   将类型数组做具体分割
const attribute = new THREE.BufferAttribute(vertices, 3);
  • 设置几何体位置
// 使用类型数组设置几何体对象的位置属性
geometry.attributes.position = attribute;
  • 创建材质为点材质
const material = new THREE.PointsMaterial({
    color: 0xff3e2e,
    // 点对象像素尺寸
    size: 10,
});
  • 创建实体
// 创建点模型对象 
const points = new THREE.Points(geometry, material);
  • 模型导出
// 导出模型对象
/* export default导出：
    1、本模块唯一默认对外接口，只能出现一次
    2、只能先定义后导出
*/
export default points;

完整模型文件

// 引入three.js
import * as THREE from 'three';

// 创建一个几合体对象
const geometry = new THREE.BufferGeometry();
// 使用类型数组创建顶点类型数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象   将类型数组做具体分割
const attribute = new THREE.BufferAttribute(vertices, 3);
// 使用类型数组设置几何体对象的位置属性
geometry.attributes.position = attribute;
// 点渲染材质
const material = new THREE.PointsMaterial({
    color: 0xff3e2e,
    // 点对象像素尺寸
    size: 10,
})
// 创建点模型对象 
const points = new THREE.Points(geometry, material);

// 导出模型对象
/* export default导出：
    1、本模块唯一默认对外接口，只能出现一次
    2、只能先定义后导出
*/
export default points;

点模型

二、线模型

  • .js文件
// js文件引入
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// export引入模型对象
/* export对应引入：
    1、可以一次用*引入所有，也可以用{}引入任意数量
    2、引入变量的名字不可以自定义
    3、可使用as进行导入重命名   如：import { mesh as box, ... } ...
*/
import * as LINE from './0621_2module.js';
// import { line } from './0621_2module.js';

// 场景设置
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(100, 100, 100);
scene.add(axesHelper);

// 线模型对象加入场景
scene.add(LINE.line);

// 灯光设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(150, 150, 150);
scene.add(directionalLight);

const width = window.innerWidth;
const height = window.innerHeight;
// 相机设置
const camera = new THREE.PerspectiveCamera(35, width/height, 0.1, 3000);
camera.position.set(300, 300, 300);
scene.add(camera);

// 渲染设置
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);

// 插入页面
document.body.appendChild(renderer.domElement);

// 模型预览
const controls = new OrbitControls(camera, renderer.domElement);

// 渲染函数
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

// 窗口调节
window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
}
线模型对象有三种显示方法：
1、非闭合的连续线条
2、闭合的连续线条
3、顶点两两相接构成多个线条
  • 创建缓冲几何体对象
const geometry = new THREE.BufferGeometry();
  • 类型数组创建顶点类型数据
const vertices = new Float32Array([
	0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
  • 创建属性缓冲区对象
const attribute = new THREE.BufferAttribute(vertices, 3);
  • 设置几何体位置
geometry.attributes.position = attribute;
  • 创建材质为线模型
const material = new LineBasicMaterial({
    color: 0xff00ee,
    // 线宽 默认为1
    // linewidth: 100,  // 由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1
});
  • 创建实体
// 创建线模型对象   一条连续的线
const line = new THREE.Line(geometry, material);

// 闭合线条 头尾相接
const lineLoop = new THREE.LineLoop(geometry, material);

// 非连续线条   两两相连
const lineSegments = new THREE.LineSegments(geometry, material);
  • 模型导出
export { mesh };

完整模型文件

import * as THREE from 'three';

// 创建几何体对象
const geometry = new THREE.BufferGeometry();

// 使用类型数组创建顶点类型数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);

// 创建属性缓冲区对象   将类型数组做具体分割
const attribute = new THREE.BufferAttribute(vertices, 3);

// 使用类型数组设置几何体对象的位置属性
geometry.attributes.position = attribute;

// 线渲染材质
const material = new THREE.LineBasicMaterial({
    color: 0xff00ee,
    // 线宽 默认为1
    // linewidth: 100,  // 由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1
});

// console.log(material.linewidth);

// 创建线模型对象   一条连续的线
const line = new THREE.Line(geometry, material);

// 闭合线条 头尾相接
const lineLoop = new THREE.LineLoop(geometry, material);

// 非连续线条   两两相连
const lineSegments = new THREE.LineSegments(geometry, material);

// 导出模型对象
/* export导出：
    1、export可以有多个
    2、可以各自分开导出，也可以多个同时导出
    3、可以先定义后导出，也可以在定义的同时导出   如：export const...
    4、可使用as进行导出重命名   如：export { mesh as box, ... }
*/
export {line, lineLoop, lineSegments};

非闭合线模型

闭合线模型

不连续线模型

三、网格模型

  • 完整.js文件
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入.js文件
import { mesh1 } from './0628module1.js';
import { mesh2 } from './0628module2.js';

// 设置场景
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(100, 100, 200);
scene.add(axesHelper);

// 设置实体
scene.add(mesh1);
// scene.add(mesh2);

// 设置光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(150, 150, 150);
scene.add(directionalLight);

const width = window.innerWidth;
const height = window.innerHeight;
// 设置相机
const camera = new THREE.PerspectiveCamera(30, width/height, 0.1, 3000);
camera.position.set(250, 250, 250);
scene.add(camera);

// 设置渲染
const renderer = new THREE.WebGLRenderer({
    antialias: true,    // 设置锯齿消除
});
renderer.setSize(width, height);
renderer.render(scene, camera);

// 元素插入
document.body.appendChild(renderer.domElement);

// 渲染循环
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

// 模型预览
const controls = new OrbitControls(camera, renderer.domElement);

// 窗口大小调整
window.onresize = function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.render(window.innerWidth, window.innerHeight);
    camera.updateProjectionMatrix();
}

1、构建三角形

  • 创建缓冲几何体对象
const geometry = new THREE.BufferGeometry();
  • 类型数组创建顶点类型数据
const vertices = new Buffer32Array([ // 每三个点构成三角形，不足不构成三角形
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
  • 创建属性缓冲区对象
const attribute = new THREE.BufferAttribute(vertices, 3);
  • 设置几何体位置
geometry.attributes.position = attribute;
  • 创建材质对象
const material = new THREE.MeshBasicMaterial({
	color: 0xee4758,    // 这个颜色我喜欢
    // 三角形逆时针为正面，顺时针为背面
    side: THREE.FrontSide,  // 默认 正面可见
    side: THREE.BackSide,   // 背面可见
    side: THREE.DoubleSide, // 双面可见
});
  • 创建网格模型
const mesh = new THREE.Mesh(geometry, matreial);
  • 模型导出
export { mesh1 };

完整模型文件

import * as THREE from 'three';

// 创建几何体对象
const geometry = new THREE.BufferGeometry();

// 用类型数组创建顶点坐标
const vertices = new Float32Array([ // 每三个点构成三角形，不足不构成三角形
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);

// 创建属性缓冲区对象，确定顶点
const attribute = new THREE.BufferAttribute(vertices, 3);

// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribute;

// 创建材质对象
const material = new THREE.MeshBasicMaterial({
    color: 0xee4758,    // 这个颜色我喜欢
    // 三角形逆时针为正面，顺时针为背面
    side: THREE.FrontSide,  // 默认 正面可见
    side: THREE.BackSide,   // 背面可见
    side: THREE.DoubleSide, // 双面可见
})

// 创建实体对象
const mesh1 = new THREE.Mesh(geometry, material);

// 模型对象导出
export { mesh1 };

网格模型三角形

如果顶点不够三的倍数，未连成三角形的部分将不显示，下图是五个顶点的三角形模型
五个顶点的网格模型三角形

2、构建四边形

完整模型文件

import * as THREE from 'three';

// 创建几何体对象
const geometry = new THREE.BufferGeometry();

// 使用集合数组创建顶点坐标
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    50, 100, 0, //顶点4坐标
    0, 100, 0, //顶点5坐标
    50, 0, 0, //顶点6坐标
]);

// 创建属性缓冲区对象做顶点
const attribute = new THREE.BufferAttribute(vertices, 3);

// 设置几何体对象attributes属性的位置属性
geometry.attributes.position = attribute;

// 创建材质属性
const material = new THREE.MeshBasicMaterial({
    color: 0xee4758,
    side: THREE.FrontSide,
})

// 创建实体对象
const mesh2 = new THREE.Mesh(geometry, material);

// 模型对象导出
export { mesh2 };

网格模型四边形

侯咕咕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
three. js的人体解剖图.zip
07-14
three. js的人体解剖图
three.js学习 09- 用BufferGeometry创建一个有三维操作意义的立方缓冲几何体
不染-9732
05-05 364
three.js学习 09- 用BufferGeometry创建一个有三维操作意义的立方缓冲几何体
Three几何体BufferGeometry
n_229397218的博客
02-28 1043
/ 创建几何体的 顶点数据0, 0, 0, // 第一个点的位置3, 0, 0,0, 3, 0,0, 0, 3,1, 0, 0,0, 1, 0,0, 0, 1,2, 0, 0,0, 5, 0,0, 0, 7])通过threejs的属性缓冲区对象表示threejs几何体顶点数据。// 通过 BufferAttribute来创建几何体的具体的顶点数据一个矩形平面，可以至少通过两个三角形拼接而成。而且两个三角形有两个顶点的坐标是重合的。
ThreeJs的学习：BufferGeometry理解（1） 生成正方形立方体
太古时代的专栏
07-08 3214
var bgeometry = new THREE.BufferGeometry(); /* // BufferGeometry形成一个最简单的平面 // 一个平面由两个三角形组成，每个三角形由3个坐标，每个坐标由XYZ组成 // 所以一个平面需要六个坐标 var vertices = new Float32Array( [ // 三角形1 - 三个顶点 -10 ,10, 0, -10 ...
ThreeJS-自定义矩形BufferGeometry(八)
以爱护甲,爱满枫林。
03-29 812
/但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果。第一个三角形的起始点是第二个三角形的终端，第一个三角形的终点是第二个三角形的起始点，也能正常显示呢？必须要保证第一个三角形的起始点是第二个三角形的终端，第一个三角形的终点是第二个三角形的起始点。//监听画面变化，更新渲染画面，（自适应的大小）//创建轨道控制器，可以拖动,控制的是摄像头。//设置控制阻尼，让控制器有更真实的效果。//渲染下一帧的时候就会调用回调函数。
Three.js之几何体BufferGeometry
zoey的专栏
08-27 309
- 缓冲类型几何体：BufferGeometry - 定义几何体顶点数据：BufferAttribute - 点模型：Points、PointsMaterial - 线模型：Line、LineBasicMaterial - 网格模型：Mesh、MeshBasicMaterial - 顶点索引：geometry.index - 顶点法线：geometry.attributes.normal - 材质属性-线条模式渲染：.wireframe - 细分数：细分数越大，表面越光滑，但是三角形和顶点数量却越多 - 旋
Three.js-BufferGeometry
damadashen的博客
07-09 566
Three中BufferGeometry的介绍及使用
three.js 入门三：buffergeometry贴图属性（position、index和uvs）
火焰
12-08 3396
threejs中如何在buffergeometry中贴图
Three.js入门（一）——几何体BufferGeometry
weixin_47159518的博客
10-16 469
非常简单，你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。法线：数学上的法线概念，比如一个平面，法线的就是改平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线。对于曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量越多，渲染性能越差。
学习 Three.js (4) —— BufferGeometry()
weixin_52872413的博客
11-14 521
three.js 中的几何体都是使用三角形构成的，而 BufferGeometry() 方法就是用于构建三角形的核心方法
【Three.js】BufferGeometry 基础讲解（position、normal、color、index）
热门推荐
qq_34695703的博客
12-01 1万+
1. BufferGeometry 首先，在 three.js 中有THREE.Mesh 网格、THREE.Points 点、THREE.Line 线条等模型。其中： Mesh 网格模型创建的物体是由一个个小三角形组成，如下面各图。这些小三角形又是由三个点确定，需要三个确定的位置，即确定的 xyz Points 模型创建的物体是由一个个点构成，每个点都有自己的位置，Points 相当于点的集合。 Line 模型创建的物体是连续的线条，这些线可以理解为是按顺序把所有点连接起来。
Three.js学习之几何形状
10-21
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。
three.js实现圆柱体
10-17
主要为大家详细介绍了three.js实现圆柱体的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
threejs-csg:用于Three.js，ES6 + BufferGeometry的构造实体几何
04-05
threejs-csg（进行中） 用于Three.js，ES6 + BufferGeometry的构造实体几何发展运行npm install然后npm start 要查看演示，请将浏览器定向到用法const box = new Mesh(new BoxBufferGeometry(0.2, 0.2, 1), material...
bpmn-js推荐几款常用的插件
飞云先生
04-30 130
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 955
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1174
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
表格隔行变色
weixin_54339833的博客
05-02 389
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
three.js 中给不规则四边形贴图
12-18
1.创建一个四边形的几何体，可以使用BufferGeometry或者Geometry来创建。 2.创建一个材质，可以使用MeshBasicMaterial或者MeshLambertMaterial等材质。 3.加载贴图，可以使用TextureLoader来加载贴图。 4.将贴图...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值