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
)
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
