Three.js——天空盒

参考文档

Threejs Scene

纯色背景

简单来说就是整个背景是纯色的，实际开发中很少用到这种情况，毕竟不是很好看。

scene.background = new THREE.Color(1, 0.5 ,1);

效果如下：

背景图

用一张图片来作为场景背景，不管场景怎么旋转，背景永远不变，表现效果一般。

scene.background = new THREE.TextureLoader().load("/test/1.png");

效果如下：

天空盒

这里的天空盒是使用THREE.CubeTextureLoader加载纹理材质，设置为场景背景来实现的。

scene.background = new THREE.CubeTextureLoader().load(["/test/Left.png","/test/Right.png","/test/Up.png","/test/Down.png","/test/Front.png","/test/Back.png",]);

需要注意的是这里的6个贴图是有顺序的，要不然会造成天空盒连接错乱。

效果如下：

背景模糊（backgroundBlurriness）

官方原话：Sets the blurriness of the background. Only influences environment maps assigned to Scene.background. Valid input is a float between 0 and 1. Default is 0.

背景增强（backgroundIntensity）

147版本之后新增的功能

官方原话：Attenuates the color of the background. Only applies to background textures. Default is 1.

简单来说就是用黑色遮挡背景，值为0时背景就是全黑。

尾语：

本人是threejs新手小白，写的不对的地方欢迎各位大佬批评指正。

Three.js——天空盒相关推荐

three 天空球_javascript – 分配给相机的three.js天空盒
我正在尝试将天空盒分配给播放器相机. 当相机移动时(天空箱随之移动),纹理会变得拉长. 如何摆脱这个? 码: var textureCube = THREE.ImageUtils.loadTextur ...
three.js天空盒贴地解决方案
loadSkyBox() { //加载天空盒var path = "static/model/skybox/"; //设置路径var format = '.jpg'; //设定格式 ...
three 天空球_用three.js创建一个简易的天空盒
本文创建的天空盒是用六张图片来创建的.笔者会论述两种方法来创建,都是最简单基本的方法,不涉及着色器的使用. 一种是创建一个盒子,然后将图片作为盒子6个面的纹理贴上来创建. 另一种则是简单的将纹理作为场 ...
three 天空球_three.js添加场景背景和天空盒（skybox）
本文我们介绍在three.js中如何给3D场景添加背景,我们有3种方式来实现这个目的.通过html添加背景元素,这实际上一个2D背景: 在three.js加载图片并设置为scene.backgroun ...
Vue中Three.js的天空盒
踩坑:vue使用three.js中CubeTextureLoader()加载图片不能直接使用load()路径获取,如.load( [ '-/-/img/posx.jpg', ] ).. .需要先req ...
可视化-three.js给星空加入一个天空盒
给地球添加一个天空盒样式如下背景添加六个图片形成天空盒子如立方体 6 个面行程之后包裹: 如果需要资源:https://download.csdn.net/download/qq_29814 ...
A-Frame.js 学习文档翻译（一）实体
A-Frame是什么 A-Frame是Mozilla 开源 web 虚拟现实框架,他能够非常方便的创建VR视口,载入部分格式的模型,设置照相机等,这为对计算机图形学不是很了解的同学,减轻了好多负担.我 ...
three.js创建简单的凹凸贴图
有时候我们需要某个场景或者物体突出其凹凸特征,让物体看起来更有层次感,怎么办?Three.js的许多材质就提供了凹凸贴图的属性,下面笔者以THREE.MeshPhongMaterial为例,演示如何对 ...
three.js贴图之CubeTextureLoader全景贴图
学习交流欢迎加群:789723098,博主会将一些demo整理共享有时候我们在创建地图街景或者地点全景图的时候,会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴 ...

Three.js——天空盒

Three.js——天空盒

参考文档

纯色背景

背景图

天空盒

背景模糊（backgroundBlurriness）

背景增强（backgroundIntensity）

尾语：

Three.js——天空盒相关推荐

最新文章

热门文章