怎么建立网站 个人热点,网站建设平台有哪些 谢谢平台建站,做影评的网站模版,微信公众号做电影网站要域名吗系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…
系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 OrbitControls Three.js 快速入门教程【七】常见几何体类型 Three.js 快速入门教程【八】常见材质类型 Three.js 快速入门教程【九】光源类型 Three.js 快速入门教程【十】常见的纹理类型 文章目录 系列文章目录一、前言二、纹理基础概念二、常见纹理类型1. 普通纹理Texture1.1 使用的加载器1.2 示例(1) 示例1——立方体6面贴图(2) 示例2——地球 2. 法线纹理NormalTexture2.1 使用的加载器2.2 核心代码 3. 凹凸纹理BumpTexture3.1 使用的加载器3.2 核心代码3.3 与法向纹理区别 4. 立方体纹理CubeTexture4.1 使用的加载器4.2 示例示例1——实现一个天空盒CubeTexture 的映射方式 示例2——反射周围的环境 5.视频纹理VideoTexture 使用的加载器 示例 五、免费纹理资源六、总结 一、前言 在 Three.js 中纹理是为 3D 模型添加细节和真实感的重要元素。通过纹理我们可以为模型表面赋予各种材质和图案如木纹、石纹、金属光泽等。本文将介绍 Three.js 中一些常见的纹理类型和使用讲解。 二、纹理基础概念 在 Three.js 里Texture纹理 可以理解为是一种数据大部分是图片它被映射到 3D 模型的表面上用来模拟各种材质的外观比如木材的纹理、金属的光泽、石头的表面等等。通过合理地应用纹理我们能够让 3D 模型看起来更加逼真和生动 在 Three.js 中纹理是通过 Texture 类及其子类来表示的。Texture 类是所有纹理的基类它定义了纹理的一些通用属性和方法。常见的纹理子类包括 TextureLoader、CubeTextureLoader 等用于加载不同类型的纹理。 二、常见纹理类型
1. 普通纹理Texture 普通纹理是最基本的纹理类型,也是所有纹理的基类它直接使用一张图片作为纹理。在 Three.js 中通常使用 TextureLoader 来加载纹理图片。 1.1 使用的加载器
TextureLoader
1.2 示例
(1) 示例1——立方体6面贴图
// 创建纹理
const textureLoader new THREE.TextureLoader();
//加载纹理图片
const texture textureLoader.load(texture.jpg);
// 创建材质并应用纹理
const material new THREE.MeshBasicMaterial({ map: texture });
// 创建一个立方体
const geometry new THREE.BoxGeometry(5,5,5);
const mesh new THREE.Mesh(geometry, material);
scene.add(mesh); (2) 示例2——地球
// 创建纹理
const textureLoader new THREE.TextureLoader();
//加载纹理图片
const texture textureLoader.load(earth.jpg);
// 创建材质并应用纹理
const materials new THREE.MeshLambertMaterial({ map: texture })
// 创建一个球体
const geometry new THREE.SphereGeometry(1, 32, 32);
const mesh new THREE.Mesh(geometry, material);
scene.add(mesh);ps:材质构造函数有个map属性可设置普通纹理 2. 法线纹理NormalTexture 法线纹理用于模拟表面的凹凸效果通过改变表面的法线方向来产生光影变化所以虚拟场景中至少有一个光源如点光源PointLight、平行光DirectionalLight或聚光灯SpotLight等。法线纹理通常是一张 RGB 格式的彩色图片每个像素的颜色值表示法线的方向。 2.1 使用的加载器
TextureLoader
2.2 核心代码
//加载普通纹理
const textureLoader new THREE.TextureLoader();
const texture textureLoader.load(texture.png);// 加载法线纹理
const normalTextureLoader new THREE.TextureLoader();
const normalTexture normalTextureLoader.load(normal_texture.jpg);// 创建一个材质并应用法线纹理
const material new THREE.MeshStandardMaterial({map: texture,//普通纹理normalMap: normalTexture,//法线纹理normalScale: new THREE.Vector2(1, 1) // 控制法线纹理的强度
});
//创建一个长方体
const geometry new THREE.BoxGeometry(100, 50,10);
const mesh new THREE.Mesh(geometry, material );
scene.add(mesh);物理、标准或高光材质构造函数有个normalMap属性设置法线纹理normalScale属性 是一个 Vector2 对象用于控制法线贴图的强度值越大表面凹凸感越强 3. 凹凸纹理BumpTexture 凹凸纹理是一张灰度图像图像中的每个像素值代表该位置表面的相对高度。较亮的像素代表凸起较暗的像素代表凹陷。在光照计算时Three.js 会根据凹凸纹理的像素值来调整表面法线的方向从而模拟出凹凸的视觉效果实际上几何形状并未被改变所以虚拟场景中和法线纹理一样要求至少有一个光源。 3.1 使用的加载器
TextureLoader
3.2 核心代码
//加载普通纹理
const textureLoader new THREE.TextureLoader();
const texture textureLoader.load(texture.png);// 加载凹凸纹理
const bumpTextureLoader new THREE.TextureLoader();
const bumpTexture bumpTextureLoader.load(bump_texture.png);// 创建一个材质并应用凹凸纹理
const material new THREE.MeshStandardMaterial({map: texture,//普通纹理bumpMap: normalTexture, //凹凸纹理bumpScale:1, // 调整凹凸效果的强度
});
//创建一个矩形平面
const geometry new THREE.PlaneGeometry(100, 100);
const mesh new THREE.Mesh(geometry, material );
scene.add(mesh );物理、标准或高光材质构造函数有个bumpMap属性设置凹凸纹理bumpScale属性 用于控制凹凸效果的强度值越大表面凹凸感越强
3.3 与法向纹理区别
1、 原理不同 凹凸纹理通过灰度值区别呈现凹凸效果而法向纹理通过每个像素的 RGB 值偏移量设置实现 2、效果表现 凹凸纹理效果相对较为柔和、简单。在表现小尺度的细节和高光反射时不够真实通常用于表现一些相对平滑、低细节的表面凹凸如轻微的波纹、粗糙的石头表面等。 法向纹理能够呈现出非常精细、真实的表面细节和凹凸效果。高光和阴影的过渡更加自然即使在近距离观察或物体表面角度变化较大时也能保持良好的视觉效果适用于表现具有丰富细节的表面如砖块的缝隙、皮革的纹理、金属的划痕等。 4. 立方体纹理CubeTexture 立方体纹理是由六个单独的纹理面通常是正方形图片组成这些面分别对应一个虚拟立方体的六个面正面、背面、顶面、底面、左面和右面。在 Three.js 场景中它常被用于模拟环境比如天空盒让场景中的物体仿佛处于一个真实的环境当中也可以用于反射效果使物体能够反射周围的环境。 4.1 使用的加载器
CubeTextureLoader
4.2 示例
示例1——实现一个天空盒
// 创建 CubeTextureLoader
const cubeTextureLoader new THREE.CubeTextureLoader();
// 加载立方体纹理的六张图片
// 这里的路径示例请根据实际情况修改
cubeTextureLoader.setPath(textures/);
cubeTextureLoader.load([px.jpg, // 右面nx.jpg, // 左 面py.jpg, // 上 面ny.jpg, // 下 面pz.jpg, // 前 面nz.jpg // 后 面],(cubeTexture) {// 设置纹理的映射方式cubeTexture.mapping THREE.CubeReflectionMapping;// 创建一个用于天空盒的材质const skyboxMaterial new THREE.MeshBasicMaterial({envMap: cubeTexture,//环境贴图side: THREE.BackSide //渲染背面});// 创建一个大的立方体作为天空盒const skyboxGeometry new THREE.BoxGeometry(1000, 1000, 1000);const skybox new THREE.Mesh(skyboxGeometry, skyboxMaterial);scene.add(skybox);}
);在上述代码中我们首先创建了 CubeTextureLoader 实例通过 setPath 方法设置图片的路径前缀然后使用 load 方法加载六张分别对应立方体六个面的图片。当加载完成后我们设置了纹理的映射方式为 THREE.CubeReflectionMapping用于反射效果并创建了一个 MeshBasicMaterial 材质将立方体纹理应用到该材质上最后创建一个大的立方体作为天空盒添加到场景中。 运行效果 天空盒示例 CubeTexture 的映射方式 纹理mapping属性控制着纹理在模型表面的映射方式 CubeTexture 有不同的映射方式常见的有
THREE.CubeReflectionMapping这种映射方式常用于模拟物体的反射效果让物体能够反射周围的环境。例如在创建一个金属质感的物体时使用这种映射方式可以让物体看起来像是反射了周围的场景。THREE.CubeRefractionMapping用于模拟折射效果比如创建一个透明的玻璃物体时通过这种映射方式可以让物体产生折射的视觉效果仿佛光线穿过了物体。
ps:立方体纹理要求用于六个面的图片是正方形也就是长宽一样
示例2——反射周围的环境 在示例1基础上我们新建一个光滑的球体使其表面反射周围环境 // 创建 CubeTextureLoader
const cubeTextureLoader new THREE.CubeTextureLoader();
// 加载立方体纹理的六张图片
// 这里的路径示例请根据实际情况修改
cubeTextureLoader.setPath(textures/);
cubeTextureLoader.load([px.jpg, // 正 X 面nx.jpg, // 负 X 面py.jpg, // 正 Y 面ny.jpg, // 负 Y 面pz.jpg, // 正 Z 面nz.jpg // 负 Z 面],(cubeTexture) {// 设置纹理的映射方式cubeTexture.mapping THREE.CubeReflectionMapping;// 创建一个用于天空盒的材质const skyboxMaterial new THREE.MeshBasicMaterial({envMap: cubeTexture,side: THREE.BackSide //渲染背面});// 创建一个大的立方体作为天空盒const skyboxGeometry new THREE.BoxGeometry(1000, 1000, 1000);const skybox new THREE.Mesh(skyboxGeometry, skyboxMaterial);scene.add(skybox);// 创建一个球体几何体const geometry new THREE.SphereGeometry(1, 32, 32);// 创建一个标准材质const material new THREE.MeshStandardMaterial({metalness: 1,//金属性roughness: 0.05, //粗糙度envMap:cubeTexture//环境贴图});// 创建球体网格const sphere new THREE.Mesh(geometry, material);scene.add(sphere);}
);5.视频纹理VideoTexture VideoTexture 本质上是 Three.js 对 HTML5 元素的一种封装它能够实时地将视频内容映射到 3D 模型上使得模型表面呈现出动态的画面。与普通的静态纹理如图片纹理不同VideoTexture 会随着视频的播放而不断更新创造出诸如动态广告屏幕、虚拟视频墙等有趣的效果 使用的加载器
VideoTexture
示例
html
video idmyVideo autoplay loop mutedsource srcyour_video_file.mp4 typevideo/mp4
/videohtml文件中创建一个 元素并设置好视频的源文件、自动播放等属性 js
import * as THREE from three;// 获取 HTML 中的视频元素
const video document.getElementById(myVideo);
// 创建 VideoTexture
const videoTexture new THREE.VideoTexture(video);
// 创建一个长方体几何体
const geometry new THREE.BoxGeometry(10, 5,1);
// 创建材质并应用视频纹理
const material new THREE.MeshBasicMaterial({ map: videoTexture });
const mesh new THREE.Mesh(geometry, material);const scene new THREE.Scene();
const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);scene.add(mesh);
camera.position.z 10;function animate() {requestAnimationFrame(animate);// 更新视频纹理videoTexture.needsUpdate true;renderer.render(scene, camera);
}
animate();五、免费纹理资源
免费的纹理资源可以访问Poly Haven网站该网站不仅有免费纹理资源还有3d模型和全景图片提供下载调试 六、总结 通过本文的介绍我们了解了 Three.js 中一些常见的纹理类型及其使用方法对纹理在 3D 场景构建中的作用有了较为全面的认识。从基础的 Texture 加载和应用到 CubeTexture 为场景带来的环境映射效果每一种纹理都有着独特的功能和应用场景。在实际开发中可以根据具体需求灵活运用这些纹理和属性打造出独特的 3D 效果。 更多three.js入门知识点请关注该系列教程后续的更新。
