{"size": 1140, "ext": "js", "max_stars_repo_path": "Animation/src/script.js", "max_stars_repo_name": "Ambuj-Singh/ThreeJS-implementation", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "Animation/src/script.js", "max_issues_repo_name": "Ambuj-Singh/ThreeJS-implementation", "max_issues_repo_issues_event_min_datetime": "2021-08-07T18:41:29.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-07T18:41:49.000Z", "max_forks_repo_path": "Animation/src/script.js", "max_forks_repo_name": "Ambuj-Singh/ThreeJS-implementation", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 19.0, "max_line_length": 71, "alphanum_fraction": 0.7061403509}
import './style.css'
import * as THREE from 'three'
import { Clock } from 'three';

//scene
const scene = new THREE.Scene()

//cyan cube
const geometry = new THREE.BoxGeometry(1,1,1)

const material = new THREE.MeshBasicMaterial({color: 'cyan'});
const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

//sizes
const sizes = {
    width: 800,
    height:600
}


//camera
const camera = new THREE.PerspectiveCamera(75,sizes.width/sizes.height)
camera.position.set(1,1,6)
scene.add(camera)
//Axes helper
const axes = new THREE.AxesHelper(3)
scene.add(axes)
//renderer

const canvas = document.querySelector('.webgl')

const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width,sizes.height)

//Clock
const clock = new THREE.Clock()

//Animation
const funct = () =>
{
    //adating to framerate
    const elapsedTime = clock.getElapsedTime()

    //updating objects
    mesh.position.y = Math.sin(elapsedTime) 
    mesh.position.x = Math.cos(elapsedTime)
    //rederer
    renderer.render(scene, camera)

    //calling funct on to the next frame
    window.requestAnimationFrame(funct)
}

funct()

