Three.js几何体BufferGeometry②

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

一、几何体顶点索引

使用顶点索引可以在创建顶点数据的时候省略重复的三角形点坐标

• 创建类型数组做顶点数据

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坐标
])

我们可以省略去重复的顶点4、5

• 简化后类型数组

const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标
    0, 80, 0, //顶点4坐标
])

• 创建顶点索引

const indexs = new Uint16Array([
    0, 1, 2, 2, 3, 0,
])

• 设置几何体索引

// 创建属性缓冲设置几何体索引
geometry.index = new THREE.BufferAttribute(indexs, 1);

二、顶点法线数据

设置顶点法线可以确定受光照影响材质的光线入射角度

• 创建类型数组设置顶点法线（有顶点索引）

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);

完整模型文件

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, //顶点4坐标
])

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

// 设置几何体位置
geometry.attributes.position = attrubute;

// 创建类型数组做顶点法线
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 indexs = new Uint16Array([
    0, 1, 2, 2, 3, 0,
])

// 创建属性缓冲设置几何体索引
geometry.index = new THREE.BufferAttribute(indexs, 1);

// 创建受光照影响材质对象
const material = new THREE.MeshLambertMaterial({
    color: 0x31ff1f,
    side: THREE.DoubleSide,
})

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

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

完整.js文件

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入模型对象
import { mesh } from './0629_2module.js';

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

// 将实体加入场景
scene.add(mesh);

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

const width = window.innerWidth;
const height = window.innerHeight;
// 设置相机
const camera = new THREE.PerspectiveCamera(20, width/height, 0.1, 3000);
camera.position.set(300, 300, 300);
camera.lookAt(0, 0, 0);
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.setSize(window.innerWidth, window.innerHeight);
    camera.updateProjectionMatrix();
}

• 效果图
  

三、几何体的变化和移动

• 缩放 .scale()

// x, y, z方向缩放
geometry.scale(1.5, 0.2, 4);

• 平移 .translate()

// 沿x, y, z方向平移
geometry.translate(70, 40, 2);

• 旋转 .rotateX() .rotateY() .rotateZ()

// 绕x, y, z轴旋转
geometry.rotateY(Math.PI / 4);	// 绕Y轴旋转45

• 居中 .center()

// 居中，消除平移效果
geometry.center();

四、几何体的顶点结构

• 查看几何体顶点位置和索引数据

// 查看几何体顶点
console.log("几何体：", geometry);
console.log("几何体位置数据：", geometry.attributes.position);
console.log("几何体索引数据：", geometry.index);

• 材质设置为线条模式

// 材质
const material = new THREE.MeshLambertMaterial({
    color: 0xff4732,
    side: THREE.DoubleSide,
    wireframe:true, //线条模式渲染mesh对应的三角形数据
})

完整.js文件

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

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

// 几何体   细分数：长分两段，宽分一段
const geometry = new THREE.PlaneGeometry(50,100, 2, 1);

// 材质
const material = new THREE.MeshLambertMaterial({
    color: 0xff4732,
    side: THREE.DoubleSide,
    wireframe:true, //线条模式渲染mesh对应的三角形数据
})

// 灯光
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(200, 200, 400);
scene.add(pointLight);
const ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);

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

// 实体
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(20, 100, 50);
scene.add(mesh);

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

document.body.appendChild(renderer.domElement);

// 查看几何体顶点
console.log("几何体：", geometry);
console.log("几何体位置数据：", geometry.attributes.position);
console.log("几何体索引数据：", geometry.index);

// 几何体改变
// x, y, z方向缩放
geometry.scale(1.5, 0.2, 4);
// 沿x, y, z方向平移
geometry.translate(70, 40, 2);
// 绕x, y, z轴旋转
geometry.rotateY(Math.PI / 4);
// 居中，消除平移效果
// geometry.center();

// 渲染循环
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.setSize(window.innerWidth, window.innerHeight);
    camera.updateProjectionMatrix();
}

• 效果图