介紹

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

免費(fèi)3d模型下載的網(wǎng)站

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

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">啟動(dòng)動(dòng)畫</el-button><el-button size="mini" @click="stop">關(guān)閉動(dòng)畫</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()/*** 相機(jī) PerspectiveCamera(視野大小, 視圖的長(zhǎng)寬比, 近景， 遠(yuǎn)景)*/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)// 設(shè)置設(shè)備像素比renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)// 設(shè)置窗口的大小 適合在一些小地方顯示// 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)// 添加一個(gè)網(wǎng)格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)})// 添加環(huán)境燈光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())/*** 軌道控制器 也就是鼠標(biāo)轉(zhuǎn)動(dòng)等操作*/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') // 上面如果設(shè)置了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>

安裝好依賴，復(fù)制源碼，下載好相對(duì)應(yīng)的模型就能使用。這里只是一個(gè)簡(jiǎn)單的demo。純屬學(xué)習(xí)記錄。我是Etc.End，如果文章對(duì)你有幫助，記得幫我點(diǎn)個(gè)贊😄 😆 😊 😃 😏?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。