<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.z = 20;

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

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

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

scene.add(camera);
scene.add(light);
scene.add(pointLight1);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(pointLight4);
scene.add(badge);

animate();

function animate() {
	requestAnimationFrame(animate);
  badge.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.