克隆

const cube2 = cube.clone()  //克隆

cube2.rotation.copy(cube.rotation)  //復制

層級

創建組對象

const geometry = new THREE.BoxGeometry( 100, 100, 100 ); 
const material = new THREE.MeshBasicMaterial( {color:0xff000f}); 
const cube1 = new THREE.Mesh( geometry, material ); 
const cube2 = new THREE.Mesh( geometry, material ); 
cube2.translateX(150)

// 創建組對象
const group = new THREE.Group()
group.add(cube1)  //把物體加入組里
group.add(cube2)

group.add(cube1,cube2)  //可以同時添加多個

group.translateX(150)  //可以操作組對象，操作組對象，子對象也會同時操作

scene.add(group) //把組放到場景中

遞歸查找所有的子對象

// 遞歸循環所有模型節點
group3.traverse((obj)=>{
    // 判斷是否是網格模型
    if (obj.type == "Mesh") {
        // 是網格模型則修改顏色
        obj.material.color.set(0xffffff)
    }
    console.log(obj,"obj")
})

 查找指定模型名稱

const obj = group3.getObjectByName("4號樓")
const obj = gltf.scene.getObjectByName("外殼01")

示例

const group = new THREE.Group()
const group2 = new THREE.Group()
const group3 = new THREE.Group()
group.name = '高層'
for (let i = 0; i < 5; i++) {
    const geometry = new THREE.BoxGeometry( 20, 60, 10 ); 
    const material = new THREE.MeshBasicMaterial( {color:0xff000f}); 
    const cube = new THREE.Mesh( geometry, material ); 
    cube.name = (i+1)+"號樓"
    cube.translateX(i*40)
    cube.translateY(70)
    group.add(cube)
}
group2.name = '洋房'
for (let i = 0; i < 5; i++) {
    const geometry = new THREE.BoxGeometry( 20, 30, 10 ); 
    const material = new THREE.MeshBasicMaterial( {color:0xff000f}); 
    const cube = new THREE.Mesh( geometry, material ); 
    cube.name = (i+6)+"號樓"
    cube.translateX(i*40)
    cube.translateZ(40)
    group2.add(cube)
}
group3.name = '小區'
group3.add(group,group2)
  //可以同時添加多個
scene.add(group3) //把組放到場景中
console.log('group', JSON.parse(JSON.stringify(group)))

// 遞歸循環所有模型節點
group3.traverse((obj)=>{
    // 判斷是否是網格模型
    if (obj.type == "Mesh") {
        // 是網格模型則修改顏色
        obj.material.color.set(0xffffff)
    }
    console.log(obj,"obj")
})

// 查找指定模型名稱
const obj = group3.getObjectByName("4號樓")
obj.material.color.set(0xfff00f)

添加局部坐標

const Helper = new THREE.AxesHelper(50);
cube.add(Helper);

改變物體原點

const geometry = new THREE.BoxGeometry( 20, 20, 20 ); 
const material = new THREE.MeshLambertMaterial( {color:0xff000f}); 
const cube = new THREE.Mesh( geometry, material ); 
geometry.translate(20/2,0,0)
// 改變物體原點

刪除子類

const geometry = new THREE.BoxGeometry( 20, 20, 20 ); 
const material = new THREE.MeshLambertMaterial( {color:0xff000f}); 
const cube = new THREE.Mesh( geometry, material ); 
const cube1 = new THREE.Mesh( geometry, material ); 
cube1.position.x = 50
const group = new THREE.Group()
group.add(cube,cube1)

group.remove(cube)
// 刪除

顯示隱藏

cube1.visible = false
// 隱藏，可以隱藏材質

紋理

創建紋理貼圖

const geometry = new THREE.SphereGeometry(50);

// 創建一個紋理加載器
const loadtex = new THREE.TextureLoader()
// 加載圖片
const texture = loadtex.load('/earth.jpg')

const material = new THREE.MeshLambertMaterial({
    // color: 0xff000f,
    // map:texture,//設置材質的顏色貼圖
}); 
material.map = texture; //可以直接訪問材質屬性設置

const cube = new THREE.Mesh(geometry, material);

自定義uv坐標

// 創建一個紋理加載器
const loadtex = new THREE.TextureLoader()
 // 加載圖片
const texture = loadtex.load('/earth.jpg')

