Three.js——learn04

通过dat.gui动态调整

通过使用dat.gui可以动态调整视图

安装

npm install dat.gui

导入

//导入dat.gui
import * as dat from 'dat.gui'

使用

修改基础属性

//创建GUI
const gui = new dat.GUI()
gui
  .add(cube.position, 'x')
  .min(0)
  .max(4)
  .step(0.05)
  .name('x轴坐标')
  .onChange(value => {
    console.log(value)
  })
  .onFinishChange(value => {
    console.log(value)
  })

修改颜色

const param = {
  color: '#ff00ff'
}
gui.addColor(param, 'color').onChange(value => {
  cube.material.color.set(value)
})

设置管理组

let group1 = gui.addFolder('组1')
group1.add(cube, 'visible').name('是否显示')

通过设置点来构建图形

我们使用到的是BufferGeometry对象构建几何体，然后设置点的位置，最后将几何体通过点绘制出来

import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 5)
scene.add(camera)
const render = new THREE.WebGLRenderer()
render.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(render.domElement)
//构建几何体
const geometry = new THREE.BufferGeometry()
//设置点
const vertices = new Float32Array([-1, -1, 1, 1, -1, 1, 1, 1, 1])
//几何体通过点绘制
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))

const material = new THREE.MeshBasicMaterial({ color: '#ff00ff' })

const cube = new THREE.Mesh(geometry, material)

scene.add(cube)
render.render(scene, camera)

通过循环来构建“杂乱”的三角形集合

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(3, 3, 10)
scene.add(camera)
const render = new THREE.WebGLRenderer()
render.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(render.domElement)

for (let i = 0; i < 50; i++) {
  let geometry = new THREE.BufferGeometry()
  let vertices = new Float32Array(9)
  for (let j = 0; j < 9; j++) {
    vertices[j] = Math.random() * 5
  }
  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
  let color = new THREE.Color(Math.random(), Math.random(), Math.random())
  const material = new THREE.MeshBasicMaterial({ color: color })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)
}

const control = new OrbitControls(camera, render.domElement)
control.enableDamping = true
control.update()

const an = () => {
  control.update()
  render.render(scene, camera)
  requestAnimationFrame(an)
}
an()