省时间降成本,ThingJS如何简化3D容器操作?

时间:2020-9-13 作者:admin

近几年VR看房的热度越来越高,其可以让客户实现随时随地看房,节省看房时间和成本,对企业而言也节省人工成本,提升看房客户体验。这里揭露ThingJS 如何使用3D可视化编辑器?

在ThingJS开发界面中,进行3D场景可视化的编辑区域,我们把它称之为3D容器,也就是展示3D图片的地方,如下图所示。ThingJS 3D开发工具主要提供 Marker物体和 WebView物体以支持 3D 空间界面。

省时间降成本,ThingJS如何简化3D容器操作?

我们先来看看两者的区别。
Marker:可以将图标、Canvas绘制的图片,展现在3D场景中或绑定在3D物体上。
WebView:可以将页面嵌入到3D场景中,支持iframe元素引用一个新的网页

1. Marker 物体

省时间降成本,ThingJS如何简化3D容器操作?

Marker 物体可以添加一个图片放置到你希望的位置,也可以将这个图片作为子对象添加到父对象身上,随着父对象一同移动。
例子 1:

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 空间中实现前后遮挡。

省时间降成本,ThingJS如何简化3D容器操作?

例子 2:

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 的父物体;
运行结果见下图:

省时间降成本,ThingJS如何简化3D容器操作?

我们还可以使用 h5 的 canvas 手动创建动态图。
例子 3:

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 作为贴图显示
运行结果见下图,在 Marker 上点击时,会改变标记上的数字:

省时间降成本,ThingJS如何简化3D容器操作?

2. WebView 物体

我们还可以使用 WebView 物体,将其他网站或者页面的内容嵌到 3D 中。
例子 4:

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
});

省时间降成本,ThingJS如何简化3D容器操作?

不可或缺的3D可视化开发平台——ThingJS!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。