import * as THREE from 'three'
const scene = new THREE.Scene()
/**
* 远景相机（透视投影）
* @param fov — 相机视锥体垂直视角，从下到上的观察角度
* @param aspect — 相机视锥体宽高比
* @param near — 相机视锥体近裁剪面
* @param far — 相机视锥体远裁剪面
*/
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
/**
* 正交相机（正交投影）
* @param left — 相机视椎体（Camera frustum）左面。
* @param right — 相机视椎体（Camera frustum）右面。
* @param top — 相机视椎体（Camera frustum）上面。
* @param bottom — 相机视椎体（Camera frustum）下面。
* @param near — 相机视椎体（Camera frustum）前面（靠近相机的这一面）。
* @param far — 相机视椎体（Camera frustum）后面（远离相机的这一面）
*/
const camera = new THREE.OrthographicCamera(
width / - 2,
width / 2,
height / 2,
height / - 2,
1,
1000
)
/**
* 立方体相机
* @param near -- 近裁剪面距离
* @param far -- 远裁剪面距离
* @param cubeResolution -- 设置立方体的宽度
*/
const camera = new THREE. CubeCamera(
1,
100000,
128
)
const renderer = new THREE.WebGLRenderer({
// 会否开启抗锯齿（开启后渲染平滑，但有性能消耗）
antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
// retina
renderer.setPixelRatio(window.devicePixelRatio)
// 设置场景背景色
renderer.setClearColor(0x000000)
document.body.appendChild(renderer.domElement)
renderer.render(scene, camera)
// 窗口响应，更新相机视锥体、相机投影矩阵、渲染视图大小
window.addEventListener(
'resize',
function () {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
},
false
)
