@front-end-framework/threejs-utils

安装包

npm install @front-end-framework/threejs-utils --save-dev
npm install threejs

初始化场景

import {initThree,threeObj,loadGlb,ambientLight} from "@front-end-framework/threejs-utils";
const ele = document.getElementById("pump");
if (ele) {
   initThree(new Vector3(41.957000721685496,8.284610677285825,5.859528242023945),ele); //相机位置 dom元素 初始化threejs
   ambientLight(); // 添加环境光
   threeObj.render(); // render函数必须调用 才会渲染
   threeObj.initLight(); // 添加灯光
   threeObj.initAxesHelper(1000) // 添加辅助线
   loadGlb("/model/pump.glb",undefined,[10,5,5]); // 添加glb模型
}

checkIntersection

import {checkIntersection} from "@front-end-framework/threejs-utils";
// 初始化的代码已省略
document.addEventListener("pointerdown", (event) => {
    checkIntersection(event, (model) => {
        console.log(model) //获取鼠标点击的模型
        return true;
    }, '0xffffff', '0xd21c55')
})

tagRender

<div id="tag">
    <div>111</div>
    <div>222</div>
</div>

import {tagRender} from "@front-end-framework/threejs-utils";
// 初始化的代码省略
// 初始化的代码中可以不用调用render函数
const elementById = document.getElementById("tag");
if (elementById) {
    tagRender([elementById, [0, 0, 0], [0, 0, 0], [0.1, 0.1, 0.1]])
}