基本API的使用方式

根据官网的文档整理出一份API文档, 地址是：ThreeJs 官网文档，其目的还是为了方便查阅

下列代码源码地址

// 此处表示导入three
import * as  THREE from '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 );

// 3. 添加物体
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 );

// 4. 初始化渲染器
const renderer = new THREE.WebGL1Renderer();
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染的尺寸大小

// 将canvas 添加到html中
document.body.appendChild(renderer.domElement);

// 通过渲染器 通过相机将场景进行渲染
renderer.render( scene, camera );

API 列表

OrbitControls 轨道控制器
AxesHelper 添加坐标辅助线
position.set 物体移动
scale.set/ rotation.set 物体的旋转以及缩放
Clock 来获取执行时间控制匀速移动
GSAP 使用插件来设置动画

API 书写代码

OrbitControls

在这里插入图片描述

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

new OrbitControls(camera, renderer.domElement);

AxesHelper

在这里插入图片描述

// 添加坐标轴辅助线
const axesHelper = new THREE.AxesHelper(5);
scene.add( axesHelper );

position.set

在这里插入图片描述

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

cube.position.set(5, 0, 0); // 通过API【set】 来设置xyz轴数据
cube.position.x = 5; // 单独设置某个轴的数据

scale.set/ rotation.set 物体的旋转以及缩放

跟上述position 类似。

// 物体缩放
cube.scale.set( 3, 2, 1 );
// 物体旋转 Math.PI 表示180度
cube.rotation.set(Math.PI / 4, 0, 0);

Clock

如果我们通过js设置动画的话，为了能够让动画相对平滑，我们会使用requestAnimationFrame. 但是ThreeJs 内部给我们提供了API，来我们获取时间

在这里插入图片描述

const clock = new THREE.Clock();

// 通过requestAnimationFrame 来渲染下一帧
const render = () => {
	const time = clock.getElapsedTime();
	cube.position.x = time % 5 * 1;

	// 通过渲染器 通过相机将场景进行渲染
	renderer.render( scene, camera );
	requestAnimationFrame( render );
};
render();

GSAP 插件

我们可以通过计算时间平均值来设置动画速度，使动画移动相对平滑。但是有插件【gsap】帮助我们实现这些方法。可以查看文档gsap

gsap.to
- 第一个参数 作用于的动作
- duration 花费时间
- ease 执行速度
- repeat 执行次数。如果是-1 永远不会停止
- yoyo 是否往返
- onStart 动画执行开始时间
- onComplete 动画执行结束时间

import {gsap} from 'gsap';

// 添加移动动画
const animation01 = gsap.to(cube.position, {
	// 表示位置移动方向
	x: 5,
	// 表示花费时间
	duration: 5,
	ease: "power1.inOut",
	// 执行次数
	repeat: -1,
	// 表示是否往返
	yoyo: true,
	// 动画开始方法
	onStart() {
		console.log("动画移动开始");
	},
	// 动画结束的方法
	onComplete: function (  ) {
		console.log("动画 移动结束");
	}
});

// 添加旋转动画
const animation02 = gsap.to(cube.rotation, {
	x: 2 * Math.PI,
	duration: 5,
	repeat: -1,
	yoyo: true,
	onStart: function ( ) {
		console.log("旋转动画开始了");
	},
	onComplete: function (  ) {
		console.log("旋转动画结束了");
	}
});

// 暂停/ 启动 判断
window.addEventListener("dblclick",  () => {
	if (animation01.isActive())
		animation01.paused(true );
	else
		animation01.resume();

	if (animation02.isActive())
		animation02.paused(true );
	else
		animation02.resume();
})