Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webprofusion/dojo3d
A javascript library for simple 3D interactive story telling,
https://github.com/webprofusion/dojo3d
3d coderdojo coding-dojo javascript threejs
Last synced: 29 days ago
JSON representation
A javascript library for simple 3D interactive story telling,
- Host: GitHub
- URL: https://github.com/webprofusion/dojo3d
- Owner: webprofusion
- License: apache-2.0
- Created: 2020-10-26T06:41:19.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2020-11-12T09:11:39.000Z (about 4 years ago)
- Last Synced: 2024-08-04T01:28:14.914Z (4 months ago)
- Topics: 3d, coderdojo, coding-dojo, javascript, threejs
- Language: TypeScript
- Homepage: https://dojo3d.webprofusion.com
- Size: 1.2 MB
- Stars: 124
- Watchers: 9
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dojo3D
An all-in-one library for 3D story telling, aimed at all ages of coder. No software installation required, useful for CoderDojo, Hour of Code activities etc.
# Example Library Usage
See the Happy Halloween example https://repl.it/@webprofusionchr/dojo3d-halloween
Jump straight to `Our main code for a simple story` to see the main story code.
```html
Dojo 3D - Example Story Book
// create world
var world = new dojo3d.World();
var ui = dojo3d.UI;
//fetch 3d models we can use, then do our main code
world.fetchPrefabModels().then(async () => {
// get the Happy Halloween scene model, add it to the scene at scale 0.1
// https://sketchfab.com/JessSwynn; License: Creative Commons Attribution
var scene = world.getPrefabModelByName("Happy Halloween");
obj = await world.addSceneObject(scene, 0.1);
//turn some lights on
world.addLights();
// define camera viewpoints so we can use them later
var viewpoints = [
{ title: "ZoomedOut", position: { x: 0.0, y: 0.0, z: 5.0 } },
{ title: "House", position: { x: 0.059, y: 0.255, z: 1.099 } },
{ title: "Spider", position: { x: 0.05, y: 0.58, z: 0.424 } },
{ title: "BackHouse", position: { x: 0.041, y: 0.463, z: -1.731 } },
{
title: "BackUpstairs",
position: { x: -0.066, y: 0.567, z: -0.438 },
},
{ title: "Ghost", position: { x: -0.139, y: 0.142, z: -0.466 } },
{ title: "RIP", position: { x: -0.216, y: 0.005, z: 0.57 } },
{ title: "Cat", position: { x: -0.028, y: -0.071, z: 0.826 } },
];
world.setViewpoints(viewpoints);
/////////////////////////////////////////
// Our main code for a simple story
// animate to viewpoint named "ZoomedOut"
await world.animateToViewpoint("ZoomedOut");
// show intro message box at x:10,y:10
ui.showMessage("Hello..", 10, 10);
//wait a few seconds
await ui.wait(3);
// ask a question, answer will be "The option value", and answer.optionNumber is the option number selected starting at 1 (1,2,3 etc).
let answer = await ui.ask("Why are your here?", [
"I don't know.",
"You sent for me.",
]);
if (answer.optionNumber == 1) {
ui.showMessage("Hmm, lost are we..");
} else {
ui.showMessage("Hmm, I don't remember doing that..");
}
// animate to viewpoint named "ZoomedOut"
await world.animateToViewpoint("Cat");
});
```
# Other Examples
[Low Poly Terrain Scene](https://repl.it/@webprofusionchr/amongyou)
# Building/testing the library from source
- delete build folder
- `npx rollup -w -c rollup.config.js`
- `npx http-server ` (localhost:8080/src/examples)