广东源江建设集团有限公司网站,衡阳建设学校网站,做博客的网站,外国搜索引擎登录入口目录
一、几何体顶点和模型
1.1、点模型对象(Points)渲染顶点数据
1.2、线模型(Line)渲染顶点数据#xff08;画个心#xff09;
1.3、网格模型(Mesh)渲染顶点数据(三角形概念)
1.4、构建一个矩形平面几何体
1.5、几何顶点索引数据
1.6、顶点法线数据
1.7、查看three…目录
一、几何体顶点和模型
1.1、点模型对象(Points)渲染顶点数据
1.2、线模型(Line)渲染顶点数据画个心
1.3、网格模型(Mesh)渲染顶点数据(三角形概念)
1.4、构建一个矩形平面几何体
1.5、几何顶点索引数据
1.6、顶点法线数据
1.7、查看three.js自带几何体顶点结构
1.8、BufferGeometry的旋转、缩放、平移方法
二、三维向量和模型属性
2.1、三维向量Vector3与模型位置、缩放属性
2.2、欧拉Euler与角度属性.rotation
2.3、模型材质颜色(Color对象)
2.4、模型材质和几何体属性
2.5、克隆.clone()和复制.copy() 一、几何体顶点和模型
已知缓冲类型几何体(BufferGeometry)是一个没有任何形状的空几何体用它定义顶点数据。
1.1、点模型对象(Points)渲染顶点数据 1.2、线模型(Line)渲染顶点数据画个心 核心代码7个点连成一个简约心(对称美)
const vertices new Float32Array([0, 0, 0, -80, 50, 0, -40, 80, 0, 0, 50, 0, 40,80, 0, 80, 50, 0,0, 0, 0,
]);
// 线模型
const materialnew THREE.LineBasicMaterial({color:0xffff00
})
const linenew THREE.Line(geometry,material)
const linenew THREE.LineLoop(geometry,material)//闭合线条自己连接
const linenew THREE.LineSegments(geometry,material)//非连续线条
export default line 注意 LineLoop会把所有点连起来用它画个心就不需要最后再加点(6个点就可以) LineSegments每两个点连成一条线每根线条之间会断开 1.3、网格模型(Mesh)渲染顶点数据(三角形概念) 网格模型三角形正反面 正面逆时针看 反面顺时针看 比如下面这个三角形构成顺序如下图 此时正面是逆时针但是反面是看不到的因为three.js的材质默认是正面可见背面不可见。
// 网格模型
const material new THREE.MeshBasicMaterial({color: 0x00fffff,side: THREE.DoubleSide, //双面可见DoubleSide;默认正面可见FrontSide;背面可见BackSide
});
const mesh new THREE.Mesh(geometry, material);
export default mesh;
1.4、构建一个矩形平面几何体
几何体其实就是由不同的三角形构成的比如矩形就是由两个三角形构成的从一个方向看这两个三角形都是逆时针或者顺时针。
如下图
坐标点共6个其中有两处是重合的每个三角形的顶点(按顺序)从正面看都是逆时针。 1.5、几何顶点索引数据
根据1.4的案例我们可以只写4个顶点通过4个index构成两个三角形。 const vertices new Float32Array([0, 0, 0,60, 0, 0,60, 60, 0,0,60, 0,
]);
//属性缓冲对象BufferAttribute表示顶点数据
const attribute new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position attribute; //设置几何体的顶点位置属性const indexesnew Uint16Array([0,1,2,0,2,3
]);//通过JS的Uint16Array创建顶点索引.index的数据
geometry.indexnew THREE.BufferAttribute(indexes,1) 顶点坐标数据是Js的类型化数组Float32Array创建的 顶点法线数据是Js的类型化数组Float32Array创建的 顶点索引数据是Js的类型化数组Uint16Array创建的 1.6、顶点法线数据
法线垂直于该平面的向量。
因为MeshBasicMaterial不受光照影响所以上述图形可以正常显示
但如果使用受光照影响的材质此时几何体就需要定义顶点法线数据才能正常显示。
const norlmalsnew Float32Array([0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1,
]);//数量和坐标数量一致
// 定义顶点法线法向量数据
geometry.attributes.normalnew THREE.BufferAttribute(norlmals,3) 设置顶点坐标位置geometry.attributes.position 设置顶点法线位置geometry.attributes.normal 设置顶点索引位置geometry.index 1.7、查看three.js自带几何体顶点结构 import * as THREE from three;
const geometry new THREE.BoxGeometry(100,100,100); //创建一个长方体
const geometry new THREE.PlaneGeometry(100,100,2,2); //创建一个矩形平面
const geometry new THREE.SphereGeometry(50); //创建一个球体console.log(geometry.attributes.position,.position);
console.log(geometry.index,.index);// 网格模型
const material new THREE.MeshBasicMaterial({color: 0x00fffff,wireframe:true
});
const mesh new THREE.Mesh(geometry, material);
export default mesh; (1)、材质属性wireframe 线条渲染模式 wireframe:true查看几何体三角形结构 。 (2)、几何体细分数 以矩形平面为例2,2的意思就是将它分别从宽度、高度分为两部分即4个矩形。 1.8、BufferGeometry的旋转、缩放、平移方法
rotate()、scale()、translate()本质上就是改变顶点数据。 geometry.translate(50,0,0); //沿X轴平移50 geometry.center(); //回到原点(即使上面平移了也会回到原点) geometry.scale(2,2,2); //沿XYZ三个方向放大2倍 geometry.rotateX(Math.PI/6); //沿X轴旋转30度 二、三维向量和模型属性
已知Points、Line、Mesh等模型对象的父类都是三维物体Object3D。
2.1、三维向量Vector3与模型位置、缩放属性
// 创建一个三维向量对象Vector3
const v3 new THREE.Vector3(100, 100, 100);
v3.set(50, 50, 50);
console.log(v3.x, v3.x);mesh.position.set(0, 100, 0);
mesh.position.z 100;mesh.scale.set(2, 2, 2);
mesh.scale.x 3;mesh.position.x 100;
mesh.translateX(100);//沿着X轴正方向平移距离100
//等价于mesh.positionmesh.position100【相对上一次的位置进行平移变换】const axis new THREE.Vector3(1, 1, 1); //向量Vector3对象表示方向
axis.normalize(); //转化为单位向量向量归一化
console.log(axis, axis);
mesh.translateOnAxis(axis, 100);//沿着axis轴表示方向平移100
2.2、欧拉Euler与角度属性.rotation
模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态
.rotation的属性值是欧拉对象Euler.quaternion的属性值是四元数对象Quaternion
const mesh new THREE.Mesh(geometry, material);const eu new THREE.Euler(Math.PI / 2, Math.PI, 0);
eu.x Math.PI;mesh.rotation.y Math.PI / 8;
// mesh.rotation.y Math.PI / 8;mesh.rotateZ(Math.PI / 4);//绕着Z轴旋转45度
console.log(eu.x, eu.x, mesh.rotation, mesh.rotation);
//在index.js旋转
function render() {// model.rotateY(0.01); 原来写法等价于下面model.rotation.y 0.01;renderer.render(scene, camera); //一定要更新内容requestAnimationFrame(render); //请求动画帧实现周期性循环
}
render();
2.3、模型材质颜色(Color对象)
const color new THREE.Color();
color.r 0;//等价于material.color.r0
color.b0
// color.g1color.setRGB(0,1,0)//RGB方式
color.setStyle(#0000ff)//前端CSS方式蓝色
color.setHex(0x00ff00)//十六进制方式
// setStyle()和setHex()也可以直接用.set(颜色值)console.log(color, color);
//输出 {isColor: true,b: 0,g: 1,r: 0} 等价于color.setRGB(0,1,0)
material.color color;//此时颜色为绿色
2.4、模型材质和几何体属性
已知模型材质的父类是Material
const mesh new THREE.Mesh(geometry, material);
const mesh1 new THREE.Mesh(geometry, material);
mesh1.position.x 100;// 两个mesh共享一个材质改变一个mesh的颜色另一个mesh的颜色也会改变
mesh.material.color.set(0xffff00)
export { mesh, mesh1 };//在index.js中引入
import { mesh, mesh1 } from ./mesh.js;
const scene new THREE.Scene();
scene.add(mesh, mesh1);
2.5、克隆.clone()和复制.copy() const mesh new THREE.Mesh(geometry, material);
// const mesh1 new THREE.Mesh(geometry, material);
const mesh1 mesh.clone(); //等价于上面
mesh1.position.x 100;// 克隆材质后改变mesh1的颜色不会改变mesh的颜色
mesh1.material mesh.material.clone();
mesh1.material.color.set(0xffff00);
// 练习mesh.position.copy()
mesh.position.copy(mesh1.position); //位置相同
mesh.position.y 80; //在原来y的基础上增加80
export { mesh, mesh1 }; 总结 1、复制 深度复制clone() 方法默认进行深度复制即复制对象的所有子对象例如网格的几何体、材料、变换、Vector3等 浅复制copy() 方法通常进行浅复制即只复制对象本身的属性不复制子对象例如变换信息位置、旋转、缩放或者材料属性等 2、性能 因为 clone() 会复制对象及其所有子对象所以可能会消耗更多的性能和内存 因为 copy() 只复制对象的属性所以通常比 clone() 更高效 3、目标对象 clone() 的对象不会继承原始对象的事件监听器或动画状态 copy() 需要一个已经存在的目标对象来接收属性。
