three.js入门学习

-心铭-

于 2024-07-08 09:56:34 发布

阅读量563

点赞数 12

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/m0_73847536/article/details/140260012

版权

three.js

环境：

vscode,webpack/vite/其他,Live Server

项目开发环境引入：

尽量加上版本号

第一个案例

三维场景：

创建

定义物体：物体大小，外观...

将所定义的物体外观添加进物体里

相机：

创建相机对象(四个参数设置)

相机设置(位置，视线...)

渲染器:相机对三维场景的拍照

使用

创建渲染器对象

执行渲染操作(指名哪个相机，场景)->生成一个html元素Canvas

将生成的Canvas画布添加到页面

锯齿

设备像素比

辅助类三维坐标系，物体及相机移动

物体：

视角/相机：

光源

点光源，平行光，聚光灯光源

基本参数设置：位置，强度...

工具：可视化点光源工具

相机控件：轨道控制器

本质：更改相机参数

动画渲染循环

请求动画帧

clock

画布：

全屏/半屏时画布适配

适配前端布局

画布叠加

深度冲突(模型闪烁)

Three.js背景透明度

renderer.setClearAlpha(0.8);//0~1

页面辅助

stats性能监视器扩展库

dat.gui.js:拖动属性条改变相关属性

几何体(父类)

几何体顶点结构父类:BufferGeometry

缓冲属性

模型类型：

点模型

线模型

网格模型:一个个三角形拼出来

正反面：逆时针为正面，默认正面可见

去重：几何体顶点索引

顶点法线：

顶点坐标数据

自制几何体基本操作：

平移，缩放,旋转(translate,,scale)->对位置positon，角度rotate的改变

模型对象

父类都为Object3D

三维向量vector3

三维向量Vector3有xyz三个分量，threejs中会用三维向量Vector3表示很多种数据(.position缩放.sacle...)

//new THREE.Vector3()实例化一个三维向量对象
const v3 = new THREE.Vector3(0,0,0);
console.log('v3', v3);
v3.set(10,0,0);//set方法设置向量的值
v3.x = 100;//访问x、y或z属性改变某个分量的值

.positioin改变位置属性

mesh.positioin.set(80,2,11)

.translateX()/.translateY()平移：基于上一次平移位置变换

材质

类型：

基本

漫反射

高光

pbr材质：

效果更好，但占用资源更多

光照模型

金属度：

.metalness默认时0.5,0.0到1.0之间的值可用于生锈的金属外观

粗糙度：

影响材质反射光的程度

立方体纹理对象加载器：

可用于加载环境贴图(3d场景中的6张照片)

环境贴图反射率：近似模拟周围环境对物体表面的影响

物理网格材质：pbr材质子类

材质颜色:

三个属性r,g,b 0-1

两个物体共享同一材质时更改任意其中物体的材质，两个都会改变

判断是否共享材质：

复制和克隆

这俩共享材质，有需要可重新设置材质和几何体属性

层级模型

组

更好的管理mesh

有时也用Object3D作为Group使用

递归遍历方法.traverse()

查找某个具体的模型.getObjectByName()

本地坐标和世界坐标

改变子对象的.position，子对象在3D空间中的坐标会发生改变。
改变父对象的.position，子对象在3D空间中的位置也会跟着变化，也就是说父对象.position和子对象.position叠加才是才是子对象的.position


const mesh = new THREE.Mesh(geometry, material); 
mesh.position.set(50, 0, 0);
const group = new THREE.Group();
group.add(mesh);
group.position.set(50, 0, 0);

移除对象

.remove()把子对象从父对象的.children()属性中删除。

批量移除: group.remove(mesh1,mesh2);

模型隐藏和显示:.visible

顶点UV坐标、纹理贴图

纹理贴图

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

const geometry = new THREE.PlaneGeometry(200, 100); 
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./earth.jpg');
const material = new THREE.MeshLambertMaterial({
    // 设置纹理贴图：Texture对象作为材质map属性的属性值
    map: texture,//map表示材质的颜色贴图属性
});

直接设置纹理贴图：material.map = texture;

颜色贴图和color属性颜色值会混合如果没有特殊需要，设置了颜色贴图.map,不用设置color的值，color默认白色0xffffff。

uv坐标

自定义顶点geometry.attributes.uv

圆形平面设置纹理贴图

CircleGeometry的UV坐标会对颜色纹理贴图.map进行提取，CircleGeometry的UV坐标默认提取的就是一个圆形轮廓。

纹理对象阵列

阵列功能+矩形平面几何体

地板瓷砖

// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./瓷砖.jpg');
// 设置阵列模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(12,12);//注意选择合适的阵列数量