This project is a JavaScript-based application that renders a planimetry of the Department of Mathematics in Pisa, and lets you interact with it by selecting rooms and querying a Database for various information about them.
It uses modern web technologies like Vite and React, and SCSS for styling.
-
src/
: Contains the source code for the application. -
public/
: Contains static files like images and 3D models. -
demo/
: Contains a prototype of the final widget. -
tool/
: Contains a tool for editing the planimetry. -
.github/
: Contains GitHub workflow files for deploying the site to Github Pages
To get started with this project, follow these steps:
# Clone the project
$ git clone https://github.com/Unipisa/dm-planimetrie
$ cd dm-planimetrie
# Install the required dependencies
$ npm install
# Start the ViteJS development server
$ npm run dev
After starting the server, you can view the application by opening your web browser and navigating to http://localhost:3000/
-
http://localhost:3000/demo/ - The demo widget
-
http://localhost:3000/tool/ - The tool for editing the planimetry
This project is automatically deployed to GitHub Pages using GitHub Actions. To locally build the project, run the following command:
$ npm run build
<?php
wp_register_script('dm-planimetrie', 'https://unipisa.github.io/dm-planimetrie/lib/dm-planimetrie-element.iife.js');
function planimetrie_shortcode( $atts ) {
wp_enqueue_script('dm-planimetrie');
return <<<EOF
<dm-planimetrie></dm-planimetrie>
EOF;
}
add_shortcode('planimetrie', 'planimetrie_shortcode');
const element = document.querySelector('dm-planimetrie');
element.setSelection(['id1', 'id2', 'id3']);
-
Export the model from the SketchUp web app using the "Collada" exporter and set the following options
-
Export two-sided faces*: Yes
-
Export edges*: Yes
-
Triangulate all faces*: Yes
-
Export hidden geometry: No
-
Preserve component hierarchy*: Yes
-
Export texture maps*: Yes
-
Preserve credits: No
The one with * are the important ones.
-
-
Extract the generated
.zip
file -
This contains the main
.dae
file and a folder containing the embedded textures -
Now edit main
.dae
file and fix the textures directory.Ctrl+F
for "Wood_", one of the results will look like the following<init_from>643caea7-fcbc-458d-b235-41120140542b/Wood_Bamboo_Medium.jpg</init_from>
and change it to just
<init_from>Wood_Bamboo_Medium.jpg</init_from>
or just run the following command
sed 's#<init_from>[^\/]*/#<init_from># dm.dae > dm-patched.dae'
-
Then gzip the file using
gzip -9 -c dm-patched.dae > dm.dae.gz
-
In the end put
dm.dae.gz
and all the textures insidepublic/
rename the main .dae
file to