<script src="https://unpkg.com/three@0.87.1/build/three.js"></script>
<script src="https://unpkg.com/three@0.87.1/examples/js/controls/OrbitControls.js">
</script>
<script src="https://unpkg.com/three@0.87.1/examples/js/loaders/GLTFLoader.js"></script>
// Load 3D Scene
var scene = new THREE.Scene();

// Load Camera Perspective
const camera = new THREE.PerspectiveCamera( 10, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 1, 1, 20);
camera.position.set( 9.023588180541993, 4.472665786743164,  9.152990341186524);
camera.rotation.set(-0.4367282469153242, 0.7325030998379315, 0.3025729450328216)
camera.zoom = 2

var renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
renderer.setClearColor( 0xC5C5C3 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
//renderer.physicallyCorrectLights = true;
document.body.appendChild(renderer.domElement);

// Load Light
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );

var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );

// Load a glTF resource
var loader = new THREE.GLTFLoader();
loader.crossOrigin = true;
THREE.ImageUtils.crossOrigin = "";
loader.load(
	// Resource URL
	'https://cbii.reddico.io/resource-1.glb',
	// Called when the resource is loaded
	function (gltf) {
        scene.add(gltf.scene)
        camera.updateProjectionMatrix();
        animate()
	},
	// Called while loading is progressing
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	// Called when loading has errors
	function ( error ) {
		console.log(error);
		console.log( 'An error happened' );
	}
);

function animate() {
	render();
	requestAnimationFrame( animate );
}

function render() {
	renderer.render(scene, camera);
}

setInterval(rotateClock, 1000)

function rotateClock() {
    const currentDate = new Date(),
        secondsRatio = currentDate.getSeconds() / 60,
        minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60,
        hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

    let secondArm = scene.children[2].children[7],
        minutesArm = scene.children[2].children[5],
        hourArm = scene.children[2].children[6]
    
    //prisoner849
    var milliseconds = currentDate.getMilliseconds();
    var seconds = currentDate.getSeconds();
    var smoothSeconds = seconds + ( milliseconds / 1000 );
    secondArm.rotation.x = smoothSeconds;
  
    //marquizzo
    secondArm.rotation.x = Math.PI * 2 / secondsRatio; 
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.