JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tweenjs/0.6.0/tweenjs.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
CSS
body {
background: white;
}
JavaScript
var _camera,
_scene,
_renderer;
var _wrap;
var _something;
initScene();
initLines();
animate();
initSomething();
tweenSomething();
createjs.Ticker.timingMode = createjs.Ticker.RAF;
// Init
/////////////////////////////////////////////
function initScene() {
var w = window.innerWidth;
var h = window.innerHeight;
_camera = new THREE.PerspectiveCamera(50, w / h, 1, 10000);
_camera.position.set(0, 0, 500);
_scene = new THREE.Scene();
_scene.add(_camera);
_renderer = new THREE.WebGLRenderer({
alpha: true
});
_renderer.setSize(w, h);
document.body.appendChild(_renderer.domElement);
}
function initLines() {
var LINE_COUNT = 25;
var CURVE_STEPS = 50;
_wrap = new THREE.Group();
_scene.add(_wrap);
for (var i = 0; i < LINE_COUNT; i++) {
var curve = new THREE.QuadraticBezierCurve3();
curve.v0 = randomV3();
curve.v1 = randomV3();
curve.v2 = randomV3();
var geom = new THREE.Geometry();
for (var j = 0; j <= CURVE_STEPS; j++) {
var perc = j / CURVE_STEPS;
geom.vertices[j] = curve.getPoint(perc);
}
var material = new THREE.LineBasicMaterial({
color: Math.random() * 0xffffff,
linewidth: 5,
transparent: true,
opacity: 0.25,
depthTest: false
});
var line = new THREE.Line(geom, material);
_wrap.add(line);
}
}
// Animate
/////////////////////////////////////////////
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
_wrap.rotation.y += 0.0025;
_renderer.render(_scene, _camera);
}
// Helpers
/////////////////////////////////////////////
function initSomething() {
_something = new THREE.Mesh(
new THREE.BoxGeometry(50, 50, 50),
new THREE.MeshNormalMaterial()
);
_scene.add(_something);
}
function tweenSomething() {
var trgt = randomV3();
createjs.Tween.get(_something.position).to({
x: trgt.x,
y: trgt.y,
z: trgt.z
}, 2000,...