// 生成一個緩沖幾何體（可以自定義形狀）
const geometry = new THREE.BufferGeometry()

// 創建類型化數組（三個頂點等于一個坐標）
const vertices = new Float32Array([
    0,0,0,
    160,0,0,
    160,80,0,
    0,80,0,
])
const attribute = new THREE.BufferAttribute(vertices,3)
// 屬性緩沖對象表示
console.log(attribute)

geometry.attributes.position = attribute
// 設置幾何體的頂點位置屬性

// Uint16Array類型數組創建頂點索引數據
const indexes = new Uint16Array([0,1,2,0,2,3])
geometry.index = new THREE.BufferAttribute(indexes,1) 


const material = new THREE.MeshBasicMaterial({
    map:texture,
})
// 創建網格材質
const mesh = new THREE.Mesh(geometry, material);

// 創建uv坐標
const uvs = new Float32Array([
    0,0,
    1,0,
    1,1,
    0,1
])
// 通過幾何體的頂點位置設置uv坐標
geometry.attributes.uv = new THREE.BufferAttribute(uvs,2) 
scene.add(mesh)

頂點UV坐標可以在0~1.0之間任意取值，紋理貼圖左下角對應的UV坐標是(0,0)，右上角對應的坐標(1,1)。

紋理對象陣列（地轉）

const scene = new THREE.Scene();
const gui = new GUI()
const geometry = new THREE.PlaneGeometry(800,800);
// const geometry = new THREE.CircleGeometry( 5, 32 );
// const geometry = new THREE.SphereGeometry(50);

geometry.rotateX(Math.PI/2)

// 創建一個紋理加載器
const loadtex = new THREE.TextureLoader()
// // 加載圖片
const texture = loadtex.load('/瓷磚.jpg')

//陣列
texture.wrapS = THREE.RepeatWrapping    //上下開啟陣列
texture.wrapT = THREE.RepeatWrapping    //左右開啟陣列
texture.repeat.set(30,30)  //上下左右的陣列次數

const material = new THREE.MeshLambertMaterial({
    side:THREE.DoubleSide,
    map:texture,//設置材質的顏色貼圖
}); 
const cube = new THREE.Mesh(geometry, material);

scene.add(cube)

 開啟透明

// 創建一個紋理加載器
const loadtex = new THREE.TextureLoader()
// 加載圖片
const texture = loadtex.load('/轉彎.png')
const material = new THREE.MeshLambertMaterial({
    map:texture,//設置材質的顏色貼圖
    transparent:true, //開啟透明
}); 
const cube = new THREE.Mesh(geometry, material);
scene.add(cube)

uv偏移量

const geometry = new THREE.PlaneGeometry(50,50);
// 創建一個紋理加載器
const loadtex = new THREE.TextureLoader()
// 加載圖片
const texture = loadtex.load('/轉彎.png')
const material = new THREE.MeshLambertMaterial({
    map:texture,//設置材質的顏色貼圖
    transparent:true, //開啟透明
}); 

// uv偏移量
texture.offset.x += 0.5
texture.offset.y += 0.5

texture.wrapS = THREE.RepeatWrapping //被裁掉的自動追加到后面


const cube = new THREE.Mesh(geometry, material);
scene.add(cube)

加載模型

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; //引入GLTF加載器
const scene = new THREE.Scene();
//創建一個GLTF加載器
const loader = new GLTFLoader()
//聲明一個組對象，用來添加加載成功的三維場景
const model = new THREE.Group()

//gltf加載成功后返回一個對象
loader.load('/工廠.gltf',(gltf)=>{
    console.log(gltf,"gltf")

    //三維場景添加到model組對象中
    model.add(gltf.scene)
})
scene.add(model)

// 設置相機控件軌道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 修改相機指向的位置
controls.target.set(-14,-24,10)
controls.update()

 單獨給貼紙

//gltf加載成功后返回一個對象
loader.load('/工廠.gltf',(gltf)=>{
    console.log(gltf.scene,"gltf")
    gltf.scene.traverse((moxin)=>{
        if (moxin.isMesh) {
            if (moxin.material.map) {
                console.log("判斷是否存在貼圖",moxin.material.map.encoding)
            }
        }
    })
    //三維場景添加到model組對象中
    model.add(gltf.scene)
})
scene.add(model)


