three.js

学习笔记：

1. 采用pracel打包工具
2. 创建文件，npm install three --save
3. GASP 动画（可用于react，vue项目，还有数字动画）

three.js的基本内容

• scene场景
• camera相机
• 渲染器

import * as THREE from "three";
// console.log("three", THREE);
// 1.创建场景
const scene = new THREE.Scene();

// 2.创建相机（有多种相机）
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 render = new THREE.WebGL1Renderer();
// 设置渲染的尺寸大小
render.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的cavas内容添加到body
document.body.appendChild(render.domElement);

//使用渲染器，通过相机将场景渲染进来
render.render(scene, camera);

方法

requestAnimationFrame

// 刷新界面
function render(time) {
//let t = (time / 1000)越来越大, 如果不%5,cube.position.x 会在>5后一直保持在0的位置
  let t = (time / 1000) % 5;
  cube.position.x = t * 1;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }
  renderer.render(scene, camera);
  // 渲染下一帧的时候会调用该函数
  requestAnimationFrame(render);
}

移动（弧度制）

cube.position.x += 0.03;

缩放

cube.scale.x = 1.5;

旋转（弧度制）

cube.rotation.set(Math.PI / 4, 0, 0);
cube.rotation.x += 0.01;

类THREE.clock

const clock = new THREE.Clock();
let oldTime = clock.getDelta();
  console.log("oldTime", oldTime); //0.016=16ms  帧数： 1000/16 = 62帧