@alphabetabc/threejs-app

exports

import {
    ThreeApp,
    ThreeAppLifecycleEvent,
    ThreeAppExtended,
    context,
    usePlugin,
    defineThreeAppPlugin,
    type ThreeAppType,
    type ThreeAppInstance,
} from '@alphabetabc/threejs-app';

Usage

import * as THREE from 'three';
import { ThreeApp, ThreeAppExtended, usePlugin } from '@alphabetabc/threejs-app';

const box = (position = [0, 0, 0], name = 'box', color = 0xff0000) => {
    const box = new THREE.BoxGeometry(10, 10, 10);
    const material = new THREE.MeshBasicMaterial({ color });
    const mesh = new THREE.Mesh(box, material);
    // @ts-ignore
    mesh.position.set(...position);
    mesh.userData['name'] = name;
    return mesh;
};

const app = new ThreeApp({
    cameraPosition: [-26.393285211449594, 44.52250436214678, 66.03408987185966],
    plugins: [],
});

app.context.object3d.scene.background = new THREE.Color(0x000000);

const box1 = box(undefined, undefined, 0x0000ff);
const box2 = box([-20, 0, 0], 'box2', 0x00ff00);
const box3 = box([20, 0, 0], 'box3');
const box4 = box([20, 20, 0], 'box4', 0xff00ff);

const groupBox_1_2 = new THREE.Group();

groupBox_1_2.add(box1, box2);

const group = new THREE.Group();
group.add(groupBox_1_2, box3, box4);

app.addObject(group);
app.renderTo(document.querySelector('#container'));
app.startRender();

app.addInteraction(box1, 'click', (info) => {
    console.log('log---------------box1-------click', info);
});

app.addInteraction(box1, 'click', (info) => {
    console.log('log---------------box1-------click-2', info);
});

app.addInteraction(box3, 'dblclick', (info) => {
    console.log('log---------------box3-------dblclick', info.target);
});

let beforeColor = null;

app.addInteraction(box1, 'mouseover', (info) => {
    beforeColor = box1.material.color;
    box1.material.color = new THREE.Color(0xff0000);
});

// 获取执行的插件实例
ThreeAppExtended.Plugin.Interaction.getPluginInstance(app).addInteraction(box1, 'mouseout', (info) => {
    box1.material.color = beforeColor;
    console.log('log---------------interaction-------mouseover', info.nativeEvent);
});

// 调用插件实现的方法
app.call(ThreeAppExtended.ExtendMethod.FitToViewport, box3);

plugin development

import { defineThreeAppPlugin } from '@alphabetabc/threejs-app';

export const PluginHelperLight = defineThreeAppPlugin({
    getPluginName() {
        return 'PluginHelperLight';
    },
    creator(...args) {
        return {
            init(app) {},
            destroy(_app) {},
        };
    },
});

export { PluginHelperLight };