为了模块化进行three.js项目开发，又不用学习打包配置，使用Parcel——web应用打包工具。
Parcel 1.x版本教程：🚀 快速开始 | Parcel中文网 (parceljs.cn)
1. 创建项目
1.1 新建项目目录,并初始化
新建一个文件夹three-basic, 在VSCode打开
初始化package.json文件
npm init -y
1-2 安装parcel和three.js——注意下载的版本号
npm install --save-dev parcel-bundler@1.12.5 --registry=https://registry.npm.taobao.org
npm install three@0.137.5 --save --registry=https://registry.npm.taobao.org
1-3 创建src目录
1-4 parcel打包
2. Three.js示例——渲染场景和物体
三维的物体要渲染在二维的屏幕上。首先要创建一个场景来放置物体，那么最终怎么显示三维的内容，就应该找一个相机，将相机放在场景的某个位置，然后想要显示就要把相机拍的内容渲染出来。所以就引出三个基本概念：场景、相机、渲染器。
// src/main/main.js
import * as THREE from 'three'
// console.log(THREE);
// 1. 创建场景
const scene = new THREE.Scene()
// 2. 透视相机
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.2, 2000) // 相机位置
camera.position.set(0,0,5)
scene.add(camera)
// 3. 场景中添加物体
const cube = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color: 0xff0000})
const mesh = new THREE.Mesh(cube, material)
scene.add(mesh) // 默认情况下，当调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。
// 4. 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染的尺寸大小
document.body.appendChild(renderer.domElement) // 将webgl渲染的canvas内容添加到body
// 5. 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera)
2-1 Threejs使用的是右手坐标系
右手坐标系中x轴，y轴和z轴的正方向是如下规定的：把右手放在原点的位置，使大拇指，食指和中指互成直角，把大拇指指向x轴的正方向，食指指向y轴的正方向时，中指所指的方向就是z轴的正方向。
Threejs使用的是右手坐标系，这源于opengl默认情况下，也是右手坐标系。图中右边那个手对应的坐标系，就是右手坐标系。在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴****由屏幕从里向外
2-2 透视相机PerspectiveCamera
PerspectiveCamera(fov, aspect, near, far)
fov：表示视场，就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，一般游戏会设置60~90度，默认值45，确认渲染窗口的长Horizontal。aspect：表示渲染窗口的长宽比, 得出渲染窗口的宽Vertical。near：属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1。far：属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小，会有部分场景看不到，默认值1000。
只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到, 这样可以获得更好的渲染性能 。
2-2-1 相机的视锥体
图片定点对应的发射线和两个裁切平面一起定义了一个截断的金字塔，也就是视锥。
