const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
// 正投影相機(jī)案例
const width = window.innerWidth; //canvas畫布寬度
const height = window.innerHeight; //canvas畫布高度
const k = width / height; //canvas畫布寬高比
const s = 600;//控制left, right, top, bottom范圍大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
//透視相機(jī)案例
// width和height用來設(shè)置Three.js輸出的Canvas畫布尺寸(像素px)
const width = 800; //寬度
const height = 500; //高度
// 30:視場角度, width / height:Canvas畫布寬高比, 1:近裁截面, 3000：遠(yuǎn)裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

// 通過UI按鈕改變相機(jī)觀察角度
document.getElementById('x').addEventListener('click', function () {
    camera.position.set(500, 0, 0); //x軸方向觀察
    camera.lookAt(0, 0, 0); //重新計(jì)算相機(jī)視線方向
})

// 通過UI按鈕改變相機(jī)觀察角度
document.getElementById('y').addEventListener('click', function () {
    camera.position.set(0, 500, 0); //y軸方向觀察
    camera.lookAt(0, 0, 0); //重新計(jì)算相機(jī)視線方向
})

// 通過UI按鈕改變相機(jī)觀察角度
document.getElementById('z').addEventListener('click', function () {
    camera.position.set(0, 0, 500); //z軸方向觀察
    camera.lookAt(0, 0, 0); //重新計(jì)算相機(jī)視線方向
})

// 渲染循環(huán)
function render() {
    camera.position.z -= 0.3;//相機(jī)直線運(yùn)動(dòng)動(dòng)畫
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

// 渲染循環(huán)
let angle = 0; //用于圓周運(yùn)動(dòng)計(jì)算的角度值
const R = 100; //相機(jī)圓周運(yùn)動(dòng)的半徑
function render() {
    angle += 0.01;
    // 相機(jī)y坐標(biāo)不變，在XOZ平面上做圓周運(yùn)動(dòng)
    camera.position.x = R * Math.cos(angle);
    camera.position.z = R * Math.sin(angle);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

function render() {
    angle += 0.01;
    camera.position.x = R * Math.cos(angle);
    camera.position.z = R * Math.sin(angle);
    // .position改變，重新執(zhí)行l(wèi)ookAt(0,0,0)計(jì)算相機(jī)視線方向
    camera.lookAt(0,0,0);
    requestAnimationFrame(render);
}
render();

// 引入軌道控制器擴(kuò)展庫OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 設(shè)置相機(jī)控件軌道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改變了相機(jī)參數(shù)，重新調(diào)用渲染器渲染三維場景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //執(zhí)行渲染操作
    console.log('camera.position',camera.position);
});//監(jiān)聽鼠標(biāo)、鍵盤事件
//相關(guān)限制方法：
controls.enablePan = false; //禁止平移
controls.enableZoom = false;//禁止縮放
controls.enableRotate = false; //禁止旋轉(zhuǎn)
// 縮放范圍
controls.minZoom = 0.5;
controls.maxZoom = 2;
// 上下旋轉(zhuǎn)范圍
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI/2;
// 左右旋轉(zhuǎn)范圍
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;
//更新方法
function animate() {
  requestAnimationFrame(animate);
  // 更新控制器
  controls.update();
  // 渲染場景
  renderer.render(scene, camera);
}

// 引入相機(jī)控件`MapControls`
import { MapControls } from 'three/addons/controls/OrbitControls.js';
const controls = new MapControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
    // 鼠標(biāo)右鍵旋轉(zhuǎn)時(shí)候，查看.position變化
    // 鼠標(biāo)左鍵拖動(dòng)的時(shí)候，查看.position、.target的位置會(huì)變化
    console.log('camera.position',camera.position);
    console.log('controls.target',controls.target);
});
//相關(guān)限制方法：
controls.enablePan = false; //禁止平移
controls.enableZoom = false;//禁止縮放
controls.enableRotate = false; //禁止旋轉(zhuǎn)
//相機(jī)位置與觀察目標(biāo)點(diǎn)最小值
controls.minDistance = 200;
//相機(jī)位置與觀察目標(biāo)點(diǎn)最大值
controls.maxDistance = 500;
// 上下旋轉(zhuǎn)范圍
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI/2;
// 左右旋轉(zhuǎn)范圍
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;
//更新方法
function animate() {
  requestAnimationFrame(animate);
  // 更新控制器
  controls.update();
  // 渲染場景
  renderer.render(scene, camera);
}

window.addEventListener('resize', onWindowResize);

// onresize 事件會(huì)在窗口被調(diào)整大小時(shí)發(fā)生
function onWindowResize(){
  // 重置渲染器輸出畫布canvas尺寸
  renderer.setSize(window.innerWidth,window.innerHeight);
  // 重置相機(jī)投影的相關(guān)參數(shù)
  k = window.innerWidth/window.innerHeight;//窗口寬高比
  camera.left = -s*k;
  camera.right = s*k;
  camera.top = s;
  camera.bottom = -s;
  // 渲染器執(zhí)行render方法的時(shí)候會(huì)讀取相機(jī)對(duì)象的投影矩陣屬性projectionMatrix
  // 但是不會(huì)每渲染一幀，就通過相機(jī)的屬性計(jì)算投影矩陣(節(jié)約計(jì)算資源)
  // 如果相機(jī)的一些屬性發(fā)生了變化，需要執(zhí)行updateProjectionMatrix ()方法更新相機(jī)的投影矩陣
  camera.updateProjectionMatrix ();
};

// onresize 事件會(huì)在窗口被調(diào)整大小時(shí)發(fā)生
function onWindowResize(){
  // 重置渲染器輸出畫布canvas尺寸
  renderer.setSize(window.innerWidth,window.innerHeight);
  // 全屏情況下：設(shè)置觀察范圍長寬比aspect為窗口寬高比
  camera.aspect = window.innerWidth/window.innerHeight;
  // 渲染器執(zhí)行render方法的時(shí)候會(huì)讀取相機(jī)對(duì)象的投影矩陣屬性projectionMatrix
  // 但是不會(huì)每渲染一幀，就通過相機(jī)的屬性計(jì)算投影矩陣(節(jié)約計(jì)算資源)
  // 如果相機(jī)的一些屬性發(fā)生了變化，需要執(zhí)行updateProjectionMatrix ()方法更新相機(jī)的投影矩陣
  camera.updateProjectionMatrix ();
};