threejs-toys
threejs-toys copied to clipboard
klevron
codepen copy
Hello !
I saw your super awesome example on codepen toy swarm , I absolutely love this code ! Thanks for sharing it.
I copied all of the code into my VS Code folder (index, css, js) but it did not work, unsure why. I have three js installed and have the import function as you have provided. I did see that on threejs it says using node can be problematic, i do have nodejs installed but did not run the code using node. I am sure there is some simple explanation on why that I haven't thought about. Anyway, thanks for sharing.
Codecov Report
Merging #112 (be9f9dd) into master (27335c3) will decrease coverage by
0.85%. The diff coverage is30.76%.
@@ Coverage Diff @@
## master #112 +/- ##
==========================================
- Coverage 93.10% 92.25% -0.86%
==========================================
Files 27 28 +1
Lines 1872 1898 +26
Branches 104 105 +1
==========================================
+ Hits 1743 1751 +8
- Misses 25 42 +17
- Partials 104 105 +1
| Impacted Files | Coverage Δ | |
|---|---|---|
| src/stencil/perf.clj | 30.76% <30.76%> (ø) |
:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more
I do not get any errors, just a total of 3 issues related to Chrome browser
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform and
Page layout may be unexpected due to Quirks Mode.
this is the code I have inside a folder
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<title> Swarm threejs </title>
</head>
<body>
<div id="app">
<div id="hero">
<h1>The Great
<br/>
Link
</h1>
<!-- <a target="_blank" href="https://github.com/klevron/threejs-toys">github/threejs-toys</a> -->
</div>
</div>
</body>
</html>
style.css
/* code from codepen
https://codepen.io/soju22/pen/GRQMzBa
*/
body, html, #app {
margin: 0;
width: 100%;
height: 100%;
}
#app {
overflow: hidden;
touch-action: pan-up;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
text-align: center;
text-shadow: 0 0 5px #000000, 0 0 20px #000;
user-select: none;
}
#app h1 {
--fontSize: 50px;
--lineHeight: 70px;
width: auto;
height: calc(2 * var(--lineHeight));
line-height: var(--lineHeight);
margin: calc(50vh - var(--lineHeight)) auto 0;
font-size: var(--fontSize);
}
#app a {
margin-top: 10px;
display: inline-block;
text-decoration: none;
color: #fff;
}
#app canvas {
display: block;
position: fixed;
z-index: -1;
top: 0;
}
and sketch.js
import { swarmBackground } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
const bg = swarmBackground({
el: document.getElementById('app'),
eventsEl: document.body,
gpgpuSize: 256,
color: [Math.random() * 0xffffff, Math.random() * 0xffffff],
geometry: 'default'
})
bg.three.camera.position.set(0, 0, 200)
document.body.addEventListener('click', () => {
bg.setColors([Math.random() * 0xffffff, Math.random() * 0xffffff])
})
the index.html file runs with live server on my chrome browser. ran npm install three with no issues. I suspect there is something minor I am missing here but don't know what.
Thanks