【开发总结】—— BABYLON 项目开发必备系列
前言:在公司主要使用Babylon.js作为前端引擎,我自己在开发中总结到基本上每一个新项目都会需要这些基本设置。
一、ios兼容:解决镜面反射 |
如果不加offline,材质中有镜面反射,苹果手机都会打不开项目
//ios兼容,解决镜面反射
var offline;
if (os.isPhone) {
offline = false
} else {
offline = true
} var demo = {
scene: 'MI8',
binary: true,
offline: offline,
二、提高支持硬件的质量(在查看器中应该是动态的) |
var scale = Math.max(1 / (window.devicePixelRatio || 2));
engine.setHardwareScalingLevel(scale);
三、如果模型把材质都赋给了blank材质球,需手动赋材质 |
在JSON中分出两套材质,实现调试后即时保存
var mats = {};
function initMaterial() {
//分材质
scene.meshes.forEach(function (mesh) {
if (mesh.material && mesh.material.name == "blank") {
var mat1 = new BABYLON.StandardMaterial(mesh.name + 'mat', scene);
var mat2 = new BABYLON.StandardMaterial(mesh.name + 'mat_2', scene); if (!mats[mesh.name]) {
mats[mesh.name] = {}
}
}
if (mesh.material && mesh.material.diffuseTexture) {
var text = mesh.material.diffuseTexture;
mesh.material.opacityTexture = text;
mesh.material.backFaceCulling = false;
}
mesh.isPickable = true;
}); // if (os.isPc) {
// openDebug();
// } //initSceneByJSON(json);
遍历获取两套材质一定要在开启调试链接,初始化json后:
for (key in mats) {
mats[key].mat1 = scene.getMaterialByName(key + "mat");
mats[key].mat2 = scene.getMaterialByName(key + "mat_2");
//默认显示的材质
scene.getMeshByName(key).material = scene.getMaterialByName(key + "mat_2");
}
按钮切换分别为:
for (key in mats) {
scene.getMeshByName(key).material = scene.getMaterialByName(key + "mat");
//console.log(scene.getMeshByName(key).material.name)
}
for (key in mats) {
scene.getMeshByName(key).material = scene.getMaterialByName(key + "mat_2");
//console.log(scene.getMeshByName(key).material.name)
}
四、初始化场景、材质等资源 |
function initHUA(){
function initScene(){
//透明背景
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); //全部材质可pick
scene.meshes.forEach(function(mesh){
mesh.isPickable = true;
if(mesh.animations.length){
scene.beginAnimation(mesh, 0, 0, false)
}
}); //isready = true;
} function initCamera(){
window.camera = new BABYLON.ArcRotateCamera("Camera",0 ,0.8 ,0, new BABYLON.Vector3(0,0,0),scene); //限制范围
camera.lowerBetaLimit = 0.95;
camera.upperBetaLimit = 1.25;
//camera.lowerAlphaLimit = -Math.PI / 6;
//camera.upperAlphaLimit = Math.PI / 6;
camera.lowerRadiusLimit = 45;
camera.upperRadiusLimit = 65; //变焦速度
camera.wheelPrecision = 1;
camera.pinchPrecision = 1;
camera.zoomOnFactor = 50; ////调整参数
camera.radius = 52;
camera.alpha = 0;
camera.beta = 1.25;
camera.targetScreenOffset.y = -10;
camera.inertia = 0.85;
camera.useAutoRotationBehavior = false; scene.activeCamera = camera;
camera.attachControl(canvas,true);
} function initLight(){
var hem = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0),scene);
hem.intensity = 0.3; //创建缓冲函数 - Bezier曲线自定义缓冲
//var easingFunction = new BABYLON.BezierCurveEase(.5,.21,.06,.98);
}
五、微信钉钉兼容性问题 |
- 微信中Dom元素全部需要放在canvas上面,放在下面会被场景挡住,设置z-index也没用
- 钉钉中的动画全部需要兼容-webkit前缀,因为钉钉内嵌chrome
- 注意@keyframes加前缀的形式是:@-webkit-keyframes
六、微信分享 |
<script type="text/javascript">
try{
wxShareConfig({
shareTitle: "小米8",
shareLink: window.location.href,
shareImgUrl: "https://forreall.cn/3ds/app/MI8/img/logo.png",
shareDesc: "8周年旗舰手机"
});
}catch(e){
}
</script>
七、数据/事件统计 |
//点击事件统计
try {
Forreall3d.trackEvent('_trackEvent', '小米8', '点
击', '切换普通版');
} catch (e) {
}
注意:点击事件有效时才统计一次,无效点击不统计
//旋转事件统计
Forreall3d.eventDetect("花儿送给你");
八、数字型loading |
<script src="../../js/loading.js"></script>
Fn1要放在demo前:
function fn1(num){
$('.loadwrap-first .heart').html(num);
}
Fn2和loading放在最后:
//loading
function fn2(){
$(".loadwrap-first").fadeOut();
}
loading(scene,fn1,fn2);
版权声明:本文原创,非本人允许不得转载
【开发总结】—— BABYLON 项目开发必备系列的更多相关文章
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(八)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(九)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(一)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- ASP.NET MVC开发:Web项目开发必备知识点
最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...
随机推荐
- jquery使用ajax传内容到asp.net乱码解决【转】
转自:http://www.cnblogs.com/qiantuwuliang/archive/2009/08/02/1537160.html#undefined Jquery强大的功能越来越收到广大 ...
- RESTful-rest_framework版本控制、分页器-第六篇
版本控制: 源码位置分析第一步: 源码位置分析第二步:在APIView-despath方法-initial-determine_version #执行determine_version,返回两个值, ...
- csapp 深入理解计算机系统 csapp.h csapp.c文件配置
转载自 http://condor.depaul.edu/glancast/374class/docs/csapp_compile_guide.html Compiling with the CS ...
- leetcode NO.171 Excel表列序号 (python实现)
来源 https://leetcode-cn.com/problems/excel-sheet-column-number/description/ 题目描述 给定一个Excel表格中的列名称,返回其 ...
- Linux系统基础优化总结
请称呼我搬运工,哈哈 优化综合 https://www.cnblogs.com/yinshoucheng-golden/p/6149556.html (1)不用root管理,以普通用户的名义通过sud ...
- Log4j官方文档翻译(二、架构设计)
log4j遵循层次化架构,每个层都有不同的对象来执行不同的任务.这种层次话的结构灵活设计.易于未来的扩展. log4j框架中有两种对象: 核心对象:框架的支撑对象,是框架必不可少的组成部分. 支撑对象 ...
- BZOJ 2752:[HAOI2012]高速公路(road)(线段树)
[HAOI2012]高速公路(road) Description Y901高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站.Y ...
- 【bzoj4810】[Ynoi2017]由乃的玉米田 莫队算法+STL-bitset
题目描述 由乃在自己的农田边散步,她突然发现田里的一排玉米非常的不美.这排玉米一共有N株,它们的高度参差不齐. 由乃认为玉米田不美,所以她决定出个数据结构题 这个题是这样的: 给你一个序列a,长度为n ...
- 【神题】AtCoder 028 C Min Cost Cycle
TO BE DONE 思维题 十分巧妙的转化
- SYZOJ 186 [额]你猜是不是DP(哈希+二分答案+二分搜索)
题目描述 现在给两个仅包含小写字母的字符串a,b ,求a 与b的最长公共连续子串的长度. 输入格式 两个字符串 输出格式 一个整数,为输入的两个字符串的最长公共连续子串的长度 测试样例 输入 qa ...