parcel + three.js

 [parcel](https://v2.parceljs.cn/getting-started/webapp/)打包工具相比别的打包工具比较更快捷方便

1、使用parcel搭建three.js开发环境

yarn add --dev parcel

or

npm install --save-dev parcel

three.js  基本的内容

引入

import * as THREE from  'three'

1、 创建场景

const scene = new THREE.Scene()

2、 创建相机  three

PerspextiveCamera(fov,aspect,near,far) // 摄像机视椎体垂直视野角度，视椎体长宽比，视椎体进端面，视椎体远端面

const camera = new THREE.PerspextiveCamera(75, window.innerWidth/window.innerHeight,

0.1, 

1000

)

3、设置相机位置

camera.position.set(0,0,10) // X,Y,Z

scene.add(camera)

4.添加物体（几何体）

const  cubeGeometry = new THREE.BoxGeometry() 

const cubeMaterial = new.THREE.MeshBsaicMaterial({color: 0xFFFF00})

4、根据几何体和材质创建物体

Mesh ：网格

const cube = new.THREE.Mesh(cubeGeometry，cubeMaterial)

5、渲染几何体

scene.add(cube)

const renderer = new THREE.WebGLRenderer()

设置大小

renderer.setSize(window.innerWidth, window.innerHeight)

将webGL渲染的canvas内容添加到body

document.body.appendChild(renderer.domElement)

6、使用渲染器，通过相机将场景渲染进来

 renderer.render(scene,camera)

7、three的轨道控制器

import { OrbitControls} from  'three/examples/jsm/controls/orbitControls.js'

const  controls = new OrbitControls(camera, renderer.domElement) //相机，domElement

// 设置时钟

const clock  = new THREE.Clock()

// 设置控制器阻尼, 必须在动画循环里调用。update()

controls.enableDamping = true;

// 渲染函数

// requestAnimationFrame 时间参数 控制物体动画

function render(time){

// 

// 3D物体移动

// cube.position.x +=0.01;

// 物体的旋转

// cube.rotation.x +=0.01;

// if(cube.position.x > 5){

//     cube.position.x = 0;

// }

let time  =  clock.getElapsedTIme()

let t  = time % 5

cube.position.x = t * 1

// cube.rotation.x +=0.01;

rederer.render(scene,camera)

controls.update()

// 渲染下一帧的时候就会调用render函数

requestAnimationFrame(rederer) 

}

render()

8、添加坐标辅助器

const axexHelper = new THREE.AxexHelper( 5 )；// 长度

scene.add( axexHelper)

9、物体的移动，缩放，旋转

// cube.position.set(5,0,0) 设置物体的位置

cube.position.x()

// 物体缩放

cube.scle.set(3,2,1)

// 物体旋转

cube.rotation.set(Math.PI/4, 0 , 0，'XYZ' ) // X,Y,Z  , 旋转的顺序默认XYZ
 

10、 设置时钟

// Clock 跟踪时间

       autoStart: 第一次update是开启时钟

        startTime：存储时钟最后一次调用start方法时间

        oldTIme：存储时钟最后一次调用start，getELapsedTime 或getDelta方法时间

        elapsedTIme：保存时钟运行的总时长

        running： 判断是否在运行

const clock  = new THREE.Clock()

let time  =  clock.getElapsedTIme() // 获取时钟运行总时长

let deltaTime  =  clock.getDelta()  // 获取两次时间的间隔时间

监听画面变化，更新渲染画面

window.addEvenetListener('resize', ()=>{

        // 更新相机

        camera.asspect = window.innerWidth/window.innerHeight ；

        // 更新摄像机的投影矩阵

        camera.updateProjectionMatrix();

        // 更新渲染器

        renderer.setSize(window.innerWidth,window.innerHeight);

        // 设置渲染器的像素比

        renderer.setPixelRatio(window.deivcePixelRatio);

})