- 博客(13)
- 资源 (12)
- 收藏
- 关注
RSS订阅原创 【Babylon小技巧04】进阶双开门事件绑定同时触发
鼠标点击其中一扇门时，另外一扇也同时开启或关闭效果如图双开门playground地址：Babylon.js Playgroundhttps://playground.babylonjs.com/#5F7R3K主要思路为使用combineAction绑定了多个模型的鼠标事件，顺便多绑定一个箱子做放大缩小测试let combineOpenDoorAction = new BABYLON.CombineAction( BABYLON.Action..
2022-03-17 16:35:11
1151
1
原创 【Babylon小技巧03】单开门事件绑定，代码设置模型中心点，辅助线xyz坐标系显示
效果如图单开门playground地址：Babylon.js Playgroundhttps://playground.babylonjs.com/#XU8VDN注意：通过代码调整中心点，inspector显示bug，显示的是初始中心点位置这段代码例子中 【左门】使用了【LocalPostion】进行设置中心点位置，相对于自身坐标系向x轴正向+1（pg里左门为了开门x是 -1）var doorMeshLeft = BABYLON.MeshBu...
2022-03-17 16:32:33
1158
原创 【Babylon小技巧02】第一人称移动时，限定视角抬头角度
例如展馆内，不希望用户看到头顶天花板，则需要设置抬头仰角范围只允许前后左右移动 室内不允许抬头scene.registerBeforeRender(function () { console.log(camera.rotation.x); if(camera.rotation.x>0.5 ){//look down camera.rotation.x = 0.5; }else if(camera.rotatio
2022-03-17 16:27:25
1061
原创 【Babylon小技巧01】点击dom按钮，鼠标焦点自动回到canvas画布上
例如通过弹窗的html的dom按钮，进行camera瞬移，让画布重新捕获鼠标焦点canvas.tabIndex = -1;canvas.focus();canvas.dispatchEvent(new KeyboardEvent('keydown',{'key':'Delete'}))//模拟键盘点击事件html的canvas的tabindex定义tabindex="-1"：表示元素是可聚焦的，但是不能通过tab导航来访问到该元素，可以通过js获取。 tabindex="0"：表...
2022-03-17 16:24:51
607
翻译 【翻译】WebGL 优化场景提高表现的基本操作
【原文出处】：Optimizing scenes for better WebGL performance - Soft8Softhttps://www.soft8soft.com/docs/manual/en/introduction/Optimizing-WebGL-performance.html目录优化场景以获得更好的WebGL性能表现几何体/网格额外补充：尽可能在制作模型时就优化好模型面数和模型拆分法线图贴图纹理额外补充（略长） Diffuse、BaseColor、
2022-03-17 16:20:14
619
原创 Babylonjs Playground中动态加载自己的glb gltf模型（github、dropbox）
目录以下提供两种常用的方法 （使用科学梯子）先说总结：对比 github和dropboxgithub外链使用方法方法一：rootUrl添加链接路径。sceneFilename必须置空方法二：rootUrl填写文件夹路径，sceneFileName填写对应的文件名字方法三：gltf+bin文件 见案例：额外补充：群友盲猜大佬整理的pg加载原神模型+卡通渲染，已被官方添加到首页demo案例墙上dropbox外链使用方法：①https://www.dropbox.com/ ..
2022-02-16 17:07:58
5113
2
原创 Babylonjs 基础教程与填坑④sandbox+inspector面板中的Mesh类
目录inspector基本操作1、在场景想要通过鼠标点击选中模型2、鼠标点击场景内的小桌子，选中模型后，可以通过左边的眼睛开关，确认是否选择正确。3、inspector左侧面板的上方的可以单选控制模型的transform值（移动、旋转、放大）额外补充:中心点pivot最好是模型师修改，也可以代码设置坐标点，查询api→Mesh→pivot。（1）点亮移动图标选项后，鼠标拖拽红绿蓝可以让模型沿着xyz轴移动，（2）点亮旋转图标选项后，红绿蓝圈可拖拽，分别表示绕着xyz轴旋转。【正常
2022-02-16 16:42:26
6908
原创 Babylonjs 基础教程与填坑③sandbox沙盒、inspector调试器操作教程【新手必看】和Camera类详解
简单介绍，无论是webgl程序员还是3D美术，都必须要学会用sandbox和inspector提高团队效率的必备工具例如模型师导出的gltf、glb模型，程序员通过代码加载模型，部署运行后才发现碎面破面、模型面出现闪烁、模型没有颜色、贴图反了等等bug，很多小伙伴不知道如何定位bug是模型师还是程序员的锅，这些bug有些是模型师的锅，比如模型面没有厚度、两个面贴太紧导致闪烁，法线反了导致模型黑色，uv贴错了导致贴图反了，有些bug是因为pbr材质，程序没写hdr环境，所以模型黑了；程序创
2021-05-19 11:47:36
6912
1
原创 Babylonjs 基础教程与填坑②editor在线编辑器操作教程【不推荐使用】
先说总结：【不推荐】使用这个editor编辑器；【推荐】使用inspector可以看看本编的题外话内容，算是踩坑小总结babylon官方编辑器 （我用的时候是4.1版本，以下吐槽部分皆为v3网页版本，v4客户端版本目前依旧不是完成品）http://editor.babylonjs.com/v3/4.1版本 网页版本http://editor.babylonjs.com/4.2版本，目前最新版，为本地下载客户端版本缺点：1.未完善，贴图的uv通道属性不能页面设置，api查...
2021-04-19 20:08:51
6421
原创 Babylonjs 基础教程与填坑①入门常用网址
入坑babylon.js一段时间了，现在项目上线了，整理一下基础的入坑姿势和部分填坑技巧，记录一下遇到过的一些问题。babylonjs大法好，在webgl领域，国内社区活跃度还比不过three，入坑时好多东西只能自己研究。目录先说总结：以下网址中，只是我先做一下简单概括笼统的整合网址链接，具体拓展放在之后章节（大概不咕）常用网址（国内）4.1版本 非最新版本有playground基本表示就有源码了 这点非常非常关键，babylon这点比three好非常多可以在线运行和ins.
2021-04-12 21:55:54
11703
原创 Babylonjs 在场景中优化处于实体墙后面的大量模型
Babylonjs 的摄像机转向时，如果镜头内有一面墙，墙不透明，墙后面一堆资源，比如花草树木无数个，会掉帧严重。这时候镜头内虽然看着只有墙，但是BJS的引擎把墙后面的模型也渲染了。例如墙后面有1000个球体，那么就可以隐藏这些球体模型。（表示1000个不同模型，否则同模型可用instance优化）先说总结，可以使用AssetContainer进行资源管理，removeAllFromScene后，场景内totals总模型数量就下降了，帧率就提高。测试用例截图和分析如下：1.墙后面有100
2020-12-07 23:27:31
1761
原创 webpack5.x 配合babel编译打包发布es5的代码
webpack5默认webpack命令，编译打包的代码为箭头函数，如图：按照webpack5特性里面的教程，output添加了 ecmaVersion: 5 无效果 output: { ecmaVersion: 5 , path: path.resolve(__dirname,'public'), filename: "bundle.js" },只需要新增 target: ['web', 'es5'], 编译后即为es5代码.
2020-12-03 15:11:51
4163
4
原创 Babylonjs 官网demo预览图合集整理 带说明
整理一份官方demo预览图，方便看图时可以直接了解所运用的相关技术，部分带简略文字说明可以从图片名称找到github内的源码，或者添加前缀访问 https://www.babylonjs.com/demos/+图片名称例如：https://www.babylonjs.com/demos/actions/babylon官网 https://www.babylonjs.com/ 的源码可以从github下载以下预览图为babylon官网部分demohttps://gi...
2020-10-23 21:47:13
4253
1
babylonjs 官方虚拟展厅.glb模型资源
2020-10-27
js完美实现同时拖拽、旋转、放大缩小图片的手势操作 ver2 添加图片截取功能
2016-04-21
canvas 手势拖拽旋转放大 crop截取图片 头像上传高清版本 (Tomcat 测试)
2016-04-18
实现canvas 图片拖拽旋转移动 点击转成base64
2016-04-14
js完美实现同时拖拽、旋转、放大缩小图片的手势操作
2016-04-11
h5完美实现移动端 手势同时控制图片 旋转 拖拽 放大 的源码
2016-04-11
Android读取doc(支持图片) 转html 并保存webview 成图片
2016-02-23
jOpenDocument jar包 1.4版
2016-02-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人