|
|
@@ -0,0 +1,100 @@
|
|
|
+<!-- Licensed under a BSD license. See license.html for license -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
|
+ <title>Three.js - HTML Background</title>
|
|
|
+ <style>
|
|
|
+ html {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ *, *:before, *:after {
|
|
|
+ box-sizing: inherit;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ color: white;
|
|
|
+ font-size: 20pt;
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ font-family: sans-serif;
|
|
|
+ }
|
|
|
+ #background {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: block;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: -1;
|
|
|
+ pointer-events: none;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ #content {
|
|
|
+ padding: 1em;
|
|
|
+ }
|
|
|
+ #content>* {
|
|
|
+ max-width: 700px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: lightblue;
|
|
|
+ }
|
|
|
+ a:visited {
|
|
|
+ color: lightcoral;
|
|
|
+ }
|
|
|
+ a:hover {
|
|
|
+ color: magenta;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <iframe id="background" src="threejs-responsive.html"></iframe>
|
|
|
+ <div id="content">
|
|
|
+ <h1>Beautiful Cubes</h1>
|
|
|
+ <p>
|
|
|
+ <b>Cubes are beautiful</b>. You can have an entire planet of them, for instance.
|
|
|
+ </p><p>
|
|
|
+ How cool is that? (A bit confusing, honestly. I have always felt as though cubes had a tendency to be a little too cool and overly realistic. Like an endless collection of super-realistic robots… But I guess it is part of what makes them so interesting.)
|
|
|
+ </p><p>
|
|
|
+ So maybe there's a limit to what the human imagination can do for me.
|
|
|
+ </p><p>
|
|
|
+ That can't hurt.
|
|
|
+ </p><p>
|
|
|
+ Well then… let's break it down.
|
|
|
+ </p><p>
|
|
|
+ Stardust
|
|
|
+ </p><p>
|
|
|
+ I know a lot of you are saying: You can't, because you will get stuck with something that's "too realistic." Well, I have a very real suggestion: Just don't be that dude. In fact, let's be very specific: If you have to do something, let the actual thing change. If it's a little weird to have a space ship, or a spaceship you have to fly, or … well, you probably already are.
|
|
|
+ </p><p>
|
|
|
+ Forget about all of the sci-fi stuff. Space. No sense hiding that from me.
|
|
|
+ </p><p>
|
|
|
+ The space in my own home was never real-world. It was never something that a person might have done. It was something that only seemed plausible to me. There was only one "space craft," and if you could figure
|
|
|
+ </p><p>
|
|
|
+ <b>Cubes are beautiful</b>. Don't underestimate a nice stack of cubes.
|
|
|
+ </p><p>
|
|
|
+ If you decide to stack more than one cube, don't forget to use a stack of cubes as a guide to follow to make a tight fit. If a bunch of cubes are stacked too close together, the edges will stick out which will make for a tight fit!
|
|
|
+ </p><p>
|
|
|
+ Once again, if you decide you don't want to stack your boxes you can place another stack of cubes along the edge.
|
|
|
+ </p><p>
|
|
|
+ And you are done! The process is super simple and simple it's the easy stuff to set up.
|
|
|
+ </p><p>
|
|
|
+ But what if you don't like the size of the boxes?
|
|
|
+ </p><p>
|
|
|
+ You see, in the old days, a box was a solid block of wood, plastic or ceramic with an outer layer of cardboard.
|
|
|
+ </p><p>
|
|
|
+ In the 1990s, wood became the new material and in this method, the cardboard and wood are joined together so that they can both become a floor.
|
|
|
+ </p><p>
|
|
|
+ But some people don't like to use just the plastic/carpet layer. And with those people, these cubes are more likely to get wet.
|
|
|
+ </p><p>
|
|
|
+ So how does this stack?
|
|
|
+ </p><p>
|
|
|
+ From: <a href="https://talktotransformer.com/">Talk to Transformer</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+</html>
|
|
|
+
|
Gregg Tavares