2. Three.js 開発とデバッグ設定の概要

1. 座標軸アシスタントの追加

軸ヘルパー

3つの座標軸を簡易的にシミュレーションするためのオブジェクトです
赤がX軸、緑がY軸、青がZ軸を表します。

コンストラクタ

AxesHelper( サイズ : 数値 )

size -- (オプション) 軸を表す線分の長さ。デフォルトは 1です。

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

2. 移動するオブジェクトを設定する

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

3. オブジェクトの拡大縮小と回転

スケーリング: スケール回転関数、Math.PI = 180 度

回転: オブジェクトの 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();

4. requestAnimationFrame を適用する

function render(){
    

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

5. クロックを介して時間処理アニメーションを追跡します。

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

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

6. 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: 強力かつ軽量のシーケンス ツールで、トゥイーン アニメーションのコンテナのようなもので、トゥイーン アニメーション全体を簡単に制御し、トゥイーン アニメーション間の時間関係を正確に管理できます。たとえば、アニメーションのさまざまな状態、一時停止、逆転、再起動、加速、減速、シーク時間、ラベルの追加などです。一部の複雑なアニメーション効果に適しています。
    3. TimelineMax: TimelineLite を拡張し、まったく同じ機能に加えて、repeat、repeatDelay、yoyo、currentLabel() などの便利な (ただし必須ではない) 機能を提供します。TimelineMax は、軽量ではなく、究極のフル機能のツールを目指しています。
    4. TweenMax: TimelineLite が行うことをすべて完了し、repeat、yoyo、repeatDelay (リピートディレイ) などの重要ではない機能を追加できます。CSSPlugin などの一般的なプラグインも多数含まれているため、複数のファイルを自分でロードする必要はありません。軽量ではなく、フル機能を重視します。
    >> 開発中は、GreenSock アニメーション プラットフォームのすべてのコア機能を含む TweenMax のフル機能の js ファイルを使用することをお勧めします。

    公式 Web サイトのアドレス: GSAP 公式 Web サイト
    github アドレス: GSAP github
    中国語 Web サイト: GSAP 中国語 Web サイト

7、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. サイズ変更に応じたアダプティブスクリーンを実現

リスナーを追加する

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

9. js インターフェイスを呼び出してキャンバスの全画面を制御し、全画面を終了します

ダブルクリック イベントを追加し、ダブルクリックして全画面表示にし、ダブルクリックして全画面表示を終了します。

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

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

10. グラフィカル ユーザー インターフェイスを使用して変数を変更する

インストールは 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");

インターフェース表示:

 

完全なコード:

メイン.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);

インデックス.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>

スタイル.css

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