Three.js & Vue Smart Campus 3D Scene – Project Overview and Technical Documentation
This article introduces a graduation project that creates an interactive smart campus 3D scene using three.js and Vue, provides demo links, outlines core features, offers a quick‑start guide, and gives detailed explanations of each module, modeling conventions, and performance tips.
The author, a soon‑to‑graduate student, presents a graduation project that builds a smart campus scene using three.js and Vue, and invites community feedback.
Demo links are provided for the live site (https://threejs.newhao2021.top/) and the GitHub repository (https://github.com/varrff/nCommunityThreeJS).
Key features include dynamic 3D scene rendering of monitoring devices, with utility functions such as initThree , initHelper , initOrbitControls , initLight , loaderModel , iterateLoad , initRaycaster , destroyRaycaster , fireRaycaster , getModelWorldPosition , flyTo , modelMove , and render .
Quick start instructions: install dependencies with npm install and launch the development server using npm run serve .
The documentation breaks down each source file: ZThree.js (initialization and common helpers), loaderModel.js (model loading and management), cssRender.js (CSS renderer integration), material.js (material management), floorManage.js (floor and room label handling), reprocessing.js (visual effects like bloom, edge highlighting, and compositing), parkElectricity.js (electricity monitoring logic), and data handling in mock.js .
A Blender modeling guide advises naming conventions for buildings, floors (ending with “F”), and monitoring devices, stresses the need for a “roof” sub‑model per building, and offers tips on applying modifiers and simplifying complex models to improve web performance.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.