JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="x-shader/x-vertex" id="color-vert">
varying vec3 vColor;
void main()
{
vec4 worldPosition = modelMatrix * vec4(position, 1.0);
vColor = normalize(abs(worldPosition.xyz));
gl_Position = projectionMatrix * viewMatrix * worldPosition;
}
</script>
<script type="x-shader/x-fragment" id="color-frag">
precision mediump float;
varying vec3 vColor;
void main()
{
gl_FragColor = vec4(vColor, 1.0);
}
</script>
CSS
body {
background: #000000;
margin: 0;
overflow: hidden;
}
JavaScript
var scene, camera, renderer;
var controls;
var cube1, cube2, cube3;
var R = 5.0;
init();
var animtime = Date.now();
requestAnimationFrame(animate);
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 1000.0);
camera.position.set(0.0, 0.0, -15.0);
renderer = new THREE.WebGLRenderer({ antialias: true });
controls = new THREE.OrbitControls(camera, renderer.domElement);
var colorMaterial = new THREE.ShaderMaterial({
vertexShader: document.getElementById('color-vert').textContent,
fragmentShader: document.getElementById('color-frag').textContent
});
cube1 = new THREE.Mesh(
new THREE.BoxBufferGeometry(1.0, 1.0, 1.0),
colorMaterial
);
cube2 = cube1.clone();
cube3 = cube1.clone();
scene.add(cube1, cube2, cube3);
window.addEventListener('resize', onResize);
onResize();
document.body.appendChild(renderer.domElement);
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate(time) {
requestAnimationFrame(animate);
time = time < 1e12 ? time : time - animtime;
cube1.position.set(R * Math.cos(0.0001 * time), R * Math.sin(-0.0005 * time), R * Math.cos(0.0004 * time));
cube2.position.set(R * Math.sin(-0.0004 * time), R * Math.sin(0.0002 * time), R * Math.cos(-0.0003 * time));
cube3.position.set(R * Math.cos(0.0002 * time), R * Math.cos(0.0004 * time), R * Math.sin(-0.0001 * time));
renderer.render(scene, camera);
}