threejs-BufferGeometry

1.创建一个长方形

    1.1效果

    1.2代码

// 导入threejs文件
import * as three from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 创建场景
const scene = new three.Scene()
// 创建相机
const camera = new three.PerspectiveCamera(
  45, //视角 值越多视野越大
  window.innerWidth / window.innerHeight, //宽高比
  0.1, //近平面(相机最近能看到的物体)
  1000 //远平面(相机最远能看到的物体)
)
// 创建渲染器
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 创建几何体
const geomentry = new three.BufferGeometry()
// // 创建顶端数据，定点是存在顺序的每三个为一个顶点，逆时针为正面
// const vertices = new Float32Array([
//   -1, -1, 0, 1, -1, 0, 1, 1, 0,
//   1, 1, 0, -1, 1, 0, -1, -1, 0
// ])
// // 创建定点属性
// geomentry.setAttribute('position', new three.BufferAttribute(vertices, 3))

// 使用索引绘制
const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
// 创建顶点属性
geomentry.setAttribute('position', new three.BufferAttribute(vertices, 3))
// 创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
// 创建索引属性
geomentry.setIndex(new three.BufferAttribute(indices, 1))

// 创建材质
const material = new three.MeshBasicMaterial({
  color: 0xff0000,
  side: three.DoubleSide, //正反面都能看到
  // wireframe: true //线框模式
})
// 创建网格
const cube = new three.Mesh(geomentry, material)
// 加入场景
scene.add(cube)
// 相机位置
camera.position.z = 5 //设置在z轴位置
// 看向位置
camera.lookAt(0, 0, 0) //看向原点
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 启用阻尼系数：值越大，阻尼越明显
controls.dampingFactor = 0.5 //设置阻尼值
controls.enableZoom = true // 启用缩放：值为false时禁止缩放
// controls.autoRotate = true // 启用自动旋转：值为true时禁止手动旋转
controls.autoRotateSpeed = 0.5 // 自动旋转速度
// 渲染函数
const animate = () => {
  controls.update()
  requestAnimationFrame(animate) //每一帧调用函数
  // 旋转
  // cube.rotation.x += 0.01 // X轴转
  // cube.rotation.y += 0.01 // Y轴转
  renderer.render(scene, camera) // 重新渲染
}
animate()

2.长方形顶点不同颜色

    2.1效果

    2.2代码

// 导入threejs文件
import * as three from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 创建场景
const scene = new three.Scene()
// 创建相机
const camera = new three.PerspectiveCamera(
  45, //视角 值越多视野越大
  window.innerWidth / window.innerHeight, //宽高比
  0.1, //近平面(相机最近能看到的物体)
  1000 //远平面(相机最远能看到的物体)
)
// 创建渲染器
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 创建几何体
const geomentry = new three.BufferGeometry()
// // 创建顶端数据，定点是存在顺序的每三个为一个顶点，逆时针为正面
// const vertices = new Float32Array([
//   -1, -1, 0, 1, -1, 0, 1, 1, 0,
//   1, 1, 0, -1, 1, 0, -1, -1, 0
// ])
// // 创建定点属性
// geomentry.setAttribute('position', new three.BufferAttribute(vertices, 3))

// 使用索引绘制
const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
// 创建顶点属性
geomentry.setAttribute('position', new three.BufferAttribute(vertices, 3))
// 创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
// 创建索引属性
geomentry.setIndex(new three.BufferAttribute(indices, 1))
// 创建两个顶点组，创建两个材质
geomentry.addGroup(0, 3, 0) //参数一表示indices中开始的位置(索引位置)、参数2表示几个值、参数3表示第几个材质
geomentry.addGroup(3, 3, 1)

// 创建材质
const material1 = new three.MeshBasicMaterial({ color: 0x00ff00, side: three.DoubleSide })
const material2 = new three.MeshBasicMaterial({ color: 0x0000ff, side: three.DoubleSide })

// 创建网格
const cube = new three.Mesh(geomentry, [material1, material2])

// 加入场景
scene.add(cube)
// 相机位置
camera.position.z = 5 //设置在z轴位置
// 看向位置
camera.lookAt(0, 0, 0) //看向原点
// // 添加世界坐标辅助器
// const axesHelper = new three.AxesHelper(5) // 5表示线段长度为5
// scene.add(axesHelper)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 启用阻尼系数：值越大，阻尼越明显
controls.dampingFactor = 0.5 //设置阻尼值
controls.enableZoom = true // 启用缩放：值为false时禁止缩放
// controls.autoRotate = true // 启用自动旋转：值为true时禁止手动旋转
controls.autoRotateSpeed = 0.5 // 自动旋转速度
// 渲染函数
const animate = () => {
  controls.update()
  requestAnimationFrame(animate) //每一帧调用函数
  // 旋转
  // cube.rotation.x += 0.01 // X轴转
  // cube.rotation.y += 0.01 // Y轴转
  renderer.render(scene, camera) // 重新渲染
}
animate()