​

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

camera.position.set(0,-2,10);

camera.lookAt(0,0,0);

​

let renderer = new THREE.WebGLRenderer();

//this is the canvas size

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

​

//long white rectangle

let geo = new THREE.BoxGeometry(10,1,0.5);

let mat = new THREE.MeshBasicMaterial( {color: 0xFFFFFF});

let mesh = new THREE.Mesh(geo, mat);

scene.add(mesh);

​

//small white rectangle

let geo1 = new THREE.BoxGeometry(0.5,2,0.5);

let mat1 = new THREE.MeshBasicMaterial( {color: 0x008000});

let mesh1 = new THREE.Mesh(geo1, mat1);

scene.add(mesh1);

​

//small white rectangle 2 facing down

let geo2 = new THREE.BoxGeometry(0.5,2,0.5);

let mat2 = new THREE.MeshBasicMaterial( {color: 0xFFFFFF});

let mesh2 = new THREE.Mesh(geo2, mat2);

scene.add(mesh2);

​

​

//cube

let geo3 = new THREE.BoxGeometry(1,1,1);

let mat3 = new THREE.MeshBasicMaterial( {color: 0xFFFF00});

let mesh3 = new THREE.Mesh(geo3, mat3);

scene.add(mesh3);

​

//red cone

const geometry = new THREE.ConeGeometry( 2, 5, 3 );

const material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );

const cone = new THREE.Mesh( geometry, material );

scene.add(cone);

​

//blue sphere

const geometryS1  = new THREE.SphereGeometry( 1, 1, 20 );

let materialS1 = new THREE.MeshBasicMaterial( { color: 0x0000FF } );

const sphere1 = new THREE.Mesh( geometryS1, materialS1 );

scene.add(sphere1);

​

//yellow sphere

const geometryS2  = new THREE.SphereGeometry( 1, 1, 20 );

let materialS2 = new THREE.MeshBasicMaterial( { color: 0xFFFF00 } );

const sphere2 = new THREE.Mesh( geometryS2, materialS2 );

scene.add(sphere2);

​

​

function loop(){

  // do something

  //mesh2.rotateX(0.1);

  mesh2.rotateY(0.1);

  sphere1.rotateX(0.01);

  sphere1.rotateY(0.01);

  sphere2.rotateX(0.05);

  sphere2.rotateY(0.02 );

  //position

  mesh.position.x = -2;

  mesh.position.y = 3;

  mesh.position.z = 0;

  mesh1.position.x = -6;

  mesh1.position.y = 4;

  mesh1.position.z = -0.1;

  mesh2.position.x = -3;

  mesh2.position.y = 1.7;

  mesh2.position.z = 0;

  mesh3.position.x = 1;

  mesh3.position.y = -2;

  mesh3.position.z = 2;

  sphere1.position.x = 1.8;

  sphere1.position.y = 1.7;

  sphere1.position.z = 0;

  sphere2.position.x = -6;

  sphere2.position.y = 6;

  sphere2.position.z = 0;

  // render the scene

  renderer.render(scene, camera);

​

  // rinse and repeat

  window.requestAnimationFrame(loop);

}

​

loop();

​

​

​