|
二维平面给人最直观的感受，三维立体可以给人想象的空间，ThingJS的3D编辑器也适合非开发者用哦！ 在ThingJS开发界面中，进行3D场景可视化的编辑区域，我们把它称之为3D容器，也就是展示3D图片的地方，如下图所示。ThingJS 3D开发工具主要提供 'Marker' 物体和 'WebView' 物体以支持 3D 空间界面。 
我们先来看看两者的区别。 Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。 WebView：可以将页面嵌入到3D场景中，支持iframe元素引用一个新的网页 1. Marker 物体 
Marker 物体可以添加一个图片放置到你希望的位置，也可以将这个图片作为子对象添加到父对象身上，随着父对象一同移动。 例子 1： - app.create({
- type: "Marker",
- offset: [0, 2, 0],
- size: [4, 4],
- url: "https://thingjs.com/static/images/warning1.png",
- parent: app.query("car01")[0]
- });
参数： · type ： 通知系统创建 Marker 物体； · offset ： 设置自身坐标系下偏移量为[0, 2, 0]； · size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的； · url ： 图片的 url； · parent ：指定 Marker 的父物体； 运行结果见下图。Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。 
例子 2
- app.create({
- type: "Marker",
- offset: [0, 8, 0],
- size: 2,
- keepSize: true,
- url: "https://thingjs.com/static/images/reminder.png",
- parent: app.query(".Building")[1]
- });
参数： · keepSize： 控制是否受距离远近影响，呈现近大远小的 3D 效果。如果设置 true，表示保持大小，不随距离近大远小，此时 size 的单位是屏幕的像素点； · offset ： 设置自身坐标系下偏移量为[0, 2, 0]； · size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的； · url ： 图片的 url； · parent ：指定 Marker 的父物体； 运行结果见下图： 
我们还可以使用 h5 的 canvas 手动创建动态图。 例子 3：
- function createTextCanvas(text, canvas) {
- if (!canvas) {
- canvas = document.createElement("canvas");
- canvas.width = 64;
- canvas.height = 64;
- }
-
- const ctx = canvas.getContext("2d");
- ctx.fillStyle = "rgb(32, 32, 256)";
- ctx.beginPath();
- ctx.arc(32, 32, 30, 0, Math.PI * 2);
- ctx.fill();
-
- ctx.strokeStyle = "rgb(255, 255, 255)";
- ctx.lineWidth = 4;
- ctx.beginPath();
- ctx.arc(32, 32, 30, 0, Math.PI * 2);
- ctx.stroke();
-
- ctx.fillStyle = "rgb(255, 255, 255)";
- ctx.font = "32px sans-serif";
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- ctx.fillText(text, 32, 32);
- return canvas;
- }
-
- app.on('load', function (ev) {
- var marker = app.create({
- type: "Marker",
- offset: [0, 2, 0],
- size: 3,
- canvas: createTextCanvas('100'),
- parent: app.query('car02')[0]
- }).on('click', function (ev) {
- var txt = Math.floor(Math.random() * 100);
- ev.object.canvas = createTextCanvas(txt, ev.object.canvas)
- })
- })
参数： · canvas: 接收 canvas 作为贴图显示 
2. WebView 物体 我们还可以使用 WebView 物体，将其他网站或者页面的内容嵌到 3D 中。 例子 4：
- var webView01 = app.create({
- type: 'WebView',
- url: 'https://www.thingjs.com',
- position: [10, 13, -5],
- width: 1920 * 0.01, // 3D 中实际宽度 单位 米
- height: 1080 * 0.01, // 3D 中实际高度 单位 米
- domWidth: 1920, // 页面宽度 单位 px
- domHeight: 1080// 页面高度 单位 px
- });
3D开发不需要专业知识，只需要JS基础，终于可以做自己的商业项目了！
|
1927
0
