介紹

Three.js 是一個 3D JavaScript 庫，我們經常使用它加載各種不同格式的模型。示例中的直升機模型出處飛機航空器模型-3D模型庫-CG模型網-第1頁

免費3d模型下載的網站

免費 3D 模型	https://ch.3dexport.com/free-3d-models?page=7
飛機glb gltf模型網	https://glbxz.com/plus/list.php?tid=69&myorder=needmoney_low
免費 3D 模型	https://ch.3dexport.com/free-3dmodel-chica-389051.htm
3d、動畫模型	3d模型 游戲3d模型|動畫模型|3dMax|Maya 免費下載 - 愛給網

demo演示

源碼?

<template><div style="position: relative"><div style="position:absolute;left:0;top:0;opacity:0.5;height: 35px;width: 100%;z-index: 9999;display: flex;justify-content: flex-start;align-items: center;padding: 0 20px"><el-button size="mini" @click="play">啟動動畫</el-button><el-button size="mini" @click="stop">關閉動畫</el-button></div><div ref="aircraft"></div></div> </template><script lang="ts"> import {defineComponent, ref, onMounted, reactive, toRefs} from 'vue' import {Scene,PerspectiveCamera,WebGL1Renderer,AmbientLight,MeshBasicMaterial,PlaneBufferGeometry,Mesh,GridHelper,DoubleSide,AnimationMixer,Clock,DirectionalLight,AxesHelper, AnimationClip } from 'three' import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader' import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import {AnimationAction} from "three/src/animation/AnimationAction";export default defineComponent({components:{},setup() {const loading = ref(true)const aircraft = ref<HTMLDivElement>()const action = ref<AnimationAction>();let state = reactive({play: function () {action.value && action.value.play()},stop: function () {action.value && action.value.stop()}})const init = () => {const scene = new Scene()/*** 相機 PerspectiveCamera(視野大小, 視圖的長寬比, 近景， 遠景)*/const camera = new PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000)camera.position.set(0, 30, 30)camera.lookAt(scene.position)/*** antialias消除鋸齒*/const renderer = new WebGL1Renderer({antialias: true})// 背景顏色renderer.setClearColor(0xffffff)// 設置設備像素比renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)// 設置窗口的大小 適合在一些小地方顯示// renderer.setViewport(0, 0, 200, 200)const animationMixer = new AnimationMixer(scene)const clock = new Clock()// 添加平面const planeBufferGeometry = new PlaneBufferGeometry(100, 100)const plane = new Mesh(planeBufferGeometry, new MeshBasicMaterial({color: 0xFFFFFF, side: DoubleSide}))plane.rotation.x = Math.PI / 2scene.add(plane)// 添加一個網格scene.add(new GridHelper(100, 100))let fbxLoader = new FBXLoader()fbxLoader.load('/model/FBX/AS365/AS365.FBX', function (fbx) {fbx.scale.set(0.05, 0.05, 0.05)fbx.position.set(1, 9, 1)scene.add(fbx);loading.value = falseconst animations: AnimationClip = fbx.animations.find(animationsClip => animationsClip.name === 'Take 001')!action.value = animationMixer.clipAction(animations)})// 添加環境燈光scene.add(new AmbientLight(0xFFFFFF, 1))const axesHelper = new AxesHelper( 5 );scene.add( axesHelper );// 平行光const directionalLight = new DirectionalLight(0xffffff);directionalLight.position.set(-100, 100, 30);directionalLight.castShadow = true;scene.add(directionalLight);const directionalLight3 = new DirectionalLight(0xffffff);directionalLight3.position.set(100, -100, -10);directionalLight3.castShadow = true;scene.add(directionalLight3);aircraft.value?.appendChild(renderer.domElement)window.addEventListener('resize', () => onWindowResize())/*** 軌道控制器 也就是鼠標轉動等操作*/let orbitControls = new OrbitControls(camera, renderer.domElement)// 放大縮小// orbitControls.enableZoom = falseorbitControls.autoRotateSpeed = 1renderScene()function renderScene(){requestAnimationFrame(renderScene)animationMixer.update(clock.getDelta())// const boxs = scene.getObjectByName('box') // 上面如果設置了name 就可以這樣子取renderer.render(scene, camera)}const onWindowResize = () => {renderer.setSize(window.innerWidth, window.innerHeight)camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()}}onMounted(() => {init()})return {...toRefs(state),aircraft,loading}}, }) </script>

安裝好依賴，復制源碼，下載好相對應的模型就能使用。這里只是一個簡單的demo。純屬學習記錄。我是Etc.End，如果文章對你有幫助，記得幫我點個贊😄 😆 😊 😃 😏?

總結

以上是生活随笔為你收集整理的VUE3+ThreeJs加载飞机模型且播放模型动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。