Real Time social space

/*
This example uses a function named "loop" to tell the renderer to render. This function will call
the  'window.requestAnimationFrame()' function to tell the browser window to continue drawing 
at 60 frames per second.  
RequestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
*/

import * as THREE from "three";
// import { Group } from "three";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

let scene, camera, renderer;
let frameCount = 0;


  // create a scene in which all other objects will exist
  scene = new THREE.Scene();
  let sceneTexture = new THREE.TextureLoader().load( 'starsky.jpg' )
  scene.background = sceneTexture;
  // create a camera and position it in space
  
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5; // place the camera in space
  camera.position.y = 5;
  camera.lookAt(0, 0, 0);

  // the renderer will actually show the camera view within our <canvas>
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);


  // add orbit controls
  let controls = new OrbitControls(camera, renderer.domElement);

  //light
  let ambientLight = new THREE.AmbientLight(0xffffff);
  let pointLight = new THREE.PointLight(0xffffff);
  pointLight.castShadow = true;
  pointLight.shadow.mapSize.width = 512; 
  pointLight.shadow.mapSize.height = 512; 
  pointLight.shadow.camera.near = 0.2; 
  pointLight.shadow.camera.far = 500; 
  pointLight.position.set(2, 5, 1);

  //  helper
  let gridHelper = new THREE.GridHelper(25, 25);
  let axesHelper = new THREE.AxesHelper(1.2);
  let lightHelper = new THREE.PointLightHelper(pointLight);

  scene.add(
    gridHelper,
    axesHelper, 
    lightHelper
    );

  // mouse
  let mouseX = 0;
  let mouseY = 0;
  document.addEventListener("mousemove", (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
  });

  // stuff collection!
  let cubeGeometry = new THREE.BoxGeometry(2, 5, 1);
  let cubeTexture = new THREE.TextureLoader().load( 'woodtexture.jpg' )
  let cubeMaterial = new THREE.MeshStandardMaterial({ map: cubeTexture });
  let cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cubeMesh.position.set(0, 0, 0)
  cubeMesh.castShadow = true;
  cubeMesh.receiveShadow = true;


let redBallGeometry = new THREE.SphereGeometry(0.8, 16, 16);
let redBallMaterial = new THREE.MeshStandardMaterial({ color: 0xe00b00 });
let redBallMesh = new THREE.Mesh(redBallGeometry, redBallMaterial);
redBallMesh.position.set(0, 1.2, 0.5);
redBallMesh.castShadow = true;
redBallMesh.receiveShadow = true;

let greenBallGeometry = new THREE.SphereGeometry(0.8, 16, 16);
let greenBallMaterial = new THREE.MeshStandardMaterial({ color: 0x3e5e3f });
let greenBallMesh = new THREE.Mesh(greenBallGeometry, greenBallMaterial);
greenBallMesh.position.set(0, -1.2, 0.5);
greenBallMesh.castShadow = true;
greenBallMesh.receiveShadow = true;


//steeringWheel
let whiteDonutGeometry = new THREE.TorusGeometry(1.3, 0.15, 16, 200);
let whiteDonutMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteDonutMesh = new THREE.Mesh(whiteDonutGeometry, whiteDonutMaterial);
whiteDonutMesh.position.set(0, -1, 2);
whiteDonutMesh.castShadow = true;
whiteDonutMesh.receiveShadow = true;

let SwhiteDonutGeometry = new THREE.TorusGeometry(0.6, 0.1, 16, 200);
let SwhiteDonutMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
let SwhiteDonutMesh = new THREE.Mesh(SwhiteDonutGeometry, SwhiteDonutMaterial);
SwhiteDonutMesh.position.set(0, -1, 2);
SwhiteDonutMesh.castShadow = true;
SwhiteDonutMesh.receiveShadow = true;

let whiteTube01Geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 20);
let whiteTube01Material = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteTube01Mesh = new THREE.Mesh(whiteTube01Geometry, whiteTube01Material);
whiteTube01Mesh.position.set(0, 0, 2);
whiteTube01Mesh.castShadow = true;
whiteTube01Mesh.receiveShadow = true;

