Threejs 材质贴图、光照和投影详解

1. 材质和贴图

材质(Material)定义了物体表面的外观,包括颜色、光泽度、透明度等。贴图(Textures)是应用于材质的图像,它们可以增加物体表面的细节和真实感。

1.1材质类型

  • **MeshBasicMaterial:**不受光照影响的基础材质。
  • **MeshLambertMaterial:**考虑漫反射的材质,适合简单的光照场景。
  • **MeshPhongMaterial:**考虑镜面高光的材质,适合光滑表面的物体。
  • **MeshStandardMaterial:**基于物理的材质,支持金属度和粗糙度贴图,适用于现代渲染管线。
  • **MeshPhysicalMaterial:**类似MeshStandardMaterial,但提供更高级的基于物理的渲染特性。

1.2 贴图的作用

  • map(颜色贴图):定义物体的基本颜色。
  • normalMap(法线贴图):通过模拟表面的微小凹凸来增加细节,不增加几何复杂度。
  • aoMap(环境光贴图):模拟物体表面因邻近物体遮挡而产生的暗部效果。
  • displacementMap(位移贴图):实际改变几何形状,创建真实的物理凹凸效果。
  • roughnessMap(粗糙度贴图):控制材质的金属性质和表面粗糙度。
javascript 复制代码
// 贴图
let textureLoader = new THREE.TextureLoader();
let floor = textureLoader.load("./images/base.jpg");
let ambient = textureLoader.load("./images/ambient.jpg");
let height = textureLoader.load("./images/height.jpg");
let normal = textureLoader.load("./images/normal.jpg");
let roughness = textureLoader.load("./images/roughness.jpg");

// 创建一个平面物体
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({
    map: floor, // 基础纹理贴图
    aoMap:ambient, // 环境光贴图
    displacementMap:height, // 位移贴图
    normalMap:normal, // 法线贴图
    roughnessMap:roughness,  // 粗糙度贴图

  }),
);

1.3 效果如下

2. 光照

光照是通过添加光源来实现的,光源类型包括:

  • 环境光(AmbientLight):提供全局照明效果,均匀照亮场景中的所有物体,不会产生阴影。

  • 平行光(DirectionalLight):模拟无限远的光源,如太阳,光线平行,不受距离影响。

  • 点光源(PointLight):从一个点向所有方向发出光线,光线强度随着距离增加而衰减。

  • 半球光(HemisphereLight) :光源直接放置于场景之上,光照颜色从天空光线颜色渐变到地面光线颜色。

  • 聚光灯(SpotLight):具有特定方向和圆锥形照射范围的光源,可以产生软边缘或硬边缘的阴影。

javascript 复制代码
// 1. 环境光:均匀的照亮场景中的所有物体。
const ambientLight = new THREE.AmbientLight(0xff0000);
// scene.add( helper );

// 2. 平行光:沿着特定方向发射的光。
const directionalLight = new THREE.DirectionalLight(0x00ffff, 1);
directionalLight.position.set(0, 5, 0)
// 平行光辅助对象
const directionalLighthelper = new THREE.DirectionalLightHelper( directionalLight, 1 );
// scene.add( helper );

// 3. 半球光:光源直接放置于场景之上,光照颜色从天空光线颜色渐变到地面光线颜色。
const hemisphereLight = new THREE.HemisphereLight( 0xff0000, 0x00ff00, 1 );
// scene.add( hemisphereLight );
// 半球光辅助对象
const hemisphereLighthelper = new THREE.HemisphereLightHelper( hemisphereLight, 1 );
// scene.add( hemisphereLighthelper );

// 4. 点光源:从一个点向各个方向发射的光源。
const pointLight = new THREE.PointLight( 0xff0000, 1, 100 ); // 第二个参数1是光照强度,第三个参数100是光源的衰减距离
scene.add( pointLight );
// 点光源辅助对象
const pointLightHelper = new THREE.PointLightHelper( pointLight, 1 );
scene.add( pointLightHelper );

3. 投影

投影需要确保渲染器和光源都支持阴影,并设置物体的castShadowreceiveShadow 属性。阴影的质量可以通过调整光源的shadow.mapSize和其他阴影参数来优化。

javascript 复制代码
// 投影: 光源  物体  渲染器

// 平行光:沿着特定方向发射的光。
const directionalLight = new THREE.DirectionalLight(0x00ffff, 1);
directionalLight.position.set(5, 5, 0)
scene.add(directionalLight);
// 平行光辅助对象
const directionalLighthelper = new THREE.DirectionalLightHelper(directionalLight, 1);
scene.add(directionalLighthelper);

// 创建一个平面物体
let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({ color: 0xffffff })
);
plane.rotation.x = -Math.PI / 2;

// 创建一个立方体物体
let cube = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  new THREE.MeshStandardMaterial()
);
cube.position.set(0, 2, 0)


// 1.开启渲染器,支持投影
renderer.shadowMap.enabled = true;
// 2.物体开启阴影
cube.castShadow = true;
// 3.接收阴影的物体
plane.receiveShadow = true;
// 4.光照开启阴影
directionalLight.castShadow = true;
// 5.阴影分辨率
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
工业3D_大熊7 小时前
HOOPS Web Platform:3D模型轻量化与可视化的高效解决方案
3d·3d web轻量化·3d建模·3d模型轻量化·3d数据格式转换·工业3d·几何建模
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