基础复合物体

引擎内置了一些常用的物体，可满足绝大部分功能开发需求，对于一些不同场景下需要自定义参数的物体，则需要程序开发人员根据实际情况开发。

Group 组

空置Thing对象，常用于物体的分组管理。

var group = new VT.Group();

var box = new VT.Box();
group.add(box);

// 隐藏组
group.visible = false;

Model 模型

var model = new VT.Model({
    src: "", // 模型地址
    modelType: "gltf", // 模型类型
    selectLevel: 1, // 选择层级
    animationTimeScale: 1, // 动画时间比例
    animationEnable: false, // 是否允许动画
    cache: false, // 是否离线存储
});

// 模型加载完成后
model.on("loaded", () => {
    // 对于模型所有的操作应在此完成
});

ImagePlane 图片

new VT.ImagePlane({
    rotation: [-90 / THREE.MathUtils.RAD2DEG, 0, 0],
    geometry: {
        width: 10.00,
    },
    material: {
        map: {
            image: "./resources/images/1.jpg"
        },
        side: 2,
    }
})

CanvasPlane

获取其它canvas内容作为贴图到平面上。

html2canvas(document.querySelector("#test")).then(canvas => {
    var thing = new VT.CanvasPlane(canvas, {
        position: [0, 1.5, 0],
        geometry: {
            width: canvas.width / 100,
            height: canvas.height / 100
        },
        material: {
            side: 2,
            // transparent: true,
            // opacity: 0.5
        }
    });

    viewer.scene.add(thing);
});

Display 显示器

const display = new VT.Display({
    geometry: {
        inches: 27, // 27 英寸显示器
        depth: 0.02,
    },
    video: {
        src: "./video/1.mp4"
    }
});

viewer.scene.add(display);

Audio 音频

new VT.Audio({
    src: "./audios/1.mp3"
});

VideoPlane 视频平面

new VT.VideoPlane({
    geometry: {
        width: 1920 * 0.003,
        height: 1080 * 0.003,
    },
    video: {
        src: "./videos/1.mp4"
    },
});

HtmlPlane HTML平面

var iframe = document.createElement('iframe')
iframe.src = "http://www.163.com";
iframe.style.width = 1920 + "px";
iframe.style.height = 1080 + "px";
iframe.style.border = '0px';

const htmlPlane = new VT.HtmlPlane(iframe, {
    position: [0, 1.5, 0],
    geometry: {
        width: 6,
        height: 3,
    },
    material: {
        color:"#ffffff",
    }
});

viewer.scene.add(htmlPlane);

LightBox 灯箱

const images = ["./images/3.jpg", "./images/4.jpg", "./images/5.jpg", "./images/6.jpg"];

const lightBox = new VT.LightBox({
    geometry: {
        width: 1,
        height: 1.5,
        depth: 0.1,
        border: 0.01,
    },
    style: {
        images: images
    }
});
viewer.scene.add(lightBox);

// 开始播放
lightBox.play();

Heatmap 热力图

let data = [[1.099516485596081, 0.9999999999999997, 1.2732461062881613], [3.0297567268709824, 0.9999999999999998, -1.0916763980414128], [4.412807809557151, 1, -0.12643421336188965], [4.451919652412534, 0.9999999999999998, 1.144419480100618], [4.209420085148823, 0.999999999999999, 2.2954147667179994], [2.8166073151386457, 0.9999999999999993, 2.9971053785232313], [1.5677922260885104, 0.999999999999999, 2.4953241791309337], [2.2571412746389257, 0.9999999999999992, 1.3841707875309193], [1.4831029476296769, 0.9999999999999999, 0.3219315748754971], [0.07211354415972981, 1.0000000000000004, -1.6028726116484366], [-1.0290674990151638, 1.0000000000000002, -1.387707641163898], [1.1111540350917006, 0.9999999999999983, -0.5820198528029286], [1.3221367676299054, 1.0000000000000004, -2.0967196248870406], [1.0233128217000078, 1.0000000000000007, -2.9746718272281623], [2.7761476638620075, 1.0000000000000002, -1.0356042892248662], [2.5447781939806906, 1.0000000000000002, -0.5099028662059066], [3.5014358432672346, 0.9999999999999983, -0.32946343686492074], [3.8119944088683653, 1.0000000000000004, -1.931242990662607]].map((d) => {
            return { x: d[0], y: d[2], value: Math.random() * 60 + 60 }
        });

const heatmapData = { data, min: 40, max: 120 }
const heatmap = new VT.Heatmap(heatmapData, {
    position: [0, 0.5, 0],
    style: { radius: 30 },
    renderOrder: 1,
    material: {
        side: 2,
        transparent: true,
    }
});
viewer.scene.add(heatmap);