// // 創建一個紋理加載器
const loadtex = new THREE.TextureLoader()
// // // 加載圖片
const texture = loadtex.load('/瓷磚.jpg')
texture.encoding = THREE.sRGBEncoding

// 反轉貼圖
texture.flipY = false

PBR材質

MeshStandardMaterial 材質

material.metalness = 1     （0-1）     
//金屬度 0表述金屬度低，1表述金屬度高，（值越高越像金屬）

material.roughness = 0.5   （0-1）   
//粗糙度 0表述表面光滑，1表示粗糙 （值越高越粗糙）


// CubeTextureLoader環境貼圖，setPath加載的文件夾，load加載的文件，
// 加載環境貼圖
// 加載周圍環境6個方向貼圖
// 上下左右前后6張貼圖構成一個立方體空間
// 'px.jpg', 'nx.jpg'：x軸正方向、負方向貼圖  p:正positive  n:負negative
// 'py.jpg', 'ny.jpg'：y軸貼圖
// 'pz.jpg', 'nz.jpg'：z軸貼圖
const texturecube = new THREE.CubeTextureLoader().setPath('/環境貼圖/環境貼圖0/')
.load(['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg',])

moxin.material.envMap = texturecube 
//環境貼圖（給某個物體添加環境貼圖）
moxin.material.envMapIntensity =  1  
//環境貼圖的影響程度

 給全部物體添加貼圖

// 環境貼圖紋理對象textureCube作為.environment屬性值,影響所有模型
scene.environment = textureCube;

環境貼圖色彩空間編碼.encoding

//如果renderer.outputEncoding=THREE.sRGBEncoding;環境貼圖需要保持一致
textureCube.encoding = THREE.sRGBEncoding;   

MeshPhysicalMaterial清漆層

const material = new THREE.MeshPhysicalMaterial( {
	clearcoat: 1.0,//物體表面清漆層或者說透明涂層的厚度
	clearcoatRoughness: 0.1,//透明涂層表面的粗糙度
    color: obj.material.color, //默認顏色
    metalness: 0.9,//金屬度
    roughness: 0.5,//粗糙度
    envMap: textureCube, //環境貼圖
    envMapIntensity: 2.5, //環境貼圖對Mesh表面影響程度
} );


//示例
//創建一個GLTF加載器
const loader = new GLTFLoader()
//聲明一個組對象，用來添加加載成功的三維場景
const model = new THREE.Group()
//gltf加載成功后返回一個對象
loader.load('/轎車.glb',(gltf)=>{
    console.log(gltf,"gltf")
    const obj = gltf.scene.getObjectByName("外殼01")
    obj.material = new THREE.MeshPhysicalMaterial({
        color: obj.material.color, //默認顏色
        metalness: 0.9,//車外殼金屬度
        roughness: 0.5,//車外殼粗糙度
        envMap: texturecube, //環境貼圖
        envMapIntensity: 2.5, //環境貼圖對Mesh表面影響程度
        clearcoat:1, //物體表面清漆層或者說透明涂層的厚度
        clearcoatRoughness:0, //透明涂層表面的粗糙度
    })  
    model.add(gltf.scene)
},function ( xhr ) {
    //加載進度
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},)
scene.add(model)

 玻璃

const obj1 = gltf.scene.getObjectByName("玻璃01")
    obj1.material = new THREE.MeshPhysicalMaterial({
        color: obj1.material.color, //默認顏色
        metalness: 0,//車外殼金屬度
        roughness: 0,//車外殼粗糙度
        envMapIntensity: 0, //環境貼圖對Mesh表面影響程度
        
        transmission: 1.0, //玻璃材質透光率
        ior:1.5, ////折射率  非金屬材料的折射率從1.0到2.333。默認值為1.5。
    })

相機

正投影相機

let Width = window.innerWidth 
    let Height = window.innerHeight
    const k = Width/Height
    const s = 500
    const camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,8000)
    camera.position.set(0, 2000, 0);
    camera.lookAt(2000, 100, 2000); //相機觀察目標指向Three.js坐標系原點

 // 設置相機控件軌道控制器OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);
    // 修改相機指向的位置
    controls.target.set(200, 0, 200)
    controls.update()