let whiteTube02Geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 20);
let whiteTube02Material = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteTube02Mesh = new THREE.Mesh(whiteTube02Geometry, whiteTube02Material);
whiteTube02Mesh.position.set(0.6, -1.6, 2);
whiteTube02Mesh.rotateZ(Math.PI / 4);
whiteTube02Mesh.castShadow = true;
whiteTube02Mesh.receiveShadow = true;

let whiteTube03Geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 20);
let whiteTube03Material = new THREE.MeshStandardMaterial({ color: 0xffffff });
let whiteTube03Mesh = new THREE.Mesh(whiteTube03Geometry, whiteTube03Material);
whiteTube03Mesh.position.set(-0.6, -1.6, 2);
whiteTube03Mesh.rotateZ(Math.PI / -4);
whiteTube03Mesh.castShadow = true;
whiteTube03Mesh.receiveShadow = true;

//null group for steeringwheel position
let wheelCenter = new THREE.Group();
wheelCenter.position.set(0,-1,0.2);

// steeringWheel Group
let steeringWheel= new THREE.Group();
steeringWheel.position.set(0,1,0);
steeringWheel.add(whiteDonutMesh,SwhiteDonutMesh,
  whiteTube01Mesh,whiteTube02Mesh,whiteTube03Mesh);

wheelCenter.add(steeringWheel);


//background stroke
let boxGeometry = new THREE.BoxGeometry(Math.random() * 4.3, 0.05, 0.01);
let boxMatarial = new THREE.MeshStandardMaterial({ color: 0x202103 })

for (let i = 0; i < 400; i++) {

  let boxMesh = new THREE.Mesh(boxGeometry, boxMatarial);
  boxMesh.position.x = -1 + (Math.random() * 4) - 0.8;
  boxMesh.position.y = -4 + (Math.random() * 0.5) + 0.01 * i;
  boxMesh.position.z = -0.5;
  boxMesh.castShadow = true;
  boxMesh.receiveShadow = true;

  scene.add(boxMesh);

}


// let objs = {
//   shiba: null
// }

let shibaCenter = new THREE.Group();
shibaCenter.position.set(0,0,0);

let loader = new GLTFLoader();
loader.load( './shiba/scene.gltf',
 ( object ) => {
  console.log(object)
  object.scene.scale.set(1,1,1);
  object.scene.position.set(2,0,2);
  shibaCenter.add(object.scene);
  // objs.shiba = object.scene;
	scene.add( shibaCenter );
})




  // and add it to the scene
  scene.add(
  cubeMesh,
  redBallMesh,
  greenBallMesh,
  // steeringWheel,
  wheelCenter,
  // whiteDonutMesh, SwhiteDonutMesh,
  // whiteTube01Mesh,
  // whiteTube02Mesh,
  // whiteTube03Mesh,
  ambientLight, pointLight,
    
  );

 

function loop() {

  
  frameCount++;

  // let axis = new THREE.Vector3(0, 0, 1);
  // steeringWheel.position.set(0, 0, 0);
  // wheelCenter.setRotationFromAxisAngle(axis, frameCount / 20);
  // steeringWheel.rotation.z=frameCount/100;
  wheelCenter.rotation.z=frameCount/100;
  shibaCenter.rotation.y=-frameCount/100
  // if(objs.shiba){
  //   // objs.position.z= 2*Math.sin(frameCount/100);
  //   objs.shiba.position.x= 2*Math.sin(frameCount/100);
  //   objs.shiba.position.y= 1*Math.sin(frameCount/100);
  //   objs.shiba.rotation.z= Math.sin(frameCount/10);
  // }

  // object.scene.rotation.z= Math.sin(frameCount/10);

  // add some movement
  cubeMesh.rotation.x =   mouseY * 0.001+window.innerHeight ;
  cubeMesh.rotation.y =   mouseX * 0.001+window.innerWidth;
 
  // finally, take a picture of the scene and show it in the <canvas>
  renderer.render(scene, camera);
  window.requestAnimationFrame(loop); // pass the name of your loop function into this function
 
}

loop();