Flamingo

by gilomer88

HTML

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>



  <script>
    console.log("hello world!");
  
    
  </script>


</body>
</html>

CSS

body,
html {
  margin: 0%;
  padding: 0%;
}

#canvasTwoDIV {
  position: absolute;
  top: 10px;
  right: 30px;

  width: 600px;
  height: 400px;

  background-color: maroon;
  color: white;
  
  display: none;
}


#detailsCanvas {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 500px;
  height: 300px;
  background-color: white;
}


#instruct {
  position: absolute;
  top: 20px;
  left: 300px;
  background-color: orange;
  color: purple;
  padding: 5px;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js';

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/controls/OrbitControls.js';

import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/loaders/GLTFLoader.js';


let container;
let camera, scene, renderer, rayCaster, controls;
let mesh, mixer;
let cubesArray = [];
let objectsForRayCasterArray = [];
let mouseX, mouseY;
var mousePositionVector = new THREE.Vector2();

let flamingoMesh;
var FlamingosArray = [];
var FlamingoX = -70


const radius = 600;
let theta = 0;
let prevTime = Date.now();

let cubeX = -70;
var smallCubeMesh = new THREE.Mesh();


init();
animate();
/* makeCubes(); */


function init() {

  camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set(0, 30, 190);

  scene = new THREE.Scene();
  scene.background = new THREE.Color( "darkblue" );

  rayCaster = new THREE.Raycaster();

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.outputEncoding = THREE.sRGBEncoding;
  document.body.appendChild( renderer.domElement );

  controls = new OrbitControls( camera, renderer.domElement );


  const light1 = new THREE.DirectionalLight( 0xefefff, 1.5 );
  light1.position.set( 1, 1, 1 ).normalize();
  scene.add( light1 );

  const light2 = new THREE.DirectionalLight( 0xffefef, 1.5 );
  light2.position.set( - 1, - 1, - 1 ).normalize();
  scene.add( light2 );
  


	const loader = new GLTFLoader();
	/* loader.load( "https://threejs.org/examples/models/gltf/Parrot.glb", function ( gltf ) { */
	loader.load( "https://ipfs.io/ipfs/QmYqwNYxqmu4z39emTo7h9D62rbwm1esAmbAf2PctAyUvu?filename=Flamingo.glb", function ( gltf ) {
		flamingoMesh = gltf.scene.children[ 0 ];
		/* flamingoMesh.scale.set( 0.30, 0.30, 0.30 ); */
    flamingoMesh.rotation.y =...