相機屬性

  // //相機
    const camera = new THREE.PerspectiveCamera(30, Width / Height, 0.1, 3000);
    camera.position.set(800, 800, 800); //相機的位置
    camera.lookAt(0, 0, 0); //相機看的方向

// 設置相機控件軌道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0) //這里要和 camera.lookAt(0, 0, 0)保持同步
controls.update()

包圍盒 

 const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    // 包圍盒
    const box3 = new THREE.Box3()
    box3.expandByObject(mesh)  //計算的模型
    const size = new THREE.Vector3()
    box3.getSize(size)  //獲取模型計算的尺寸
    console.log(size,"size")

    const center = new THREE.Vector3()
    box3.getCenter(center) //獲取模型計算的位置
    console.log(center,"center")

后期處理

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";  //效果合成器
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";   //引入渲染通道

const composer = new EffectComposer(renderer) 
//創建效果合成器，renderer渲染器作為參數

const renderpass =new RenderPass(scene,camera)  
//創建渲染通道，參數為 scene場景 camera相機

composer.addPass(renderpass)
//效果合成器添加渲染通道

  // 渲染循環
    function animate() {
        renderer.render(scene, camera);
        composer.render();
        requestAnimationFrame(animate);
    }

描邊效果

import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass"; //引入描邊效果

   // OutlinePass 創建描邊效果 參數一：2維向量 就是畫布的尺寸， scene場景 camera相機
    const v2 = new THREE.Vector2(Width,Height)
    const outlinePass = new OutlinePass(v2,scene,camera)

    // 那個模型需要需要描邊，可以有多個
    outlinePass.selectedObjects = [mesh1]

    outlinePass.visibleEdgeColor.set(0xffff00)
    // 設置描邊的顏色
    
    outlinePass.edgeThickness = 5
    // 設置描邊的厚度

    outlinePass.edgeStrength = 6
    // 設置描邊的亮度

    outlinePass.pulsePeriod = 2
    // 設置描邊閃爍，0就是不閃爍

    // 把描邊添加到效果合成器里
    composer.addPass(outlinePass)

發光效果

import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
// unrealBloomPass 創建發光效果
    const v2 = new THREE.Vector2(Width,Height)
    const unrealBloomPass = new UnrealBloomPass(v2)

    unrealBloomPass.strength = 1
    composer.addPass(unrealBloomPass)

解決顏色偏差

import { GammaCorrectionShader } from "three/examples/jsm/shaders/GammaCorrectionShader.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";

const gammaPass = new ShaderPass(GammaCorrectionShader)
composer.addPass(gammaPass)

選擇模型

選擇單個模型

renderer.domElement.addEventListener('click', function (event) {
        // .offsetY、.offsetX以canvas畫布左上角為坐標原點,單位px
        const px = event.offsetX;
        const py = event.offsetY;
        //屏幕坐標px、py轉WebGL標準設備坐標x、y
        //width、height表示canvas畫布寬高度
        const x = (px / window.innerWidth) * 2 - 1;
        const y = -(py / window.innerHeight) * 2 + 1;
        //創建一個射線投射器`Raycaster`
        const raycaster = new THREE.Raycaster();
        //.setFromCamera()計算射線投射器`Raycaster`的射線屬性.ray
        // 形象點說就是在點擊位置創建一條射線，射線穿過的模型代表選中
        raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
        //.intersectObjects([mesh1, mesh2, mesh3])對參數中的網格模型對象進行射線交叉計算
        // 未選中對象返回空數組[],選中一個對象，數組1個元素，選中兩個對象，數組兩個元素
        const intersects = raycaster.intersectObjects([mesh1, mesh2, mesh]);
        console.log("射線器返回的對象", intersects);
        // intersects.length大于0說明，說明選中了模型
        if (intersects.length > 0) {
            // 選中模型的第一個模型，設置為紅色
            intersects[0].object.material.color.set(0xff0000);
        }
    })

選擇組模型

const model = new THREE.Group()
    const loader = new GLTFLoader()
    loader.load('/工廠.gltf', (gltf) => {
        console.log(gltf, "gltf")

        //三維場景添加到model組對象中
        model.add(gltf.scene)
    })
    scene.add(model)


