JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<div id="container"></div>
CSS
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div {
position: relative;
height: 100%;
width: 100%;
background-image: url("https://i.imgur.com/eoWNz.jpg");
background-repeat: no-repeat;
background-position: center;
position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
}
JavaScript
// Define the standard global variables
var container,
scene,
camera,
renderer;
init();
function init() {
var color = 0x000000;
// Scene
scene = new THREE.Scene();
// Camera
var screenWidth = window.innerWidth,
screenHeight = window.innerHeight,
viewAngle = 75,
nearDistance = 0.1,
farDistance = 1000;
camera = new THREE.PerspectiveCamera(viewAngle, screenWidth / screenHeight, nearDistance, farDistance);
scene.add(camera);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);
// Create the renderer engine
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(screenWidth, screenHeight, false);
container = document.getElementById('container');
container.appendChild(renderer.domElement);
// Define the lights for the scene
var light = new THREE.PointLight(0xffffff);
light.position.set(20, 0, 20);
scene.add(light);
var lightAmb = new THREE.AmbientLight(0x777777);
scene.add(lightAmb);
// Create a cube
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial({
color: 0xff00ff
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Rendering function
var render = function() {
requestAnimationFrame(render);
// Update the color to set
if (color < 0xdddddd) color += 0x0000ff;
// Update the cube color
cube.material.color.setHex(color);
// Update the cube rotations
cube.rotation.x += 0.05;
cube.rotation.y += 0.02;
renderer.autoClear = false;
renderer.clear();
renderer.render(scene, camera);
};
render();
};