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>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
img {
width: 256px;
height: 64px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
JavaScript
var camera, scene, renderer;
var image;
init();
animate();
function init() {
// info = document.createElement( 'div' );
// RENDERER ///////////////////////////////////////////
renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff);
renderer.shadowMap.enabled = true;
renderer.shadowMap.needsUpdate = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild( renderer.domElement );
// SCENE ///////////////////////////////////////////
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
// CAMERA ///////////////////////////////////////////
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 150 );
scene.add( camera );
// ORBIT CONTROLS ///////////////////////////////////////////
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 35;
controls.maxDistance = 500;
controls.enableZoom = true;
controls.enablePan = false;
// LIGHTS ///////////////////////////////////////////
scene.add( new THREE.AmbientLight( 0xffffff, 0.8 ) );
var light = new THREE.PointLight( 0xffffff, 0.5 );
camera.add( light );
image = document.createElement( 'img' );
document.body.appendChild( image );
// TEXTURES ///////////////////////////////////////////
var texture = new THREE.Texture( image );
image.addEventListener( 'load', function ( event ) {
texture.needsUpdate = true;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1/2,1);
texture2.needsUpdate = true;
} );
var frontMaterial = new THREE.MeshPhongMaterial({shininess: 0, color: '#ff0000',
wireframe:true
});
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:...