1. Adicionar assistente de eixo de coordenadas
AxesHelper
Um objeto para simulação simples de 3 eixos de coordenadas.
Vermelho representa o eixo X. Verde representa o eixo Y. Azul representa o eixo Z.
Construtor
AxesHelper (tamanho: Número)
tamanho -- (opcional) o comprimento do segmento de linha que representa o eixo. O padrão é 1 .
//添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);2. Defina o objeto para se mover
Através dos dados do eixo x, eixo y, eixo z da posição do objeto
Caso: Defina o eixo X para adicionar 0,01 a 5 a cada vez e, em seguida, altere para 0.
//5、添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xfff00});
//6、根据几何体和材质 创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//设置物体的位置
cube.position.set(5,0,0);
cube.position.x = 3;
//X轴移动
function render() {
//设置物体位置x轴不断往返
cube.position.x += 0.01;
if(cube.position.x > 5){
cube.position.x = 0;
}
//场景和相机重新渲染
renderer.render(scene,camera);
//渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}
render();3. Dimensionamento e rotação de objetos
Escala: função de rotação da escala, Math.PI = 180 graus
Rotação: através dos dados do eixo x, eixo y, eixo z da rotação do objeto
Caso: Defina o eixo X para girar 0,01 a cada vez
//5、添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xfff00});
//6、根据几何体和材质 创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//缩放
cube.scale.set(3,2,1);
cube.scale.x = 5;
//旋转
cube.rotation.set(Math.PI / 4,0,0,zxy);
//将几何体添加到场景当中
scene.add(cube);
function render(time) {
//设置物体旋转
cube.rotation.x += 0.01;
//场景和相机重新渲染
renderer.render(scene,camera);
//渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}
render();4. Aplique requestAnimationFrame
function render(){
//场景和相机重新渲染
renderer.render(scene,camera);
//渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}5. Acompanhe a animação de processamento de tempo por meio do Relógio
function render(){
//获取时钟运行总时长
//let time = clock.getElapsedTime();
//获取间隔时间
let deltaTime = clock.getDelta();
console.log("两次获取时间的间隔时间："+deltaTime);
//场景和相机重新渲染
renderer.render(scene,camera);
//渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}6. Uso básico e princípio da biblioteca de animação Gsap
1. O que é GSAP?
GSAP (GreenSock Animation Platform) é uma biblioteca de animação profissional desenvolvida desde a era do flash até hoje
2. Vantagens do GSAP
1. Velocidade rápida. O GSAP otimiza especificamente o desempenho da animação para obter os mesmos efeitos de animação de alto desempenho do CSS.
2. Leve e modular. A estrutura modular e plug-in mantém o peso do motor principal, e o pacote TweenLite é muito pequeno (basicamente menos de 7kb). GSAP fornece módulos de animação TweenLite, TimelineLite, TimelineMax e TweenMax com diferentes funções, que você pode usar conforme necessário.
3. Sem dependências.
4. Controle flexível. Em vez de ficar limitado a sequências lineares, você pode sobrepor sequências de animação, oferecendo flexibilidade para animar com código mínimo por meio de controle de tempo preciso.
3. Versão GSAP
GSAP fornece 4 arquivos de biblioteca para os usuários usarem
1. TweenLite: Esta é a parte central da plataforma de animação GSAP. Pode ser usado para obter a maioria dos efeitos de animação, adequados para efeitos de animação simples de alguns elementos.
2. TimelineLite: Uma ferramenta de sequência poderosa e leve, é como um contêiner para animações de interpolação, que pode controlar facilmente as animações de interpolação como um todo e gerenciar com precisão a relação de tempo entre as animações de interpolação. Por exemplo, vários estados de animação, pausar, reverter, reiniciar, acelerar, desacelerar, buscar tempo, adicionar rótulos, etc. É adequado para alguns efeitos de animação complexos.
3. TimelineMax: estende o TimelineLite, fornecendo exatamente a mesma funcionalidade, além de recursos úteis (mas não obrigatórios), como repeat, repeatDelay, yoyo, currentLabel(), etc. TimelineMax visa ser a melhor ferramenta completa, não leve.
4. TweenMax: Pode completar tudo o que o TimelineLite faz, e adicionar funções não essenciais, como repeat, yoyo, repeatDelay (atraso de repetição), etc. Ele também inclui muitos plug-ins comuns, como CSSPlugin, para que você não precise carregar vários arquivos sozinho. Concentre-se em recursos completos, não leves.
>> Recomenda-se usar o arquivo js completo TweenMax no desenvolvimento, que inclui todas as funções principais da plataforma de animação GreenSock.
Endereço do site oficial: Site oficial do GSAP
Endereço github: Site chinês do github GSAP : Site chinês do GSAP
Sete, propriedades e métodos de animação de controle Gsap
//设置时钟
const clock = new THREE.Clock();
//设置动画
//设置5s时间x轴走5 ease:"powerl.inout" 指动画速度
var animation = gsap.to(cube.position,{x:5,duration:5,ease:"powerl.inout",
//repeat 设置重复次数，无限次循环设置为-1
repeat:2,
//往返的运动
yoyo: true,
//延迟2s 运动
delay:2,
onComplete:() =>{
console.log("动画完成")
},onStart: () => {
console.log("动画开始")
}
});
gsap.to(cube.rotation,{x:2*Math.PI,duration:5,ease:"powerl.inout"});//设置5s时间旋转360度
//添加双击暂停
window.addEventListener("dblclick",() => {
//console.log(animation);
if(animation.isActive()){
animation.pause();//暂停
}else {
animation.resume();//暂停
}
});8. Realize a tela adaptável de acordo com a mudança de tamanho
adicionar ouvinte
//监听画面变化，更新渲染画面
window.addEventListener('resize',() => {
//console.log("画面变化了")
//更新摄像头
camera.aspect = window.innerWidth/window.innerHeight;
//更新摄像机的投影矩阵
camera.updateProjectionMatrix();
//更新渲染器
renderer.setSize(window.innerWidth,window.innerHeight);
//设置渲染器的像素比
renderer.setPixelRatio();
})9. Chame a interface js para controlar a tela cheia da tela e saia da tela cheia
Adicionar evento de clique duplo, clique duas vezes em tela cheia, clique duas vezes para sair da tela cheia.
window.addEventListener("dblclick",() => {
const fullScreenElement = document.fullscreenElement;
if(fullScreenElement){
//双击屏幕进入全屏
document.exitFullscreen();
}else{
//双击屏幕进入全屏，退出全屏
renderer.domElement.requestFullscreen();
}
});10. Altere as variáveis usando a interface gráfica do usuário
A instalação depende da biblioteca de controle de interface de interface de usuário leve dat gui
npm install --save dat.guiimportar
//导入dat gui
import * as dat from 'dat.gui';código superior
//创建gui
const gui = new dat.GUI();
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("x轴变换").onChange((value) => {
console.log("值被改变了：",value);
}).onFinishChange((value) => {
console.log("完全停下来：",value);
});
//修改物体的颜色
const params = {
color : "#ffff00",
fn:() => {
//让立方体运动起来
gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat: -1})
}
}
gui.addColor(params,"color").onChange((value) => {
console.log("值被改变了：",value);
cube.material.color.set(value);
})
//设置是否显示 选项框
gui.add(cube,"visible").name("是否显示");
//设置按钮点击触发某个事件
gui.add(params,"fn").name("立方体运动");
var folder = gui.addFolder("设置立方体");
folder.add(cube.material,"wireframe");
Exibição da interface:
Código completo:
main.js
import * as THREE from "three";
//目标：使用控制器去查看3d的物体
//console.log(THREE);
//导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
//导入动画库
import gsap from 'gsap';
//导入dat gui
import * as dat from 'dat.gui';
//1、创建场景
const scene = new THREE.Scene();
//2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//透视相机(角度，屏幕宽高比、近端、远端)
//3、设置相机位置（x,y,z）
camera.position.set(0,0,10);
//4、将相机添加到场景当中
scene.add(camera);
//5、添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xfff00});
//6、根据几何体和材质 创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//设置物体的位置
//cube.position.set(5,0,0);
//cube.position.x = 3;
//缩放
//cube.scale.set(3,2,1);
//cube.scale.x = 5;
//旋转
//cube.rotation.set(Math.PI / 4,0,0,zxy);
//将几何体添加到场景当中
scene.add(cube);
console.log(dat);
//创建gui
const gui = new dat.GUI();
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("x轴变换").onChange((value) => {
console.log("值被改变了：",value);
}).onFinishChange((value) => {
console.log("完全停下来：",value);
});
//修改物体的颜色
const params = {
color : "#ffff00",
fn:() => {
//让立方体运动起来
gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat: -1})
}
}
gui.addColor(params,"color").onChange((value) => {
console.log("值被改变了：",value);
cube.material.color.set(value);
})
//设置是否显示 选项框
gui.add(cube,"visible").name("是否显示");
//设置按钮点击触发某个事件
gui.add(params,"fn").name("立方体运动");
var folder = gui.addFolder("设置立方体");
folder.add(cube.material,"wireframe");
//7、初始化渲染器
const renderer = new THREE.WebGLRenderer();
//8、设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//console.log(renderer);
//9、将webgl渲染的Canvas内容添加到body
document.body.appendChild(renderer.domElement);
//10、使用渲染器，通过相机将场景渲染进来
//renderer.render(scene,camera);
//1、创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
//设置控制器阻尼，让控制器更有真实效果 必须在动画循环里面调用update
controls.enableDamping = true;
//设置时钟
const clock = new THREE.Clock();
window.addEventListener("dblclick",() => {
const fullScreenElement = document.fullscreenElement;
if(fullScreenElement){
//双击屏幕进入全屏
document.exitFullscreen();
}else{
//双击屏幕进入全屏，退出全屏
renderer.domElement.requestFullscreen();
}
});
function render(){
controls.update();
//场景和相机重新渲染
renderer.render(scene,camera);
//渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}
render();
//监听画面变化，更新渲染画面
window.addEventListener('resize',() => {
//console.log("画面变化了")
//更新摄像头
camera.aspect = window.innerWidth/window.innerHeight;
//更新摄像机的投影矩阵
camera.updateProjectionMatrix();
//更新渲染器
renderer.setSize(window.innerWidth,window.innerHeight);
//设置渲染器的像素比
renderer.setPixelRatio();
})
//添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<script src="./main/main.js" type="module"></script>
</body>
</html>estilo.css
#取消全局边距
* {
margin: 0;
padding: 0;
}
#设置body的颜色天空蓝
body {
background-color: skyblue;
}