threejs学习（一）

1.搭建threejs网站，和开发环境的搭建

1. 克隆代码github.com/mrdoob/thre… 到本地，进行运行
2. 首先git init 初始化项目，
3. 安装parcel 打包工具，parcel是一个极速零配置的打包工具，可以以任意文件为入口文件
4. 安装three依赖 npm install three --save

2.入门与调试

1. 创建一个场景

import * as THREE from 'three';
//创建一个场景
const scene = new THREE.Scene();

//设置场景的背景色
scene.background = new THREE.Color(0xff4400)

2. 创建一个相机对象,
   PerspectiveCamera中参数介绍PerspectiveCamera(fov,aspect,near,far),
   fov:视野角度,
   aspect:当前画布的宽高比,
   near:近截面,
   far:远截面

//创建一个相机对象(使用透视相机)
const camera= new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
//设置相机的位置
camera.position.set(0,0,5);
//相机观察的目标
camera.lookAt(0,0,0)

3. 渲染器
   通过一个 WebGLRenderer构造器，实例化一个渲染器对象

const renderer = new THREE.WebGLRenderer();
//设置场景的背景色
renderer.setClearColor(0x00ff00);
//设置像素
renderer.setPixelRatio(window.devicePixelRatio);
//设置大小
renderer.setSize(window.innerWidth,window.innerHeight);
// 将渲染器节点插入到body
document.documentElement.appendChild(renderer.domElement);
// 利用渲染器将,通过相机将场景渲染出来
renderer.render(scene,camera)

4. 辅助坐标系

const helper = new THREE.AxesHelper(5);// 参数 坐标轴线段长度
scene.add(helper)

5. 轨道控制器,可以让相机围绕着物体进行转动

import {  OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 轨道控制器
const orbit = new OrbitControls(camera,renderer.domElement);

// 利用渲染器将,通过相机将场景渲染出来
render()
// console.log();
function render(){
  renderer.render(scene,camera);
  // 渲染下一帧的时候，执行函数render
  // requestAnimationFrame(render)
}

6. 物体的移动、缩放和旋转
   移动：cube.position.x = 2 或者cube.position.set(x,y,z)
   缩放：cube.scale.x = Math.PI / 4 或者cube.scale.set(x,y,z)
   旋转: cube.rotation.x = Math.PI / 4 或者cube.rotation.set(x,y,z)

// 移动
  cube.position.x += 0.01;
  if(cube.position.x > 5){
    cube.position.x = 0
  }
// 缩放
 cube.scale.x += 0.01;
  if(cube.scale.x > 1.5){
    cube.scale.x =1
  }
// 旋转
cube.rotation.set(Math.PI /4,Math.PI /6,0,"XYZ")

7. clock跟踪处理时间主要是2个方法
   getElapsedTime():获得时钟运行的总时长
   getDelta():获取自oldTime设置后到当前的秒数,oldTime是存储最后一次调用start,getElapsedTime(),或者getDelta()方法
8. gsap动画库 gsap.to(参数1，参数2),中有2个参数，第一个参数是css选择器或者obj对象，第二个参数是状态对象，状态对象中设置属性有：
   x: x轴移动的距离 x:100就相当于transltateX(100px),
   y: y轴移动的距离 y:100就相当于transltateY(100px),
   duration: 动画持续的时间,单位是s,
   delay:动画延时的时间，
   repeat:动画重复的次数,-1就是一直重复 repeatDelay:重复播放间隔的时间，单位是s yoyo:为true,开启往返运动，
   onComplete：动画完成时调用函数，
   onUpdate:动画持续运动中调用该函数

gsap.to(cube.rotation, {
  x: 10,
  duration: 5,
  repeat: -1,
  yoyo: true,
  repeatDelay: 1,
  onComplete: function () {
    console.log("动画完成了");
  },
  onUpdate:function(){
    console.log('动画在持续运动中')
  }
});

8. 自适应屏幕大小以及全屏的切换

//监听屏幕的变化
window.addEventListener('resize',()=>{
  //相机改变宽高比
  console.log(0000)
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  //渲染器改变大小
  renderer.setSize(window.innerWidth,window.innerHeight);
  //设置渲染器显示比例
  renderer.setPixelRatio(window.devicePixelRatio);
})

//全屏切换
window.addEventListener('dblclick',function(){
  //判断是否在全屏的状态中
  if(document.fullscreenElement){
    // 退出全屏
    document.exitFullscreen()
  }else{
    //进入全屏
    renderer.domElement.requestFullscreen();
  }
})