<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/lights/RectAreaLightUniformsLib.js"></script>
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(20, 0, 0);
camera.lookAt(0, 0, 0);

let light = new THREE.AmbientLight(0x414141, 10);

THREE.RectAreaLightUniformsLib.init();

let softBox1 = new THREE.RectAreaLight(0xffffff, 10, 5, 3);
softBox1.position.set(7, 7, 0);
softBox1.lookAt(0, 0, 3);
let softBox2 = new THREE.RectAreaLight(0xffffff, 10, 3, 4);
softBox2.position.set(10, 0, 5);
softBox2.lookAt(3, -5, -10);
let softBox3 = new THREE.RectAreaLight(0xffffff, 10, 2, 3);
softBox3.position.set(9, 3, -4)
softBox3.lookAt(0, -3, 0);
let softBox4 = new THREE.RectAreaLight(0x818181, 2, 4, 5);
softBox4.position.set(11, 0, -6);
softBox4.lookAt(0, 10, 0);
let softBox5 = new THREE.RectAreaLight(0xffffff, 10, 7, 3);
softBox5.position.set(6, -7, 0);
softBox5.lookAt(0, 10, 0);

let loader = new THREE.TextureLoader();
let badgeFront = loader.load('https://i.imgur.com/Dq3ypnq.png');
let badgeFrontMaterial = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0x111111,
  shininess: 200,
	map: badgeFront,
  transparent: true
});
let badgeBack = loader.load('https://i.imgur.com/8McfMzg.png');
let badgeBackMaterial = new THREE.MeshPhongMaterial({
	color: 0xffffff,
  specular: 0x111111,
  shininess: 200,
  map: badgeBack,
  transparent: true
});

let metal = new THREE.MeshStandardMaterial({
	color: 0xffffff,
  roughness: 0.2,
  metalness: 1
});
let roughMetal = new THREE.MeshStandardMaterial({
	color: 0xc0c0c0,
  roughness: 0.3,
  metalness: 0.99
});
let geometry = new THREE.BoxGeometry(0.1, 10, 10);

let badge = new THREE.Mesh(geometry, [roughMetal, metal, metal, metal, metal, metal]);
let nifty = new THREE.Mesh(geometry, [badgeFrontMaterial, badgeBackMaterial]);

let badgeGroup = new THREE.Group();
badgeGroup.add(badge);
badgeGroup.add(nifty);

scene.add(camera);
scene.add(light);
scene.add(softBox1);
scene.add(softBox2);
scene.add(softBox3);
scene.add(softBox4);
scene.add(softBox5);
scene.add(badgeGroup);

animate();

function animate() {
	requestAnimationFrame(animate);
  badgeGroup.rotation.y += 0.015;
  renderer.render(scene, camera);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.