<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.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);

let pointLight1 = new THREE.PointLight(0xffffff, 1, 100);
pointLight1.position.set(10,5,5);
let pointLight2 = new THREE.PointLight(0xffffff, 1, 100);
pointLight2.position.set(10,-5,-5);
let pointLight3 = new THREE.PointLight(0xffffff, 1, 100);
pointLight3.position.set(10,5,-5);
let pointLight4 = new THREE.PointLight(0xffffff, 1, 100);
pointLight4.position.set(10,-5,5);

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(pointLight1);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(pointLight4);
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.