threejs3d学习笔记2

1. 我们日常开发,只是用来验证3d的物体的一些特性,没有必要自己写,官网有提供gui管理工具.lil-gui. https://github.com/georgealways/lil-gui

//导入lil.gui
import * as dat from "dat.gui"
//如果在本地导入
import {GUI} from "three/examples/jsm/libs/lil-gui.module.min.js"

2. 左上角就会出现:

3. 还可以针对某个物体,加入调整理面板

//写法一
gui.add(cube.position,"x",-5,5).name("立方体x轴位置");
//写法二
gui.add(cube.position,'x').min(-10).max(10).step(1).name()

4. 看效果:

5. 布尔参数面板

//会自动判读如果是布尔型就会出现在一个开关的按钮.
gui.add(parentMaterial,"wireframe").name("父元素线框模式")

6. 效果:

7. 调颜色面板

let colorParams={
	cubeColor:"#ff0000",
}
gui.addColor(colorParams,"cubeColor").name("立方体颜色"),onChange((v)=>{
  cube.material.color.set(v);
})

8. 效果

9. 接下来介绍一下几何体:
10. 所有几何体的类都继承自:BufferGeometry

//创建几何体
const geometry=new THREE.BufferGermetry();
//创建顶点数据,有顺序,第三个为一顶点,逆时针为正面,顺时针为反面.
const vertices=new Float32Array([
-1,-1,0,1,-1,0,1,1,0
])
//创建顶点属性  第二个参3,是3个顶点的意转.
geometry.setAttribute("position",new THREE.BufferAttribute(vertices,3))

const material=new THREE.MeshBasicMaterial({
color:0x00ff00,
  side:THREE.DoubleSide,//两面都可以看到(这里注意,3d世界是分两面的)
})
const plane=new THREE.Mesh(geometry,material)
scene.add(plane)

11. 如果按上面的方法,再建一个三角形,合成平面.打印出的参数会是6个顶点,要变成4个顶点可以使用索引绘制.