做一个网上商城网站建设费用多少,网站设计要学什么,找客户信息的软件,永久免费网页版linux文章目录 模型 几何体 材质模型点模型Points - 用于显示点线模型Line | LineLoop | LineSegments网格模型mesh - 三角形 几何体BufferGeometry缓冲类型几何体BufferGeometry - 没有任何形状的空几何体创建几何体的方式BufferAttribute Types定义顶点法线 geometry.attributes… 文章目录 模型 几何体 材质模型点模型Points - 用于显示点线模型Line | LineLoop | LineSegments网格模型mesh - 三角形 几何体BufferGeometry缓冲类型几何体BufferGeometry - 没有任何形状的空几何体创建几何体的方式BufferAttribute Types定义顶点法线 geometry.attributes.normal 材质 Material点材质PointsMaterial - Points使用的默认材质网格材质MeshLamberMaterial高光网格材质 MeshPhongMaterial 模型 几何体 材质
注意点1Three.js的材质默认正面可见、背面不可见 解决办法材质配置对象中设置side属性
side取值描述THREE.FrontSide只有正面可见THREE.DoubleSide两面可见THREE.BackSide设置只有背面可见
模型
点模型Points - 用于显示点
语法new Points( geometry : BufferGeometry, material : Material )
geometry 几何体对象(可选)BufferGeometry的实例默认值是一个新的BufferGeometry。material 材质对象(可选)默认值为PointsMaterial。
描述一个用于显示点的类将几何体geometry渲染成点。
线模型Line | LineLoop | LineSegments
语法new Line( geometry : BufferGeometry, material : Material )
geometry 线段的顶点默认值是一个新的BufferGeometry。material 线的材质默认值是一个新的且随机颜色的LineBasicMaterial。
线模型绘制线条的规则Line从第一个点开始到最后一个点依次连成线不闭合LineLoop从第一个点开始到最后一个点依次连成线并将最后一个顶点连回第一个顶点 闭合LineSegments从第一个点开始第一个点连接第二个点第三个点连接第四个点…有n个点就有n/2条线 间断
网格模型mesh - 三角形
本质一个一个三角形拼接 说明几何体所有顶点坐标三个为一组构成一个三角形多组顶点构成多个三角形用来模拟物体的表面。 三角形的正反面 三个点可以构成一个三角形从第一个点往第三个点连接
正面相机对着面连接的顺序是逆时针反面相机对着面连接的顺序是顺时针
几何体BufferGeometry
常见几何体可以看成是封装后的BufferGeometry
缓冲类型几何体BufferGeometry - 没有任何形状的空几何体
描述BufferGeometry是一个没有任何形状的空几何体通过定义顶点数据将BufferGeometry自定义为任何几何形状。每个几何体可以看作是由多个顶点构成的图案。
BufferGeometry实例的属性与方法
属性名/方法描述index:BufferAttribute绑定几何体的顶点索引每个三角形都绑定了三个顶点的索引。 允许顶点坐标在三角形中复用。attributes : Object存储该几何体相关属性的hashmap (这里直接打印看不见里面的属性)可以通过 几何体.setAttribute 和 几何体.getAttribute 添加和访问与当前几何体相关的属性。
BufferGeometry实例attributes的方法
属性名/方法描述positionBufferAttribute绑定几何体的顶点坐标每个顶点绑定三个坐标值(xyz)normal
案例 1.使用 THREE.BufferGeometry创建一个空的几何体对象
const geometry new THREE.BufferGeometry(); 2.利用Float32Array定义顶点数据使用属性缓冲区对象BufferAttribute表示threejs几何体顶点数据。
通过javascript类型化数组Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。
//类型化数组创建顶点数据
const vertices new Float32Array([0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标0, 0, 10, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象,3个为一组表示一个顶点的xyz坐标
const attribue new THREE.BufferAttribute(vertices, 3);3.设置几何体的定点.attributes.position
// 设置几何体attributes属性的位置属性
geometry.attributes.position attribue;4.渲染顶点
4.1使用点模型渲染顶点数据会把几何体渲染为点网格模型Mesh会把几何体渲染为面。
// 点渲染模式
const material new THREE.PointsMaterial({color: 0xffff00,size: 10.0 //点对象像素尺寸
});
const points new THREE.Points(geometry, material); //点模型对象4.2使用线模型渲染顶点数据从第一个点开始到最后一个点依次连成线。
// 线材质对象
const material new THREE.LineBasicMaterial({color: 0xff0000 //线条颜色
});
// 创建线模型对象
const line new THREE.Line(geometry, material);4.3用网格模型渲染顶点
const material new THREE.MeshBasicMaterial({side: THREE.DoubleSide, //两面可见
});创建几何体的方式
直接利用顶点数据每一个点对应一个坐标 new Float32Array构造坐标数组 | 32位的浮点数型数组THREE.BufferAttribute(坐标数组,3) 每三个坐标为一组构建顶点坐标。顶点的个数等于组数赋值给geometry.attributes.position 利用顶点索引多个顶点可以利用同一个坐标 new Float32Array构造坐标数组THREE.BufferAttribute(坐标数组,3) 每三个坐标为一组构建顶点坐标。new Uint16Array 构造索引顶点数组顶点的个数需要和索引的个数一样 | 16 位无符号整数geometry.index new THREE.BufferAttribute(indexes, 1) 通过索引去坐标数组中取顶点坐标
案例: 构建一个矩形平面几何体 - 通过顶点数据 顶点坐标一个矩形平面可以至少通过两个三角形拼接而成。 三角形方向两个三角形的正面需要保持一致
const vertices new Float32Array([0, 0, 0, //顶点1坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标0, 0, 0, //顶点4坐标 和顶点1位置相同80, 80, 0, //顶点5坐标 和顶点3位置相同0, 80, 0, //顶点6坐标
]);
const attribue new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position attribue;几何体顶点索引数据 - 通过顶点索引 在上述案例中坐标4和坐标5其实是重复的坐标重复的坐标可以复用吗
// 删除重复的坐标
const vertices new Float32Array([0, 0, 0, //顶点1坐标 | 索引080, 0, 0, //顶点2坐标 4坐标 | 索引180, 80, 0, //顶点3坐标 5坐标 | 索引20, 80, 0, //顶点6坐标 | 索引3
]);// Uint16Array类型数组创建顶点索引数据
const indexs new Uint16Array([// 下面索引值对应顶点位置数据中的顶点坐标0, 1, 2, 0, 2, 3,
])// 索引数据赋值给几何体的index属性 1个为1组
geometry.index new THREE.BufferAttribute(indexs, 1); BufferAttribute Types
在 three.js 中一共有 9 种 BufferAttribute,每种和 JavaScript 中的类型相对应Typed Arrays。使用new创建BufferAttribute对象时传入数组是什么内省生成的BufferAttribute就是什么类型
BufferAttribute 类型对应的JS数组类型THREE.Float64BufferAttributeFloat64ArrayTHREE.Uint32BufferAttributeUint32ArrayTHREE.Int32BufferAttributeInt32ArrayTHREE.Uint16BufferAttributeUint16ArrayTHREE.Int16BufferAttributeInt16ArrayTHREE.Uint8ClampedBufferAttributeUint8ClampedArrayTHREE.Uint8BufferAttributeUint8ArrayTHREE.Int8BufferAttributeInt8Array
定义顶点法线 geometry.attributes.normal
数学上法线的概念 一个平面法线的就是改平面的垂线如果是光滑曲面一点的法线就是该点切面的法线。
Three.js中法线是通过顶点定义默认情况下每个顶点都有一个法线数据。
无顶点索引的使用方式
const vertices new Float32Array([0, 0, 0, //顶点1坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标0, 0, 0, //顶点4坐标80, 80, 0, //顶点5坐标0, 80, 0, //顶点6坐标
]);
geometry.attributes.position new THREE.BufferAttribute(vertices, 3);
const material new THREE.MeshLambertMaterial({color: 0xff0000, //线条颜色side: THREE.DoubleSide
});
// 矩形平面无索引两个三角形6个顶点
// 每个顶点的法线数据和顶点位置数据一一对应
const normals new Float32Array([0, 0, 1, //顶点1法线( 法向量 )0, 0, 1, //顶点2法线0, 0, 1, //顶点3法线0, 0, 1, //顶点4法线0, 0, 1, //顶点5法线0, 0, 1, //顶点6法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.attributes.normal new THREE.BufferAttribute(normals, 3); 有顶点索引的使用方式
const vertices new Float32Array([0, 0, 0, //顶点1坐标 顶点4坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标 顶点5坐标0, 80, 0, //顶点6坐标
]);
geometry.attributes.position new THREE.BufferAttribute(vertices, 3);
// 矩形平面有索引两个三角形有2个顶点重合有4个顶点
// Uint16Array类型数组创建顶点索引数据
const indexs new Uint16Array([// 下面索引值对应顶点位置数据中的顶点坐标0, 1, 2, 0, 2, 3,
])
geometry.index new THREE.BufferAttribute(indexs, 1);
// 每个顶点的法线数据和顶点位置数据一一对应
const normals new Float32Array([0, 0, 1, //顶点1法线( 法向量 )0, 0, 1, //顶点2法线0, 0, 1, //顶点3法线0, 0, 1, //顶点4法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.attributes.normal new THREE.BufferAttribute(normals, 3);材质 Material
点材质PointsMaterial - Points使用的默认材质
语法new PointsMaterial( parameters : Object )
实例的属性和方法
属性/方法描述size:Number设置点的大小默认值为1.0。color:Color材质的颜色默认值为白色 (0xffffff)。
网格材质 使用收光照影响的材质时如果没有光照默认是黑色的(renderer画布设置了颜色可以看出)
MeshLamberMaterial
对光照的反射为漫反射光线向四周反射。
高光网格材质 MeshPhongMaterial
语法:new MeshPhongMaterial( parameters : Object ) 参数对象的属性 自有属性 Material基类继承的属性对光照的反射为镜面反射想象一面镜子的反射如果刚好反射光对眼睛会非常刺眼某个局部区域高亮像擦了高光
注意AmbientLight环境光没有方向整体改变场景的光照。所以只有环境光的高光效果会失效。
MeshPhongMaterial高光网格材质配置参数的自有属性
属性名属性描述shininess高亮的程度越高的值越闪亮默认30specular高光颜色默认为0x111111灰色