renderer.domElement.addEventListener('click', function (event) {
        const px = event.offsetX;
        const py = event.offsetY;
        const x = (px / window.innerWidth) * 2 - 1;
        const y = -(py / window.innerHeight) * 2 + 1;
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
        // 固定設置


        //首先找到要設置的組模型
        const cunshu = model.getObjectByName("存儲罐")

        // 循環設置自定屬性，全部指向父類
        for (let i = 0; i < cunshu.children.length; i++) {
            const element = cunshu.children[i];
            element.traverse(function(obj){
                if (obj.isMesh) {
                    obj.ancestors = element
                }
            })
        }

        const intersects = raycaster.intersectObjects(cunshu.children);
        composer.addPass(outlinePass)
        if (intersects.length > 0) {
            //設置發光效果
            outlinePass.selectedObjects = [intersects[0].object.aaaaa]
        }
    })

頁面物體標注html內容

添加基礎標簽

const group = new THREE.Group()
    // 創建一個組
    let div = document.getElementById('label')
    // 選擇在頁面中創建的div
    let label = new CSS2DObject(div)
    // 創建css，導入標簽
    label.position.set(200,200,200)
    // 設置標簽的位置
    group.add(label)
    // 添加到組中
    scene.add(group); 
    // 將組添加到場景中

    const css2Renderer = new CSS2DRenderer()
    // 標簽渲染
    css2Renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("sanwei").appendChild(css2Renderer.domElement);
    css2Renderer.domElement.style.position = 'absolute';
    css2Renderer.domElement.style.top = '0px';
