透视相机（PerspectiveCamera）

这一摄像机使用[perspective projection]（透视投影）来进行投影。

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式

场景是物体是目标，摄像机是展示目标的灯光，需要摄像机配合场景一起展示在场景里第三步把相机添加到场景里第四步，创建几何体 BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。创建几何体材质，然后根据几何体形状和几何体材质创建一个物体，最后将物体添加到场景里，

第五步初始化渲染器，设置渲染器渲染大小，将渲染器的dom添加都body上，使用渲染器将物体通过相机的场景渲染都dom上 WebGL Render 用WebGL渲染出你精心制作的场景。

import * as THREE from 'three'
console.log(THREE)

// 目标：了解threejs最基本的内容


//1 创建场景
const scene = new THREE.Scene()

// 2创建相机 new 一个透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10)

// 相机添加到场景里
scene.add(camera)

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 几何体材质
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
// 根据几何体创建物体
const cube = new THREE.Mesh(geometry, material);

scene.add(cube)

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
console.log(renderer,33)

// 将webFl渲染的canvas内容添加到body中
document.body.appendChild(renderer.domElement)

// 使用渲染器通过相机将场景渲染到dom上
renderer.render(scene,camera)

使用three.js渲染第一个场景和物体

透视相机（PerspectiveCamera）