Three.js 环境贴图 .envMap - 文章教程

Three.js 环境贴图 .envMap

发布于 2021-08-23 字数 2424 浏览 1014 评论 0

Three.js 环境贴图 .envMap 字面意思就是三维模型周边环境,比如你渲染一个立方体,立方体放在一个屋子里面,屋子里面的周边环境肯定影响立方体的渲染效果,目的是为了渲染该立方体而不是立方体周围环境,为了更方便所以没必要创建立方体周边环境所有物体的网格模型,可以通过图片来表达立方体周边的环境。

创建一个立方体盒子作为天空盒使用,然后把一个环境中上下左右前后六张视图图片作为立方体盒子的纹理贴图使用。

var geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
var loader = new THREE.CubeTextureLoader();
// 所有贴图在同一目录下,可以使用该方法设置共用路径
loader.setPath('环境贴图/');
// 立方体纹理加载器返回立方体纹理对象CubeTexture
var CubeTexture = loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
//材质对象Material
var material = new THREE.MeshPhongMaterial({
  //网格模型设置颜色,网格模型颜色和环境贴图会进行融合计算
  // color:0xff0000,
  envMap: CubeTexture, //设置环境贴图
  // 环境贴图反射率   控制环境贴图对被渲染三维模型影响程度
  // reflectivity: 0.1,
});
console.log(CubeTexture.image);
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

loader.load('./heart/model.obj', function(obj) {
  // 控制台查看返回结构:包含一个网格模型Mesh的组Group
  console.log(obj);
  scene.add(obj);
  mesh = obj.children[0]; //获得心脏网格模型
  mesh.scale.set(10, 10, 10); //网格模型缩放
  // 创建一个纹理加载器
  var textureLoader = new THREE.TextureLoader();
  // // 加载颜色纹理
  var texture = textureLoader.load('./heart/color.png');
  mesh.material.map = texture;
  // // 加载法线贴图,表面细节更丰富
  var textureNormal = textureLoader.load('./heart/normal.png');
  mesh.material.normalMap = textureNormal
  // 设置深浅程度
  mesh.material.normalScale.set(1.5, 1.5)
  // 设置高光贴图,一个网格模型不同的区域反射光线的能力不同
  var textureSpecular = textureLoader.load('./heart/Specular.png');
  mesh.material.specularMap = textureSpecular;
  mesh.material.specular.set(0xffffff);// 高光反射颜色
  mesh.material.shininess = 100;// 高光高亮程度,默认30
  // 设置环境贴图,反射周围环境,渲染更逼真
  var textureCube = new THREE.CubeTextureLoader()
    .setPath('环境贴图/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
  mesh.material.envMap = textureCube;
})

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

38 文章
6 评论
23736 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0