Open picacure opened 7 years ago
使用Hilo3d V1.0 Alpha版本渲染38女王节AR 互动打斗场景截图:
好,我们使用Hilo 3d实现以上效果:
var camera = new Hilo3d.PerspectiveCamera({ aspect: innerWidth / innerHeight, far: 1000, near:0.1, fov:75, y:4, z:3 });
var dpr = window.devicePixelRatio; var stage = new Hilo3d.Stage({ container: document.getElementById('container'), camera: camera, width: innerWidth * dpr, height: innerHeight * dpr }); if(dpr > 1){ stage.canvas.style.width = innerWidth + "px"; stage.canvas.style.height = innerHeight + "px"; }
为了避免锯齿现象,我们把Canvas画布的对象真实宽高置为window.devicePixelRatio倍,同时将画布的css的宽高置为当前窗口大小。
window.devicePixelRatio
避免锯齿的方法除了上面的方式,修改着色器也是方法之一,以后再做阐述。
var ticker = new Hilo3d.Ticker(60); ticker.addTick(stage); ticker.addTick(Hilo3d.Tween); ticker.addTick(Hilo3d.Animation); ticker.start();
Hilo3d.Tween
Hilo3d.Animation
借助海螺码头素材转化能力,我们将3D设计师提供给我们的3d素材转换成Hilo3d指定渲染格式(glTF)
var res = [{ "id": "soldier", "src": "//cx.alicdn.com/tmx/1cf44ad84cc97b8a24e411d7caed0719.gltf" },{ "id": "ground", "src": "//cx.alicdn.com/tmx/429cd105280881c86312f1f7aabd908e.gltf" }, { "id": "player0", "src": "//cx.alicdn.com/tmx/076728f9a1d45e926fe70f7efe625bf5.gltf" },{ "id": "player1", "src": "//cx.alicdn.com/tmx/0551344875278d5619b175f02d3075d1.gltf" } ];
var loadQueue = new Hilo3d.LoadQueue(); loadQueue.add(res).on('complete', function(){ res.forEach(function(r){ var node = loadQueue.getContent(r.id).node; node.getChildByName('RootNode').setScale(0.01); res[r.id] = node; }); init(); }).start();
Hilo3d.LoadQueue: Hilo3d下载队列,Hilo3d.LoadQueue采用链式调用,开放load,error,complete事件监听
Hilo3d.LoadQueue
load
error
complete
loadQueue.getContent:获取对应Id资源
loadQueue.getContent(r.id).node: Hilo3d.LoadQueue 会自动根据资源类型路由到Hilo3d.GLTFLoader, GLTFLoader会调用Hilo3d.GLTFParser解析glTF模型并返回以下属性字段:
Hilo3d.GLTFLoader
Hilo3d.GLTFParser
.node(Hilo3d.Node) .meshes(Hilod.Mesh 或者 Hilo3d.SkinedMesh) .cameras(Hilo3d.PerspectiveCamera) .textures(Hilo3d.Texture) .materials(Hilo3d.BasicMaterial)
另外,还可以按照nodeId 方式查找节点node.getChildById("XX") 或是按照className 查找 node.getChildrenByClassName("XX"),className为Hilo3d的实体类型分类,如Node的className为"Node", Mesh的className为"Mesh", Geometry的className为"Geometry"
另外,还可以按照nodeId 方式查找节点node.getChildById("XX")
或是按照className 查找 node.getChildrenByClassName("XX"),className为Hilo3d的实体类型分类,如Node的className为"Node", Mesh的className为"Mesh", Geometry的className为"Geometry"
_root = new Hilo3d.Node({ y:0.1, onUpdate:function(){ this.rotationY += 0.3; } }).addTo(stage);
player0 = res.player0; player0.x = -3; player0.rotationY = 90;; player0.setScale(playerScale); _root.addChild(player0);
player0.anim.addClip('run', 0, 20/30); player0.anim.addClip('attack', 20/30, 45/30); player0.anim.stop();
soldier.setPosition(pos[0], 5, pos[2]); soldier.rotationY = index > 3?-90:90; soldier.setScale(soldierScale); soldier.visible = false;
Hilo3d.Tween.to(soldier, { y:0 }, { onStart:function(){ soldier.visible = true; }, delay:250, duration:500 });
soldiers.push(soldier); _root.addChild(soldier); soldier.anim.addClip('run', 0, 20/30); soldier.anim.addClip('attack', 20/30, 45/30); soldier.anim.stop();
camera.lookAt(ground);
Hilo3d.Node
var orbitControls = new OrbitControls(stage);
Hilo3d.Stage
渲染期间想了解模型的fps,面数,drawcall次数,系统内存占用等性能信息(PC Only),可直接创建Stats对象
Stats
var stats = new Stats(ticker, stage.renderer.renderInfo);
renderer.renderInfo
传送门
Hilo3d 是实现了 gltf 的 渲染器 ? 支持 2.0 版本不 , 我学习学习。
@PeakFish 是的,同时支持1.0&2.0,2.0目前基本功能都支持了,还差些细节处理,会在8月份全部修好。
使用Hilo3d V1.0 Alpha版本渲染38女王节AR 互动打斗场景截图:
好,我们使用Hilo 3d实现以上效果:
创建一个透视相机
创建一个舞台stage
为了避免锯齿现象,我们把Canvas画布的对象真实宽高置为
window.devicePixelRatio
倍,同时将画布的css的宽高置为当前窗口大小。避免锯齿的方法除了上面的方式,修改着色器也是方法之一,以后再做阐述。
设置计时器
Hilo3d.Tween
手动加入到Ticker循环中Hilo3d.Animation
对象,Hilo3d会协助完成动画相关的解析和渲染准备3D素材资源
借助海螺码头素材转化能力,我们将3D设计师提供给我们的3d素材转换成Hilo3d指定渲染格式(glTF)
Hilo3d.LoadQueue: Hilo3d下载队列,
Hilo3d.LoadQueue
采用链式调用,开放load
,error
,complete
事件监听loadQueue.getContent:获取对应Id资源
loadQueue.getContent(r.id).node:
Hilo3d.LoadQueue
会自动根据资源类型路由到Hilo3d.GLTFLoader
, GLTFLoader会调用Hilo3d.GLTFParser
解析glTF模型并返回以下属性字段:设置场景
设置根节点
设置玩家角色
Hilo3d.Animation
对象,包含和动画相关的API,如果模型文件中不包含动画,此属性为null缓动角色对象
设置相机朝向
Hilo3d.Node
, 确定摄像机的朝向为某个场景内物体,另外对场景内的物体使用lookAt 可以实现Billboard的效果输入控制OrbitControls
Hilo3d.Stage
渲染Gizmos
渲染期间想了解模型的fps,面数,drawcall次数,系统内存占用等性能信息(PC Only),可直接创建
Stats
对象renderer.renderInfo
可以提取可渲染性能相关信息演示示例
传送门