Three.js之几何体BufferGeometry
参考资料
- 几何体顶点位置数据和点模型
- …
- 旋转、缩放、平移几何体)
知识点
注：基于Three.jsv0.155.0
- 缓冲类型几何体：BufferGeometry
- 定义几何体顶点数据：BufferAttribute
- 点模型：Points、PointsMaterial
- 线模型：Line、LineBasicMaterial
- 网格模型：Mesh、MeshBasicMaterial
- 顶点索引：geometry.index
- 顶点法线：geometry.attributes.normal
- 材质属性-线条模式渲染：.wireframe
- 细分数：细分数越大，表面越光滑，但是三角形和顶点数量却越多
- 旋转、缩放、平移：
.scale()、.translate()、.rotateX()、.rotateY()、.center()
代码实现
几何体顶点位置数据和点模型
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坐标
]);
//将缓冲区数据添加到几何体中
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
//创建一个材质对象
const material = new THREE.PointsMaterial({
color: 0xffff00,
size: 10.0 //点对象像素尺寸
});
//创建一个网格模型对象Points
const points = new THREE.Points(geometry, material); //点模型对象
export default points;
线模型对象
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坐标
]);
//将缓冲区数据添加到几何体中
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
//创建一个材质对象
const material = new THREE.LineBasicMaterial({
color: 0xffff00,
});
//创建一个网格模型对象Line
const line = new THREE.Line(geometry, material);
// const line = new THREE.LineLoop(geometry, material);
// const line = new THREE.LineSegments(geometry, material);
export default line;
网格模型(三角形概念)
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 vertices = new Float32Array([
0, 0, 0, //顶点1坐标
80, 0, 0, //顶点2坐标
80, 80, 0, //顶点3坐标
0, 0, 0, //顶点4坐标 和顶点1位置相同
80, 80, 0, //顶点5坐标 和顶点3位置相同
0, 80, 0, //顶点6坐标
]);
//将缓冲区数据添加到几何体中
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
//创建一个材质对象
const material = new THREE.MeshBasicMaterial({
color: 0xffff00,
side: THREE.DoubleSide, //双面可见
});
//创建一个网格模型对象Mesh
const mesh = new THREE.Mesh(geometry, material);
export default mesh;
几何体顶点索引数据
import * as THREE from 'three';
//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//创建一个空的缓冲区数据
const vertices = new Float32Array([
0, 0, 0, //顶点1坐标
80, 0, 0, //顶点2坐标
80, 80, 0, //顶点3坐标
0, 80, 0, //顶点6坐标
]);
const indexs = new Uint16Array([
0, 1, 2, //顶点1，2，3组成一个三角形
0, 2, 3, //顶点1，3，4组成一个三角形
]);
geometry.index = new THREE.BufferAttribute(indexs, 1); //顶点索引
//将缓冲区数据添加到几何体中
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
//创建一个材质对象
const material = new THREE.MeshBasicMaterial({
color: 0xffff00,
side: THREE.DoubleSide, //双面可见
});
//创建一个网格模型对象Mesh
const mesh = new THREE.Mesh(geometry, material);
export default mesh;
顶点法线数据
import * as THREE from 'three';
//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//创建一个空的缓冲区数据
const vertices = new Float32Array([
0, 0, 0, //顶点1坐标
80, 0, 0, //顶点2坐标
80, 80, 0, //顶点3坐标
0, 80, 0, //顶点6坐标
]);
const indexs = new Uint16Array([
0, 1, 2, //顶点1，2，3组成一个三角形
0, 2, 3, //顶点1，3，4组成一个三角形
]);
geometry.index = new THREE.BufferAttribute(indexs, 1); //顶点索引
//将缓冲区数据添加到几何体中
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
// 定义法向量数据
const normals = new Float32Array([
0, 0, 1, //顶点1法向量
0, 0, 1, //顶点2法向量
0, 0, 1, //顶点3法向量
0, 0, 1, //顶点4法向量
]);
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //法向量
//创建一个材质对象
const material = new THREE.MeshLambertMaterial({
color: 0xffff00,
side: THREE.DoubleSide, //双面可见
});
//创建一个网格模型对象Mesh
const mesh = new THREE.Mesh(geometry, material);
export default mesh;
查看threejs自带几何体顶点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js</title>
</head>
<body>
</body>
<!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
<script type="importmap">
{
"imports": {
"three": "./js/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
const width = 800
const height = 500
// 场景
const scene = new THREE.Scene();
// 几何体
const geometry = new THREE.BoxGeometry(100, 100, 100, 2, 2, 2);
console.log(' ~ file: 2.7查看threejs自带几何体顶点.html:28 ~ geometry.attributes.position:', geometry.attributes.position) //32
console.log(' ~ file: 2.7查看threejs自带几何体顶点.html:28 ~ geometry.index:', geometry.index) // 16
// 材质
const material = new THREE.MeshLambertMaterial({
color: 0x00ff00,
wireframe: true,//线条模式渲染mesh对应的三角形数据
});
// 网格模型：物体
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
// 环境光
const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
scene.add( ambientLight );
// 坐标系
const axes = new THREE.AxesHelper(200);
scene.add(axes);
// 相机
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);
// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
</script>
</html>
旋转、缩放、平移几何体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js</title>
</head>
<body>
</body>
<!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
<script type="importmap">
{
"imports": {
"three": "./js/three.module.js",
"three/addons/": "../three.js/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const width = 800
const height = 500
// 场景
const scene = new THREE.Scene();
// 几何体
const geometry = new THREE.BoxGeometry(100, 100, 100, 2, 2, 2);
geometry.scale(2,2,2) // 缩放
geometry.translate(100, 0, 0) // 平移
geometry.rotateY(Math.PI / 4) // 旋转
geometry.rotateX(Math.PI / 4) // 旋转
geometry.rotateZ(Math.PI / 4) // 旋转
geometry.center() // 居中
// 材质
const material = new THREE.MeshLambertMaterial({
color: 0x00ff00,
});
// 网格模型：物体
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
// 环境光
const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
scene.add( ambientLight );
// 坐标系
const axes = new THREE.AxesHelper(200);
scene.add(axes);
// 相机
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);
// 渲染器
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);
controls.addEventListener('change', () => {
renderer.render(scene, camera);
});
</script>
</html>