RTSS_week7_sketch.js

import * as THREE from 'three';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
import { cloud } from "/cloud.js";
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//

let camera, scene, renderer;

//control
let controls, //firstPerson
	control; //orbitControl

//helper
let gridHelper, axesHelper;

//plane
let geometry, texture, material, waterMesh ;

	
// //cloud
// let cloudGeo, cloudTexture, cloudMaterial ;

//clock
//https://discoverthreejs.com/book/first-steps/animation-loop/
let clock;

//add audio
let audioListener;
let audioListenerMesh;
let audioSources = [];
let myClassObjects = [];


//mouse click to copy object!

let mouse = new THREE.Vector2();
let intersectionPoint = new THREE.Vector3();
let planeNormal = new THREE.Vector3();
let plane = new THREE.Plane();
let raycaster= new THREE.Raycaster();



//window Resize
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
	
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
	
		renderer.setSize( window.innerWidth, window.innerHeight );
	
}


//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//

init();
animate();

function init() {

	clock = new THREE.Clock();

	camera = new THREE.PerspectiveCamera(
		60, 
		window.innerWidth / window.innerHeight, 
		1, 
		5000);
	
	camera.position.y = 300;
	camera.position.z = 1000;

	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xE9F1FF);
	scene.fog = new THREE.FogExp2(0xE9F1FF, 0.0007);
		
	addSpatialAudio();

	gridHelper = new THREE.GridHelper(20000, 50, 0xffffff,0xffffff);
	axesHelper = new THREE.AxesHelper(2000);
	
	scene.add(gridHelper,
			//   axesHelper
			);



	renderer = new THREE.WebGLRenderer();

	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	
	//~~~~~~~~~~~~~~ Water Plane ~~~~~~~~~~~~~~

	geometry = new THREE.PlaneGeometry(20000, 20000);
	geometry.rotateX(-Math.PI/2);
	
	//load the texture -> a matarial
	texture = new THREE.TextureLoader().load('/whitesky.jpg');
	material = new THREE.MeshBasicMaterial({
		color: 0xC9DEFF,
		map: texture,
		});

	waterMesh = new THREE.Mesh(geometry, material);
	waterMesh.rotation.y = Math.random()*2000;

	scene.add(waterMesh);

	for (let i = 0; i < 10; i++) {
		let myClassObject = new cloud(
			(Math.random()-0.5)*i * 600, 
			(Math.random()-0.5)*1 * 50 +400,
			(Math.random()-0.5)*i * 600, 
			scene);
		myClassObjects.push(myClassObject);
	  }
}


	
	//~~~~~ orbitControl ~~~~~~
	control = new OrbitControls(camera, renderer.domElement);

	// }


//~~~~~~~~~~~~~~~add sound~~~~~~~~~~~~~~~~~~
function addSpatialAudio() {
	// first lets add our audio listener.  This is our ear (or microphone) within the 3D space.
	audioListener = new THREE.AudioListener();
  
	// create a 3D mesh so we can see the location of the audio listener
	// this is not strictly necessary, but can be helpful for debugging
	audioListenerMesh = new THREE.Mesh(
	  new THREE.BoxGeometry(2, 2, 2),
	  new THREE.MeshBasicMaterial({  })
	);
	audioListenerMesh.add(audioListener);
	audioListenerMesh.position.set(0, 0, 0);
	scene.add(audioListenerMesh);
  
	// create an audio loader which will load our audio files:
	const audioLoader = new THREE.AudioLoader();
  
	// then let's add some audio sources
	
	  	let audiomesh = new THREE.Mesh(
		new THREE.SphereGeometry(10000, 12, 12),
		new THREE.MeshBasicMaterial({ color: "blue" })
	  );
  
	  let audioSource = new THREE.PositionalAudio(audioListener);
  
	  // load the audio file into the positional audio source
	  	audioLoader.load( "wind_sound.mp3", function (buffer) {
		audioSource.setBuffer(buffer);
		audioSource.setLoop(true);
		audioSource.setVolume(0.6);
		audioSource.play();

	  });
  
	  audiomesh.add(audioSource);
	  scene.add(audiomesh);
	//   audioSources.push(mesh);

}
  
function animate() {
	render();
	requestAnimationFrame(animate);
	
	for (let i = 0; i < myClassObjects.length; i++) {
		myClassObjects[i].update();
	  }

}

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

}