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 {
margin: 0 auto;
overflow: hidden;
}
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 });
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);
// Define the background texture
var loader = new THREE.TextureLoader();
var texture = loader.load(
'https://imgur.com/gallery/eoWNz',
function (texture) {
var material = new THREE.MeshBasicMaterial( {
map: texture
});
},
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function (xhr) {
console.log('An error happened');
}
);
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
map: texture
}));
// The background plane shouldn't care about the z-buffer.
backgroundMesh .material.depthTest = false;
backgroundMesh .material.depthWrite = false;
// Create the background scene
var backgroundScene = new THREE.Scene(),
backgroundCamera = new...