简述企业网站的基本功能,杭州网站公司设计,wordpress综合商城主题,聊城seo优化目录
Three.js入门
Three.js光源
Three.js阴影
Three.js纹理贴图
纹理是一种图像或图像数据#xff0c;用于为物体的材质提供颜色、纹理、法线、位移等信息#xff0c;从而实现更加逼真的渲染结果。 纹理可以应用于Three.js中的材质类型#xff0c;如MeshBasicMaterial…目录
Three.js入门
Three.js光源
Three.js阴影
Three.js纹理贴图
纹理是一种图像或图像数据用于为物体的材质提供颜色、纹理、法线、位移等信息从而实现更加逼真的渲染结果。 纹理可以应用于Three.js中的材质类型如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial、MeshStandardMaterial等。
UV映射
UV映射是2D图像投影到3D模型的表面以进行纹理映射的3D建模过程也即把位图贴到3D几何形状的过程或者方法。在这个过程中3D模型上的每个顶点都会被赋予一个二维坐标U, V。
由于XYZ已经表示模型空间中的3D图形的轴了。所以用U和V分别表示纹理坐标的水平和垂直方向。
顶点UV坐标可以在0~1.0之间任意取值纹理贴图左下角对应的UV坐标是(0,0)右上角对应的坐标(1,1)。
UV映射公式如下
(u,v) - (x,y,z)(u,v)代表纹理上的坐标(x,y,z)代表几何图形上的点(向量)。 以立方缓冲几何体的一个面为例 贴图的左下角(0,0) 映射到几何体的(-1,-1,1); 贴图的左下角(1,0) 映射到几何体的(1,-1,1); 贴图的左下角(0,1) 映射到几何体的(-1,1,1); 贴图的左下角(1,1) 映射到几何体的(1,1,1); three.js的所有内置的几何体都内置了UV映射所以开发者不需要担心这个问题。
纹理的使用方法
加载纹理
// 1.
const textureLoader new THREE.TextureLoader();
// 2.
const texture textureLoader.load(uv);const boxGeometry new THREE.BoxGeometry(2, 2, 2);
const boxMaterial new THREE.MeshStandardMaterial({color: 0xffffff,map: texture, // 2.重点位置
});
const boxMesh new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh); 使用TextureLoader进行加载纹理加载图像并在纹理准备就绪后更新纹理然后设置给MeshStandardMaterial的map。 纹理变换
repeat
我们可以使用 repeat 属性对纹理进行重复显示repeat 是一个 Vector2 实例所以可以指定 x 和 y 属性。
texture.repeat.x 2;
texture.repeat.y 2;默认情况下纹理不会重复(THREE.ClampToEdgeWrapping)最后一个像素被拉伸了我们需要设置 wrapS 和 wrapT可重复。 texture.wrapS THREE.RepeatWrapping
texture.wrapT THREE.RepeatWrappingwrapS和wrapT
上面重复的纹理方向是相同的可以设置为镜像方向。
texture.wrapS THREE.MirroredRepeatWrapping
texture.wrapT THREE.MirroredRepeatWrappingoffset
我们可以使用 offset 属性对纹理进行重复偏移repeat 是一个 Vector2 实例所以可以指定 x 和 y 属性。
texture.offset.x 0.1;
texture.offset.y 0.1;
texture.wrapS THREE.RepeatWrapping;
texture.wrapT THREE.RepeatWrapping;如果不设置THREE.RepeatWrapping重复则会出现纹理空白区域。 rotation texture.rotation Math.PI / 4;旋转是弧度逆时针方向旋转。旋转的点默认是(0,0)这个点 center
如果要按照纹理的中心进行旋转需要修改center。
texture.center new THREE.Vector2(0.5, 0.5);minFilter 和 magFilter
可以使用 minFilter 属性来设置纹理图的 minification 缩小过滤器使用magFilter 属性来设置纹理图的 minification 放大过滤器。 当纹理的像素小于渲染像素时我们需要将纹理放大当纹理的像素大于渲染像素时我们需要将纹理缩小 以放大过滤器为例 Nearest就是找最近的一个像素点的颜色Linear 就是根据附近的四个像素点的平均颜色值️
纹理类型
纹理有很多种类型接下来我们就来介绍这些不同的纹理。
如果只是测试效果可以在一些免费的纹理图片网站上去下载。譬如 www.3dtextures.me 等。
本文使用的纹理图片如下
颜色纹理
颜色纹理只会将纹理的像素应用在几何体上。它等同于直接在 material 上设置 color 属性但是 color 属性只能设置一种颜色而颜色纹理可以为每一个位置设置颜色。
const textureLoader new THREE.TextureLoader();
const colorTexture textureLoader.load(path/to/color_texture.jpg);const material new THREE.MeshBasicMaterial({map: colorTexture // 增加颜色纹理
});法线纹理
法线纹理它不会移动顶点但是它会让光线认为面的朝向不同。所以看起来会有凹凸立体感。
const normalTexture textureLoader.load(./images/door/normal.jpg);const planeMaterial new THREE.MeshStandardMaterial({map: texture,normalMap: normalTexture, // 增加法线纹理
});立体视觉效果还是比较明显的 位移纹理
位移纹理是灰度图像它将移动顶点以创造一些高度。使用高度纹理你要添加更多的细分网格才能看到效果。
const displacementTexture textureLoader.load(./images/door/height.jpg);const planeGeometry new THREE.PlaneGeometry(3, 3, 16, 16); // 增加网格
const planeMaterial new THREE.MeshStandardMaterial({map: texture,normalMap: normalTexture,displacementMap: displacementTexture,// 增加高度纹理
});可以通过displacementScale控制位移的距离。 金属纹理
金属纹理metalness texture是灰度图像将指定哪个部分是金属白色和非金属黑色。此信息将有助于创造反射给 material 增加金属质感。
const metalTexture textureLoader.load(./images/door/metalness.jpg);const planeMaterial new THREE.MeshStandardMaterial({map: texture,normalMap: normalTexture,metalnessMap: metalTexture, // 增加金属纹理
}); 增加金属感是否有感觉我没看出来。 粗糙度纹理
粗糙度rougness texture经常和金属度纹理一起使用它也是灰度图它将指定哪个部分是粗糙的白色哪一部分是光滑的黑色。
const roughTexture textureLoader.load(./images/door/roughness.jpg);const planeMaterial new THREE.MeshStandardMaterial({map: texture,normalMap: normalTexture,metalnessMap: metalTexture, roughnessMap: roughTexture, // 增加粗糙度纹理
}); 这个例子看不出效果就不截图了。 环境光遮蔽纹理
环境遮挡纹理ambient occlusion texture是灰度图像它将在表面缝隙中添加假的阴影。虽然它在物理上不准确但它有助于创建对比度。
const aoTexture textureLoader.load(./images/door/ambientOcclusion.jpg);const planeMaterial new THREE.MeshStandardMaterial({map: texture,normalMap: normalTexture,metalnessMap: metalTexture, roughnessMap: roughTexture, aoMap: aoTexture, // 增加环境光遮蔽纹理
}); 环境纹理
环境纹理来模拟物体周围的环境光照和反射。环境纹理通常用于创建反射镜面效果或提供全局光照。 const sphere new THREE.Mesh(new THREE.SphereGeometry(2, 50, 50),new THREE.MeshPhysicalMaterial({roughness: 0,metalness: 0,color: 0xffea00,envMap: texture, // 设置环境纹理transmission: 1,ior: 2.3,}));看看这个玻璃球上的效果 重要参考资料 three.js - Textures Texture Mapping Three.js Texture Mapping Tutorial Texture
