-
-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
185 lines (183 loc) · 7.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<html>
<head>
<title>Digital Bacon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffebfd"/>
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<script type="importmap">
{
"imports": {
"DigitalBacon": "/scripts/core/DigitalBacon.js",
"three": "/node_modules/three/build/three.module.js"
}
}
</script>
</head>
<body>
<div id="container-parent">
<div id="container"></div>
</div>
<div id="open-app-overlay" class="overlay">
<div id="open-app-div">
<a href="/app">Open App</a>
</div>
<div id="what-it-is">
<h2>Create your own 3D website for free with Digital Bacon</h2>
<p>Beautiful immersive environments, easy to use, build whatever you like. What are you waiting for? <a href="/app">Try it out Now!</a></p>
</div>
</div>
<div id="fade-dark-to-light" class="overlay"></div>
<div id="who-this-is-for" class="overlay">
<h2>Who this is for</h2>
<div class="darker-box">
<div><h3>Marketers</h3></div>
<div>Digital Bacon makes it easy to showcase products + sell services to your audience in a unique 3D format</div>
</div>
<div class="darker-box">
<div><h3>Content Creators</h3></div>
<div>Grow and engage your audience with immersive experiences or create custom environments to record in</div>
</div>
<div class="darker-box">
<div><h3>Developers</h3></div>
<div>Stay ahead of the curve as the AR + VR job market grows by learning to build 3D websites and develop plugins for enhanced immersive experiences</div>
</div>
<div class="darker-box">
<div><h3>Creatives</h3></div>
<div>From interactive storytelling to self expressive world building, from visually stunning worlds to minimalist design, bring your wildest ideas to life!</div>
</div>
</div>
<div id="fade-light-to-dark" class="overlay"></div>
<div id="features" class="overlay">
<h2>Features</h2>
<div class="dark-box">
<div class="icons">
<i class="las la-tools"></i>
</div>
<div><h3>No Coding Needed</h3></div>
<div>The visual editor allows you to create 3D websites without any programming knowledge</div>
</div>
<div class="dark-box">
<div class="icons">
<i class="las la-piggy-bank"></i>
</div>
<div><h3>Free</h3></div>
<div>You own whatever you create and it costs nothing to use Digital Bacon</div>
</div>
<div class="dark-box">
<div class="icons">
<i class="lab la-google-drive"></i>
</div>
<div><h3>Google Drive</h3></div>
<div>Save/Load your projects securely from Google Drive to easily continue working across different devices</div>
</div>
<div class="dark-box">
<div class="icons">
<i class="las la-laptop"></i>
<i class="las la-vr-cardboard"></i>
<i class="las la-mobile"></i>
</div>
<div><h3>Cross Platform Support</h3></div>
<div>Runs on your Computer, Mobile Device, and VR Headset through the browser</div>
</div>
<div class="dark-box">
<div class="icons">
<i class="las la-code"></i>
</div>
<div><h3>Javascript Library</h3></div>
<div>Developers can import the Digital Bacon library to integrate within their own more complex projects</div>
</div>
<div class="dark-box">
<div class="icons">
<i class="las la-lock-open"></i>
</div>
<div><h3>Open Source</h3></div>
<div>MPL 2.0 License allows you to use Digital Bacon as a library without affecting the privacy of your own software</div>
</div>
</div>
<div id="fade-dark-to-light" class="overlay"></div>
<div id="resources" class="overlay">
<h2>Resources</h2>
<div class="darker-box">
<div><h3>Hosting</h3></div>
<div>Ready to share your project with the world? Learn about different hosting options below</div>
<br>
<br>
<div><a href="/resources/hosting">Hosting Options</a></div>
</div>
<div class="darker-box">
<div><h3>Templates</h3></div>
<div>Need inspiration? Check out some sample websites to use as a base for your own</div>
<br>
<br>
<div><a href="/resources/templates">Explore templates</a></div>
</div>
<div class="darker-box">
<div><h3>Tutorials</h3></div>
<div>Learn to build different types of 3D websites and find various tips & tricks that may help you on your journey</div>
<br>
<div><a href="/articles">Tutorials</a></div>
</div>
<div class="darker-box">
<div><h3>Application Guide</h3></div>
<div>In depth documentation on how to configure assets such as models, images, shapes, lights, materials, and textures</div>
<br>
<div><a href="/resources/application-guide">Find the guide here</a></div>
</div>
<div class="darker-box">
<div><h3>Developer Guide</h3></div>
<div>Developers can find more information about using Digital Bacon as a library in our API documentation</div>
<br>
<div><a href="/resources/api-documentation">API Documentation</a></div>
</div>
<div class="darker-box">
<div><h3>Plugins</h3></div>
<div>Enhance your 3D websites with custom assets using one of our plugins</div>
<br>
<br>
<div><a href="/resources/plugins">Plugins</a></div>
</div>
<div class="darker-box">
<div><h3>Swag</h3></div>
<div>Want to rep Digital Bacon with tank tops, T-shirts, stickers, and more? Check out our merchandise</div>
<br>
<div><a href="https://digital-bacon.creator-spring.com">Shop Now</a></div>
</div>
</div>
<div id="fade-light-to-dark" class="overlay"></div>
<div id="contact-us" class="overlay">
<h2>Contact Us</h2>
<p>For feature requests and bug reports, please use the project's <a href="https://github.com/kalegd/digitalbacon">GitHub Repository<i class="lab la-github"></i></a></p>
<p>For all other matters, please reach out to us on <a href="https://twitter.com/DigitalBacon3D">Twitter<i class="lab la-twitter"></i></a></p>
<div id="footer">
<p><a href="/terms-of-use">Terms of Use</a> ^_^ <a href="/privacy-policy">Privacy Policy</a></p>
</div>
</div>
<script type="module">
import {
setup,
getCamera,
THREE,
} from 'DigitalBacon';
let camera, cameraFocus, scene;
let params = {
projectFilePath: "/projects/default-project.zip",
disableImmersion: true,
};
setup("container", params)
.then((App) => {
camera = getCamera();
cameraFocus = new THREE.Object3D();
scene = App.getScene();
scene.add(cameraFocus);
cameraFocus.add(camera);
camera.position.set(0, 1.7, -2);
camera.rotation.set(Math.PI / 30, Math.PI, 0);
});
</script>
</body>
</html>