Location>code7788 >text

3D card menu using threejs

Popularity:542 ℃/2024-07-25 17:42:22
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.(); }, }, };