This is an embeddable gltf sample viewer using an a-frame scene and a-frame asset management.
Add the following to your head
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-supercraft-loader.js"></script>If hositng through GitHub Pages add to Body:
<!-- Geology Sample Viewer AFRAME -->
<style>
#geologySampleViewer {
width:80%;
height:80%;
}
</style>
<div id="geologySampleViewer">
<a-scene embedded transparent>
<a-assets>
<a-asset-item id="sample" src="assets/samplerock.gltf"></a-asset-item>
</a-assets>
<a-entity camera look-controls orbit-controls="target: 0 1.6 0; minDistance: 0.3; maxDistance: 180; initialPosition: 0 1.6 .4; enablePan: false"></a-entity>
<!-- Using the asset management system.-->
<a-gltf-model drag-rotate-component src="#sample" position="0 1.6 0"></a-gltf-model>
</a-scene>
</div>
<!-- end AFRAME -->If hosting through other service (e.g. Brightspace), add to Body:
<!-- Geology Sample Viewer AFRAME -->
<style>
#geologySampleViewer {
width:80%;
height:80%;
}
</style>
<div id="geologySampleViewer">
<a-scene embedded transparent>
<a-assets>
<a-asset-item id="sample" src="https://rawcdn.githack.com/camden-bock/aframe-geology-sample-viewer/476892532fac364cde92d05f2f893859873b46d6/assets/samplerock.gltf"></a-asset-item>
</a-assets>
<a-entity camera look-controls orbit-controls="target: 0 1.6 0; minDistance: 0.3; maxDistance: 180; initialPosition: 0 1.6 .4; enablePan: false"></a-entity>
<!-- Using the asset management system.-->
<a-gltf-model drag-rotate-component src="#sample" position="0 1.6 0"></a-gltf-model>
</a-scene>
</div>
<!-- end AFRAME -->Compatability is confirmed with D2L Brightspace Course Managment - requires plaintext html editor (no WYSG)
- Look-Controls
- Orbit-Controls
- GLTF-Viewer
There are two easy options for obtaining this A-Frame scene. It's then up to you to make it your own!
After you have downloaded and extracted this .zip file containing the contents of this repo, open the resulting directory, and you'll be have your scene ready in these few steps:
npm install && npm start
open http://localhost:3000/
Alternatively, you can fork this repo to get started, if you'd like to maintain a Git workflow.
After you have forked this repo, clone a copy of your fork locally and you'll be have your scene ready in these few steps:
git clone https://github.com/aframevr/aframe-boilerplate.git
cd aframe-boilerplate && rm -rf .git && npm install && npm start
open http://localhost:3000/
📱 Mobile pro tip: Upon starting the development server, the URL will be logged to the console. Load that URL from a browser on your mobile device. (If your mobile phone and computer are not on the same LAN, consider using ngrok for local development and testing. Browsersync is also worth a gander.)
Or, you can simply fork this CodePen example to dive right in. Enjoy!
If you don't already know, GitHub offers free and awesome publishing of static sites through GitHub Pages.
To publish your scene to your personal GitHub Pages:
npm run deploy
And, it'll now be live at http://your_username.github.io/ :)
To know which GitHub repo to deploy to, the deploy script first looks at the optional repository key in the package.json file (see npm docs for sample usage). If the repository key is missing, the script falls back to using the local git repo's remote origin URL (you can run the local command git remote -v to see all your remotes; also, you may refer to the GitHub docs for more information).
First make sure you have Node installed.
On Mac OS X, it's recommended to use Homebrew to install Node + npm:
brew install node
To install the Node dependencies:
npm install
To serve the site from a simple Node development server:
npm start
Then launch the site from your favourite browser:
If you wish to serve the site from a different port:
PORT=8000 npm start
This program is free software and is distributed under an MIT License.