首页 > 其他分享 >babylon.js 学习笔记(8)

babylon.js 学习笔记(8)

时间:2023-06-04 11:15:47浏览次数:49  
标签:babylon skyboxMaterial scene 笔记 js skybox var new BABYLON

上回继续,现在的村庄已经有点象样了,但是远处的背景仍比较单调(如下图),今天来学习如何处理天空背景。

babylon.js中,把整个空间假象成一个巨大的立方体(称为SkyBox),然后依次给立方体的6个面,贴上天空的背景图(如下图)

在代码中只要指定这6张图的rootUrl即可,babylon.js会自动拼上一系列后缀,按如下约定去加载图片:

_px.jpg _nx.jpg _py.jpg _ny.jpg _pz.jpg _nz.jpg

这个不用死记:p指positive(坐标轴正向),n指negtive(坐标轴负向),所以_px.jpg,即贴在x轴正向(即:立方体右面),类似的 _nz.jpg,就是z轴负方向(立方体前面)

参考代码如下:重点在于CubeTexture的使用

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 40, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
    light.diffuse = new BABYLON.Color3(1, 0, 0);

    // Skybox
    var skybox = BABYLON.MeshBuilder.CreateBox("skyBoxDemo", { size: 15.0 }, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox1", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    return scene;

};

注意目录的相对路径:

在线地址: https://yjmyzz.github.io/babylon_js_study/day08/01.html

当这个SkyBox放到足够大时,就会产生天空背景的效果: 

var createScene = function () {
    ...
    //设置摄像机的radius为5(离目标近一点)
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
   ...
    //Skybox(设置size调整成1000)
    var skybox = BABYLON.MeshBuilder.CreateBox("skyBoxDemo", { size: 1000.0 }, scene);
    ...
    return scene;

};

在线地址 :https://yjmyzz.github.io/babylon_js_study/day08/02.html

 

将这个天空背景应用到先前画的村庄:

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 3.5, Math.PI / 1.5, 30, new BABYLON.Vector3(0, 0, 0));

    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    //导入村庄的模型
    BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "valleyvillage.glb");

    // Skybox
    var skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000.0 }, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skybox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    //限制攝像的視角
    camera.upperBetaLimit = Math.PI / 2.2;

    return scene;
}

在线地址: https://yjmyzz.github.io/babylon_js_study/day08/03.html

 

 

参考文档:

https://doc.babylonjs.com/features/introductionToFeatures/chap5/sky

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/reflectionTexture

 

标签:babylon,skyboxMaterial,scene,笔记,js,skybox,var,new,BABYLON
From: https://www.cnblogs.com/yjmyzz/p/babylon_js_study_8.html

相关文章

  • backbone.js 初探[转]
    什么是backbonebackbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架。主要提供了3个东西:1、models(模型)2、collections(集合)3、views(视图)backbone.js文件本身很小,压缩后只有5.3KB,作为一个框架级别的核心JS文件,这个数字很可怕。除此之外,这个JS还必须依赖于另一个JS文......
  • [刷题笔记] LuoguP2658 汽车拉力比赛
    ProblemSolution需要找到最小满足题意的\(d\),显然\(d\)满足单调性,考虑二分二分\(d\),然后直接bfs,每次bfs判断能不能走的时候还需要加上高度差不超过二分的\(d\)(即满足),bfs跑完后看看所有的路标都被访问了没。(可以记录个数,因为不可能重复走)二分的时候注意\(l\)从0开始,不然会WA......
  • CoreJava笔记
    Day1-java基础java发展史1995年SUN公司发布了java2005年将JDK1.5更名为JDK5.02009年Oracle收购了SUN公司2014年推出了JDK8.0....java的优势简单纯面向对象开源跨平台前期准备安装JDK配置环境变量JAVA_HOME:JDK的安装路径作用:告知计算机其他软......
  • HTML-“多媒体与嵌入”的笔记
    目录HTML中的图片怎样将一幅图片放到网页上?备选文本宽度和高度Imagetitles图片标题通过为图片搭配说明文字的方式来解说图片CSS背景图片视频和音频内容web中的音频和视频<video>元素使用多个播放源以提高兼容性其他<video>特性<audio>标签重新播放媒体音轨增删事件显示音......
  • 《自己开发一套权限管理系统》学习笔记
    一:为什么要自己写?目前的SpringSucrity、ApacheShiro也会有无法满足实际的业务的情况下的相关配置内容。目前的SpringSucrity、ApacheShiro没有界面操作和查看目前的SpringSucrity、ApacheShiro无法达到期望更细致的管理二:基本目标基于开展的RBAC实现易于扩展,能灵活适应需......
  • TypeScript编程 读书笔记
    @目录TypeScript编程读书笔记TypeScript概述关于编译器类型系统javascript和typescript类型系统比较类型全解什么是类型类型术语类型浅谈anyunknownbooleannumberbigintstringsymbol对象类型别名、并集、交集类型别名并集类型和交集类型数组元组null、undefined、void和never枚举......
  • [刷题笔记] ybt1250:The Castle
    ProblemSolution显然bfs,只不过扩散的时候需要判断墙那么如何判断墙呢?题目只给出了每个方块墙方向的和原来的思路是可以暴力,很复杂但是可做,代码就不给了。后来教练讲到了可以用位运算巧妙实现,这里重点介绍一下:首先,我们观察一下每面墙代号的二进制:十进制二进制100......
  • 《贪婪的多巴胺》笔记
    前言在你的大脑中,“向下”的世界由一些被称为神经递质的化学物质所控制,它们让你体验满足感,享受你当下拥有的一切。但当你把注意力转到“向上”的世界,你的大脑则依赖另一种化学物质——一个单一的分子,它不仅让你突破指尖所指的领域,而且激励你去追求、控制、拥有你无法即刻......
  • 2023.6 做题笔记
    【集训队互测2023】森林游戏He_Renorz把得分重新定义:先手选一个数,增加得分,后手减小得分,先手想最大化得分,后手想最小化得分。先考虑一个特殊情况:森林中的每一棵树都是一条链,且每条链从前往后不增。两个人的策略都是选择能选的点中权值最大的,也就是说这个森林等价于将所有权值......
  • [刷题笔记] ybt1255:迷宫问题
    题目传送门Solution数据范围很小,一共才\(5\times5\),所以乱搞做法很多比如我一开始就先bfs单纯跑最短路,然后dfs找路径但是忘回溯被嘲讽其实可以边bfs边记录路径,因为bfs是按层数搜的,所以第一次到达终点的路径一定是最优的。那么如何记录路径呢?我原来用pair,经教练指导发现可以......