Live Demo (open in a WebGL-enabled browser)
About the Demo
Beach Planet is a simple hidden-object game that demonstrates the principles described in this tutorial. The objective of the game is to find four MontageJS logos by selecting different locations and clicking objects to reveal the hidden logos. The demo uses viewpoints, animated 3D transformations, and event handlers.
To help simplify building interactive 3D experiences in the browser, provides the SceneView component. SceneView is a WebGL-based 3D component that makes manipulating the individual elements of a 3D scene just as easy as manipulating conventional HTML elements in the DOM.
To learn more about the Beach Planet demo and the SceneView component, refer to the Building 3D Applications with MontageJS tutorial on the MontageJS website.
To run this demo locally you need:
- A web server of your choice. MontageJS applications are client-side applications with no particular back-end dependency.
- Node.js and npm. MontageJS uses Node.js and npm for its developer tools and for code dependency management.
- Cloned GitHub repo of this demo.
First, if you haven't done so already, download and run the prebuilt Node.js installer for your platform from the Node.js website to install npm.
Then, to run the Beach Planet demo locally, follow these steps:
Clone the beachplanetblog GitHub repo in your desktop.
Use a command line tool to navigate to the cloned directory and install the modules required to run the demo:
cd beachplanetblog npm install
This installs the node_modules directory in the beachplanetblog root directory which includes all the dependencies you need to run the application locally.
Launch your preferred HTTP server and point your browser to the associated port.
During development MontageJS applications rely on XHR to load their various components and modules, which is why you will need a web server to serve the demo.
If you happen to have the latest version of minit, the MontageJS Initializer, installed (
sudo npm install -gq minit@latest) you can run
minit serve &from within the demo directory to set up a server on demand.
|Folder / File||Description|
|assets||Contains the 3D scene and sound asset files used in the demo, as well as the image linked to from this readme.|
|ui||Contains the user interface components of the demo application: beachplanet.reel contains the complete 3D application; main.reel contains the fallback (for for non-WebGL browsers).|
|index.html||Is the entry-point HTML document.|
|LICENSE.md||Contains copyright information.|
|package.json||Describes the application and its dependencies.|
|README.md||Provides information about the demo application and how to install it.|
Note: 01planet.html, 02buoy.html, and 03door.html are entry points to the buoy.reel and door.reel user interface components, which are specific to the Building 3D Applications with MontageJS tutorial. They are not part of the demo proper.
Got questions? Join us on irc.freenode.net#montage.
Got feedback or want to report a bug? Let us know by creating a new GitHub issue.
This demo application was created by the MontageJS team.
The soundtrack is available on opengameart: