专栏首页3D可视化前端 3d开发怎么操作,什么流程?
原创

前端 3d开发怎么操作,什么流程?

我们都知道现今社会复合型人才是企业刚需,只会一项本领难以在企业中立足,即便是前端工程师,如果你只会敲代码改网页也是不行了,要多方面拓展自己的才能。比如研究可视化方向的3D开发。这就需要借助可视化pass平台平台来完成。

接下来了解一下开发流程吧:

HelloWorld.js

/**

* 说明:创建App,url为场景地址(可选)

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址

});

创建立方体.js

/**

* 说明:创建一个Box,并在app的update事件中旋转Box,摄像机看Box

*/

var app = new THING.App();

// 创建Box

var box = app.create({

type: 'Box',

position: [-4, 0, 0],

});

// update事件

app.on('update', function () {

box.rotateY(30 * app.deltaTime * 0.001); // 箱子自转

});

// 看Box

app.camera.lookAt(box);

创建几何体.js

/**

* 说明:创建多种几何体

* 教程:ThingJS教程——>对象创建——>创建物体

* 难度:★★☆☆☆

*/

var app = new THING.App();

// 创建平面

var plane = app.create({

type: 'Plane',

width: 8,

height: 8,

position: [0, 0, 0]

});

// 平面旋转90度

plane.rotateX(-90);

// 创建箱子

var box = app.create({

type: 'Box',

position: [2, 2, 0], // 箱子坐标

});

// 创建球体

var sphere = app.create({

type: 'Sphere',

radius: 0.5, // 半径

widthSegments: 16, // 节数

heightSegments: 16,

position: [4, 4, 0], // 球体坐标

});

// 创建圆柱体

var cylinder = app.create({

type: 'Cylinder',

radius: 0.3,

height: 1.6,

position: [0, 2, 2]

});

// 创建四面体

var tetrahedron = app.create({

type: 'Tetrahedron',

radius: 1,

position: [0, 2, 0]

});

// update事件

app.on('update', function () {

// 箱子自转

box.rotateY(app.deltaTime * 30 * 0.001);

// 移动球体(上下移动)

sphere.y = Math.cos(app.elapsedTime * 0.001) * 2;

// 移动圆柱体(左右移动)

cylinder.x = Math.cos(app.elapsedTime * 0.001) * 2;

});

// 设置最佳观看位置

app.camera.fit();

// 设置主灯光 开启阴影

var mainLight = {

shadow: true

};

app.lighting = { mainLight };

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webgl和可视化应用是什么关系?不懂来看吧!

    很简单,我们通过在线开发平台thingjs来阐述!  前提你要掌握js,假设你掌握了js,ThingJS 使用当今最热门的 Javascript语言进行开发。

    要不要吃火锅
  • 使用ThingJS在线开发完成3D地图自定义效果

    好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值。基因于此,CityBuilder建立了与ThingJS的通道——直转Thing...

    要不要吃火锅
  • 从可视化谈管理微服务

      很多人认为,在微服务架构下,可视化变得不重要了,因为发生问题时,服务会自动降级、熔断,容器会自动隔离、重生,似乎一切都可以自动化。然而很多实施了微服务改造的...

    要不要吃火锅
  • 爆:谷歌为移动应用(App)发布顶级域名,这一次别再错过了

    今天,我们(谷歌)发布 . app,Google 注册表中最新的顶级域名(TLD)。

    非著名程序员
  • express简单笔记

    创建文件夹views ,在views里创建index.ejs , 在index.ejs内输入 hello lilu

    lilugirl
  • Android 组件化开源app -开眼短视频(OpenEyes)

    该开源项目采用组件化的方式开发,使用MVVM + AndroidX + jetpack 组件为基本架构进行开发。

    darryrzhong
  • 使用Drozer利器对APP代码层面进行渗透分析

    声明;本篇文章为星球团队成员原创文章,但并未申请公众号原创权限,如其他公众号有需要转文,即可自取,或者联系渗透云笔记运营人员

    天钧
  • Flask阶段(一)代码

    小闫同学啊
  • sanic(1):创建app

    sanic是一个非常NB的高性能python框架。最近正好公司有一个小项目。所以用sanic来试试手是很不错的了。 由于sanic的中文资料和项目还很少很少,...

    超级大猪
  • dotnet core 之 CORS使用示例

    这种比较常见,即在ConfigureServices中添加中间件及定义其策略;而在Configure中把中间件设置到管道中

    Vincent-yuan

扫码关注云+社区

领取腾讯云代金券