css2Renderer.domElement.style.pointerEvents = 'none'; 
    // 添加穿透

    // 渲染循環
    function animate() {
        css2Renderer.render(scene, camera);
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

 可以直接標注到模型

  let div = document.getElementById('label')
    // 選擇在頁面中創建的div
    let label = new CSS2DObject(div)
    // 設置標簽的位置
    mesh.add(label)
    // 可以直接標注到某個模型下

標注到模型的某個點上

let div = document.getElementById('label')
    // 選擇在頁面中創建的div
    let label = new CSS2DObject(div)
    // 設置標簽的位置
    mesh.add(label)
    // 可以直接標注到某個模型下

    const pos = mesh.geometry.attributes.position;
    // 獲取幾何體頂點1的xyz坐標，設置標簽局部坐標.position屬性
    label.position.set(pos.getX(0),pos.getY(0),pos.getZ(0));

模型動畫

基礎動畫

import * as THREE from 'three';


const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshLambertMaterial({ color: 0x00ffff });
const model = new THREE.Mesh(geometry, material);

model.name = 'box'
// 定義模型名字

const times = [0,3,6]  //定義時間線0秒，3秒，5秒
const values = [0,0,0 ,100,0,0 ,0,0,100] //定義每秒的位置

// 設置關鍵幀數據THREE.KeyframeTrack(參數一：要加入的關鍵幀，參數二：定義的時間線，參數三：定義的參數位置或改變的狀態)
const posKF = new THREE.KeyframeTrack('box.position',times,values)
const colorKF = new THREE.KeyframeTrack('box.material.color',[2, 5],[1, 0, 0, 0, 0, 1])

// 1.3 AnimationClip表示一個關鍵幀動畫，可以基于關鍵幀數據產生動畫效果
// 創建一個clip關鍵幀動畫對象，命名"test"，動畫持續時間6s
// AnimationClip包含的所有關鍵幀數據都放到參數3數組中即可
const clip = new THREE.AnimationClip("test",6,[posKF,colorKF ]);

// 包含關鍵的模型
const mixer = new THREE.AnimationMixer(model)
const clipAction = mixer.clipAction(clip); 

clipAction.play()


// 通過Clock對象輔助獲取每次loop()執行的時間間隔。
const clock = new THREE.Clock();

// 執行mixer.update()更新播放器AnimationMixer時間數據
function loop() {
    requestAnimationFrame(loop);
    const frameT = clock.getDelta();
    // 更新播放器相關的時間
    mixer.update(frameT);
}
loop();



export default model;

clipAction.loop = THREE.LoopOnce //只執行一次
clipAction.loop = THREE.LoopRepeat  //重復次數為repetitions的值, 且每次循環結束時候將回到起始動作開始下一次循環。
clipAction.loop = THREE.LoopPingPong  //重復次數為repetitions的值, 且像乒乓球一樣在起始點與結束點之間來回循環。

clipAction.clampWhenFinished = true;
 // 物體狀態停留在動畫結束的時候

clipAction.play();
//播放動畫

clipAction.stop();
//動畫停止結束，回到開始狀態

clipAction.paused = false  //播放
clipAction.paused = true  //暫停
//暫停狀態

clipAction.timeScale = 1;//默認
clipAction.timeScale = 2;//2倍速

播放模型動畫

 const loader = new GLTFLoader()
    //聲明一個組對象，用來添加加載成功的三維場景
    const model = new THREE.Group()
    //gltf加載成功后返回一個對象
    loader.load('/工廠1.glb', (gltf) => {
        console.log(gltf, "gltf")
        const clock = new THREE.Clock();
        // // 包含關鍵的模型
        const mixer = new THREE.AnimationMixer(gltf.scene)
        const clipAction = mixer.clipAction(gltf.animations[0]);
        clipAction.loop = THREE.LoopOnce //只執行一次
        clipAction.play()

        // 監聽動畫是否播放完成
        mixer.addEventListener('finished',function(){
            clipAction.reset() //重制播放
        })

        function loop() {
            requestAnimationFrame(loop);
            const frameT = clock.getDelta();
            // 更新播放器相關的時間
            mixer.update(frameT);
        }
        loop();
        //三維場景添加到model組對象中
        model.add(gltf.scene)
    })
    scene.add(model)

動畫庫tween.js

npm安裝

npm i @tweenjs/tween.js@^18

import TWEEN from '@tweenjs/tween.js';

tweenjs基本語法

let pos = { x: 10, z: 10, y: 10 }  //基礎信息
    const tween = new TWEEN.Tween(pos)  //創建動畫
    tween.to({ x: 100, z: 100, y: 100 },2000) // 參數一：{這里面是要改變后的值}，參數二：執行的時間
    tween.start(); //開始執行

   
    function loop() {
        TWEEN.update();//tween更新
        requestAnimationFrame(loop);
    }
    loop();

    //第二種寫法
    const tween = new TWEEN.Tween(pos).to({ x: 100, z: 100, y: 100 },2000).start(); 

 tweenjs改變threejs模型對象位置

//創建一段mesh平移的動畫
const tween = new TWEEN.Tween(mesh.position);
//經過2000毫秒，pos對象的x和y屬性分別從零變化為100、50
tween.to({x: 100,y: 50}, 2000);
//緩動方式
tween.easing(TWEEN.Easing.Sinusoidal.InOut) 
//tween動畫開始執行
tween.start();

//tween動畫停止
tween.stop()

//tween動畫暫停
tween.pause()

//tween動畫繼續執行
tween.pause()

const tween = new TWEEN.Tween(mesh.position).to({x: 100,y: 50}, 2000).start();

const tween = new TWEEN.Tween(mesh.position)
.to({x: 100,y: 50}, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut) 
.start();

const tween = new TWEEN.Tween(pos).to({x: 0}, 4000)
// 開始執行：動畫片段tween開始執行的時候觸發onStart
.onStart(function(obj){
	...
})

            const theEntire = scene.getObjectByName("區域")
            let enlarModel = graychoose(event, theEntire.children, camera, '-檔案柜')
            console.log(enlarModel, "enlarModel")
            console.log(JSON.stringify(enlarModel), "enlarModel")

            const options = {
                trs: false,
                onlyVisible: true,
                binary: true,
                maxTextureSize: 4096
            };
            var gltfExporter = new GLTFExporter();
            gltfExporter.parse(
                enlarModel,
                function (result) {
                    if (result instanceof ArrayBuffer) {
                        saveArrayBuffer(result, 'scene.glb');
                    } else {
                        const output = JSON.stringify(result, null, 2);
                        console.log(output);
                        saveString(output, 'scene.gltf');
                    }
                },
                function (error) {
                    console.log('An error happened during parsing', error);
                },
                options
            );

            const link = document.createElement('a');
            link.style.display = 'none';
            document.body.appendChild(link); // Firefox workaround, see #6594
            function save(blob, filename) {
                link.href = URL.createObjectURL(blob);
                link.download = filename;
                link.click();
            }
            function saveArrayBuffer(buffer, filename) {
                save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
            }
            function saveString(text, filename) {
                save(new Blob([text], { type: 'text/plain' }), filename);
            }