Three.js开发：环境贴图效果

Three.js支持环境贴图效果，通过设置场景的背景（background），增强显示效果，环境贴图一般使用全景图，分成6张图片，以立体贴图（CubeTexture）的方式进行加载。
官网示例效果：

环境贴图添加：
在Three.js中设置环境贴图的方式如下：

 scene.background
= new THREE.CubeTextureLoader().setPath('相对目录文件夹，里边包含6张贴图/').load( ['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg'] );

图片的排放顺序依次是：x轴正方向-x轴负方向-y轴正方向-y轴负方向-z轴正方向-z轴负方向；
按照Three.js创建的默认坐标系中，图片对应的方位是：右侧-左侧-上边-下边-前边-后边；
将背景设置成以上的贴图即可显示效果。
加载完成效果如下：

在Three.js加载的对象中，材质（material）属性的envmap设置成 scene.background，就能够模拟显示物体的反光效果，如上图显示效果。

 const materialbase = new THREE.MeshBasicMaterial( { color: 0x00ff00,
envMap:scene.background
} );

参考内容：
https://threejs.org/examples/?q=envMap#webgl_materials_envmaps
https://threejs.org/docs/index.html?q=sce#api/en/scenes/Scene

Three.js开发：环境贴图效果相关推荐

计算机系统的搭建步骤,电脑搭建Node.js开发环境的操作教程[多图]
电脑如何搭建Node.js开发环境?近日有用户询问怎么在Win7系统电脑上搭建Node.js开发环境,今天教程之家就给大家分享Node.js开发环境的搭建教程. 操作步骤: 1.下载Node.js官方 ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
vscode中装js解释器_h5学习记录（1）--vscode配置js开发环境
文笔不是很好,第一次写东西,主要为了记录h5的学习过程.今天记录的是vscode配置js开发环境. 什么是VSCode Visual Studio Code (简称VS Code/VSC) 是一款于2 ...
手把手教你学node之搭建node.js开发环境
搭建node.js开发环境本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...
arduino与java,Arduino具有与Java和C语言类似的IDE集成开发环境和图形化编程环境
Arduino具有与Java和C语言类似的IDE集成开发环境和图形化编程环境更多相关问题听力原文:W: Hi, Steve, good to see you are up and around a ...
Vue.config.js开发环境与生产环境配置
Vue.config.js开发环境与生产环境配置首先在项目根目录创建 .env.development 开发环境 .env.production 生产环境 VUE_APP_SERVICE_URL V ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
在windows环境下基于sublime text3的node.js开发环境搭建
摘自:http://blog.sina.com.cn/s/blog_5a6efa330102vcla.html (略有修改) 首先安装sublime text3,百度一堆,自己找吧.理论上subli ...
sublime67linter-php,Sublime Text 3 搭建 React.js 开发环境
Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQue ...

Three.js开发：环境贴图效果

Three.js开发：环境贴图效果相关推荐

最新文章

热门文章