随着flash的没落,浏览器的原生能力的兴起。在3D方面WebGL不管从功能还是性能方面都在逐渐加强。2D应用变为3D应用的需求也越来越强烈。 win10的画图板支持3D图片,2d工具photoshop也开始逐步集成了3D工具。下面就基于WebGL技术探讨一下现在的两款3D框架。
目前最流行的开源3D框架,2009年4月诞生,2005年adobe收购了macromedia的flash产品,2008,2009年正是flash如日中天之时,threejs也识时务的选择了flash的ActionScript平台,后来flash没落之后选择了WebGL。
ThingJS是更为上层的抽象,不用关心,渲染,mesh,光线等复杂概念。它抽象是一个个具体的模型,ThingJS封装了对模型交互事件的各种api,比如单击,左键,鼠标滑过等,ThingJS封装了对模型的操作,例如移动,放大缩小,上色,勾边,甚至开门,ThingJS还封装了模型的层次关系,例如物体是放在某个房间里的,房间又在某个楼层,楼层又是某个大楼的。大楼在园区里。
这里仅仅从3D模型加载这个小点进行对比说明。更多内容大家可参考各自的网站www.three.org 和 www.thingjs.com进行详细对比。
three的模型加载
function load3DModel(){
/*
1、collada是一种基于XML的3D模型交互方案,简单来说,就是一种3D模型可以通过collada转换成另一种3D模型,
从而,各种3D模型都可以通过collada转换成web支持的3D模型。
2、。dae是一个钟3D模型的格式
3、加载时注意浏览器同源策略的限制
*/
var loader = new THREE.ColladaLoader();
loader.load( "./model/avatar.dae", function ( collada ) {
//找到模型中需要的对象。将相机看向这个对象是为了让这个对象显示在屏幕中心
collada.scene.traverse( function ( child ) {
if ( child instanceof THREE.SkinnedMesh ) {
modelObj = child;
camera.lookAt( child.position );
}
} );
//将模型的场景加入到整体的场景
modelObj.material.opacity = 0.8;
scene.add( collada.scene ); //每个模型都要添加到场景
//显示出模型的骨骼的代码,不需要可删去
var helper = new THREE.SkeletonHelper( modelObj );
helper.material.linewidth = 3;
scene.add( helper );
} );
}
threejs 加载模型到场景每个细节都得自己处理。
我们再来看下ThingJS的模型加载。
var app = new THING.App({
container: 'div3d',
url: 'https://speech.uinnova.com/static/models/building'
});
只关注场景再页面的div的id和场景存放的地址,所有的细节ThingJS都处理好了。
场景加载完之后便可从场景获得加载内容,并进行交互应用开发。
// 获取建筑对象
var building = app.buildings[0];
// 打印建筑中所有的楼层
building.floors.forEach(function(floor) {
console.log('Floor: ' + floor.id);
});
// 获取室外对象
var outdoors = app.outdoors;
// 打印室外所有物体
outdoors.things.forEach(function(thing) {
console.log('Thing: ' + thing.id);
});
多么完美的封装方式。更多细节可以到www.thingjs.com查看
three.js(www.three.org)和ThingJS(www.thingjs.com)都是JavaScript 3D Library,都对webGL的3D处理能力进行了封装,但是three.js 更偏三维技术底层,适用于3D爱好者学习3D技术;ThingJS更偏物联网应用功能开发,重在开发效率,降低开发成本,适合于使用3D技术做项目的开发者。
全文地址请点击:https://blog.csdn.net/liuwei000000/article/details/80623532
建设性的立体几何具有许多实际用途,它用于需要简单几何对象的情况下,或者数学精度很重要的地方,几乎所有的工程 CAD 软件包都使用 CSG(可以用于表示刀具切削,以及零件必须配合在一起的特征)。
使用弹力布局功能需要在引入 ht.js 核心库之后,再引入一个 ht-forcelayout.js 的弹力布局插件库,因为还用到了 form 表单,所以要引入 ht-form.js 的表单插件库。
前端开发者觉得如果我们可以不用学习 unity3d 或者其他游戏开发工具就能实现 3D 效果,而且能够精准的靠代码来控制移动或者方向就好了,于是我利用 HT For Web 中的3D组件 来实现了一个小例子
3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中
WebGL绘制图像时,往着色器中传入颜色信息就可以给图形绘制出相应的颜色,现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来,那么这个过程是什么样
这是我最近在 CodePen 上制作的 WebGL 演示案例。它可以捕获网络摄像头的数据(或在无法访问网络摄像头时,从 placekitten 获取备用图像),并将其实时转换为 ASCII 图像艺术。
在 webgl 里,图形的运动分为 平移、旋转、缩放 三种类型。接下来,我们会从零基础开始,一点一点来深入了解图形如何进行运动。首先来从零开始了解下图形的平移
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!