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>