2、Three.js开发入门与调试设置

一、添加坐标轴辅助器

AxesHelper

用于简单模拟3个坐标轴的对象.
红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

构造函数

AxesHelper( size : Number )

size -- (可选的) 表示代表轴的线段长度. 默认为 1.

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

二、设置物体移动

通过物体position的x轴、y轴、z轴数据

案例：设置X轴每次加0.01加到5，变为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();

三、物体的缩放与旋转

缩放：scale 旋转函数，Math.PI = 180度

旋转：通过物体rotation的x轴、y轴、z轴数据

案例：设置X轴每次旋转0.01

//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();

四、应用requestAnimationFrame

function render(){
    

    //场景和相机重新渲染
    renderer.render(scene,camera);
    //渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}

五、通过Clock跟踪时间处理动画

function render(){
    //获取时钟运行总时长
    //let time = clock.getElapsedTime();
    //获取间隔时间
    let deltaTime = clock.getDelta();
    console.log("两次获取时间的间隔时间："+deltaTime);

    //场景和相机重新渲染
    renderer.render(scene,camera);
    //渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}

六、Gsap动画库基本使用与原理

    1.什么是GSAP?
    GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库

    2.GSAP优点
    1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
    2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
    3、没有依赖。
    4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。

    3.GSAP版本
    GSAP提供4个库文件供用户使用
    1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
    2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
    3.TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
    4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。
    >>建议在开发中使用TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。

    官网地址：GSAP官网
    github地址：GSAP github
    中文网: GSAP中文网

七、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();//暂停
    }
    
});

八、根据尺寸变化实现自适应画面

添加监听

//监听画面变化，更新渲染画面
window.addEventListener('resize',() => {
    //console.log("画面变化了")
    //更新摄像头
    camera.aspect = window.innerWidth/window.innerHeight;
    //更新摄像机的投影矩阵
    camera.updateProjectionMatrix();
    //更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight);
    //设置渲染器的像素比
    renderer.setPixelRatio();
})

九、调用js接口控制画布全屏和退出全屏

添加双击事件，双击时全屏，再双击则退出全屏。

window.addEventListener("dblclick",() => {
    const fullScreenElement = document.fullscreenElement;
    if(fullScreenElement){
        //双击屏幕进入全屏
        document.exitFullscreen();

    }else{
        //双击屏幕进入全屏，退出全屏
        renderer.domElement.requestFullscreen();
    }
    
    
});

十、应用图形用户界面更改变量

安装依赖dat gui 轻量级UI界面控制库

npm install --save dat.gui

导入

//导入dat gui 
import * as dat from 'dat.gui';

上代码

//创建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");

界面展示：

全部代码：

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>

style.css

#取消全局边距
* {
    margin: 0;
    padding: 0;
}
#设置body的颜色天空蓝
body {
    background-color: skyblue;
}