three.js常用配置及工具

目录

1. 轨道控制器
2. 坐标轴辅助器
3. gsap动画库的使用
4. 窗口自适应
5. datgui的使用

---

1.导入轨道控制器

// 导入轨道控制器
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
// 创建轨道控制器(可以鼠标拖动视角)
const controls = new OrbitControls(camera,renderer.domElement)

2.创建坐标轴

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

3.gasp动画库

npm install gsap

// 导入动画库
import gsap from "gsap";
// 设置动画
var animate = gsap.to(cube.position,{
    x:5,
    duration:5,
    ease:"power1.inOut",
    repeat:1,
    yoyo:true,
    delay:2,
    onComplete:()=>{
        console.log('动画完成')
    },
    onStart:()=>{
        console.log('动画开始')
    }
});
gsap.to(cube.rotation,{x:2*Math.PI,duration:5,ease:"power1.inOut"});
// 双击事件
window.addEventListener("dblclick",()=>{
    if(animate.isActive()){
        animate.pause();
    }else{
        animate.resume();
    }
})

TweenMax中文网（GreenSock动画平台,GSAP）tweenmax 是greensock 动画平台的核心插件，greensock 是一套用于在所有主流浏览器中制作高性能html5动画的工具。tweenmax中文网提供tweenmax、tweenlite、timelinemax、timelinelite核心功能的中文文档和greensock 相关插件下载。https://www.tweenmax.com.cn/index.html

4.datgui

npm install --sava dat.gui

// 导入gui
import * as dat from "dat.gui";
// 创建gui
const gui = new dat.GUI();
// gui---x轴移动距离
gui.add(cube.position,"x")
    .min(0)
    .max(5)
    .step(0.01)
    .name("x轴移动距离")
    .onChange((value)=>{
        console.log("x被修改",value)
    })
    .onFinishChange((value)=>{
        console.log("完全停下来",value)
    })
const params = {
    color:'#ffff00',
    fn:()=>{
        gsap.to(cube.position,{z:5,direction:2,yoyo:true})
    }
};
// gui---颜色
gui.addColor(params,"color").onChange((value)=>{
    console.log("颜色",value);
    cube.material.color.set(value)
});
// gui---设置选项框
gui.add(cube,"visible").name("设置选项框");
// gui---点击触发事件
gui.add(params,"fn").name("立方体z轴移动");
// gui---设置立方体
var folder = gui.addFolder("设置立方体")
folder.add(cube.material,"wireframe");