import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/";
import { CSS3DObject, CSS3DRenderer } from "three/examples/jsm/renderers/";
import gsap from "gsap";
const httpMatcher = /http|https/;
export default {
name: "3DMenu",
components: {},
data() {
return {
app: null,
el: null,
mesh: null,
camera: null,
scene: null,
renderer: null,
labelRenderer: null,
controls: null,
menuData: [
{
id: "1",
parentId: "1537645492375449602",
name: "User Center",
description: null,
appKey: "xjt_user",
appHomePage: "/auth-ui/",
},
{
id: "1534774879700992002",
parentId: "1537645492375449602",
name: "HSS",
description: null,
appKey: "xjt_hr",
appHomePage: "/hr-ui/",
},
{
id: "1536947570488430593",
parentId: "1537645492375449602",
name: "Contract system",
description: null,
appKey: "xjt_contract",
appHomePage: "/contract-ui/",
},
{
id: "1537733169730351105",
parentId: "1537645492375449602",
name: "OA system",
description: null,
appKey: "xjt_oa",
appHomePage: "/oa-ui/",
},
{
id: "1551507637786374145",
parentId: "1537645492375449602",
name: "Fee reporting system",
description: null,
appKey: "xjt_fb",
appHomePage: "/feibao-ui/",
},
{
id: "1613789365929680897",
parentId: "1537645492375449602",
name: "Examination system",
description: null,
appKey: "xjt_exam",
appHomePage: "/exam-ui/",
},
{
id: "1615265465629380610",
parentId: "1537645492375449602",
name: "Training system",
description: null,
appKey: "xjt_px",
appHomePage: "/px-ui/",
},
{
id: "1669546339670454274",
parentId: "1537645492375449602",
name: "Conference system",
description: null,
appKey: "xjt_cloud_meeting",
appHomePage: "/cloud-meeting-ui/",
},
{
id: "1674596267673264130",
parentId: "1537645492375449602",
name: "Asset system",
description: null,
appKey: "xjt_property",
appHomePage: "/property-ui/",
},
],
radius: 400,
objects: [],
spheres: [], //Used to store the location of the target object
isAnimationPaused: false,
};
},
mounted() {
this.initZThree();
("resize", this.handleResize);
},
beforeDestroy() {
("resize", this.handleResize);
this.destroyThree();
},
methods: {
initZThree() {
this.el = ("box");
const { offsetWidth, offsetHeight } = this.el;
this.initScene();
this.initCamera(offsetWidth, offsetHeight);
this.initRenderer(offsetWidth, offsetHeight);
this.initControl();
this.initMenu();
},
initScene() {
// Rendering a scene
this.scene = new ();
},
initCamera(offsetWidth, offsetHeight) {
// Creating a Camera
this.camera = new (
50,
offsetWidth / offsetHeight,
1,
20000
);
this.(-1265, 798, -105); // Setting the camera position
this.(0, 0, 0); // Setting the camera to look at the center point first
},
initRenderer(offsetWidth, offsetHeight) {
// Creating a Renderer
this.renderer = new ({
antialias: true, // true/false indicates whether antialiasing is enabled or not.
alpha: true, // true/false Indicates if the background color can be set transparent.
});
this.(offsetWidth, offsetHeight); // Setting the width and height of the rendering area
this. = true; // Allow the renderer to generate shadow maps
this.();
this.(0x01dcc9, 0); // Setting the background color
this.(this.);
// web tag
this.labelRenderer = new CSS3DRenderer();
this. = 2;
this. = "absolute";
this. = "0px";
this. = "0px";
this. = "none"; // Avoiding HTML tags that obscure mouse events for 3D scenes
this.(offsetWidth, offsetHeight);
this.("mousemove", this.handleMousemove);
this.("mouseout", this.handleMouseout);
this.(this.);
},
initControl() {
// Initializing the controller
let controls = new OrbitControls(this.camera, this.);
// = true; //When true, the camera automatically rotates around the target, but update() must be called in the animation loop.
= true; // Setting up inertia with damping
= 0.05; // Setting the coefficient of damping
// Avoid zooming in and out with the mouse wheel
= 1500;
= 1500;
this.controls = controls;
this.();
},
initMenu() {
this.objects = [];
this.spheres = [];
this.((item, index) => {
const cardLabel = this.addCss3dLabel(item, index + 1);
("click", this.handleClick);
this.(cardLabel);
this.(cardLabel);
});
const vector = new THREE.Vector3(20, 20, 20);
for (let i = 0, l = this.; i < l; i++) {
const phi = (i / l) * 2 * ; // Assign each object an angle on the circle
const object = new THREE.Object3D();
= this.radius * (phi);
= 0;
= this.radius * (phi);
// Set the object toward the center of the circle
= ;
= ;
= ;
(vector);
this.(object);
}
this.transform();
this.renderFun(); // add washes of ink or color to a drawing (Chinese painting)
},
addCss3dLabel(item = {}, index) {
const element = ("div");
= `sys-item-li sys-item-${index}`;
= `<div class="sys-item"><div class="sys-content" data-url="${}"><div class="sys-bg ${}"></div><div class="sys -name">${}</div><div class="sys-btn">Click to enter<i class="el-icon-arrow-right"></i></div></div></div></ div>`;
let textLabel = new CSS3DObject(element);
= ;
= item;
const position = () * this.radius + this.radius;
(position, position, position);
return textLabel;
},
renderFun() {
this.((object) => {
(this.);
});
if (!this.isAnimationPaused) {
this. -= 0.005; // rotation speed
}
this.(this.scene, this.camera);
this.(this.scene, this.camera);
requestAnimationFrame(this.renderFun);
},
transform(duration = 2) {
for (var i = 0; i < this.; i++) {
let object = this.objects[i];
let target = this.spheres[i];
(, {
x: ,
y: ,
z: ,
duration: () * duration + duration,
ease: "",
});
(, {
x: ,
y: ,
z: ,
duration: () * duration + duration,
ease: "",
});
}
},
handleResize() {
this. = this. / this.;
this.();
this.(this., this.);
this.(this., this.);
},
handleMousemove() {
this.isAnimationPaused = true; // Pause animation
},
handleMouseout() {
this.isAnimationPaused = false; // Restore animation
},
handleClick(e) {
const { url } = ;
("url", url);
if ((url)) {
= url;
} else {
= `${}${url}`;
}
},
destroyThree() {
this.((child) => {
if () {
();
}
if () {
();
}
child = null;
});
this.();
this.();
this.();
},
},
};