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);
// Load texture
var loader = new THREE.TextureLoader();
loader.crossOrigin = true;
var texture = loader.load(
'https://i.imgur.com/eoWNz.jpg',
onTextureLoad,
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function(xhr) {
console.log('An error happened');
}
);
function onTextureLoad(texture) {
console.log(texture);
var geometry = new THREE.PlaneGeometry(2, 2, 0);
var material = new THREE.MeshBasicMaterial({
map: texture
});
var backgroundMesh = new THREE.Mesh(geometry, material);
// The background plane shouldn't care about the z-buffer.
backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = false;
backgroundMesh.position.z = -5;
...