? ? ? ? 今天使用3DMax建模軟件進行3D模型的制作，并且加入動畫，通過threejs將模型及其動畫部署在VUE框架上。

一、環(huán)境及其開發(fā)包版本

? ? ? ? 1. VUE：3.3.4

? ? ? ? 2. threejs：0.158.0

? ? ? ? 3. vite：4.4.11

? ? ? ? 4. 3DMax2021

? ? ? ? 5. pycharm2021專業(yè)版

二、3DMax模型制作

? ? ? ? 簡單制作一個小植物和一個水壺，實現(xiàn)澆水后植物長大的動畫。

? ? ? ?UV展開，加個材質(zhì)，上個顏色。

三、項目搭建

? ? ? ? 項目使用VUE框架。使用命令“npm init vue@latest”創(chuàng)建一個vue項目，并使用命令“npm i three”安裝threejs。

? ? ? ? 在vue文件中引入JavaScript文件。

? ? ? ? ttt.js文件代碼如下：

import * as THREE from "three"
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";

let width = window.innerWidth
let height = window.innerHeight

const scene = new THREE.Scene()
scene.background = new THREE.Color(0x7F7F61)

const camera = new THREE.PerspectiveCamera(60, width / height)
camera.position.set(-3, 10, 10)
camera.lookAt(0, 0, 0)
scene.add(camera)

const aLignt = new THREE.AmbientLight(new THREE.Color(0xffffff), 2)
scene.add(aLignt)

const pointLight = new THREE.PointLight(new THREE.Color(0xffffff), 2, 0, 0)
pointLight.position.set(15, 15, 15)
scene.add(pointLight)

const axes = new THREE.AxesHelper(50)
// scene.add(axes)

const spriteMaterial = new THREE.SpriteMaterial({
    map: new THREE.TextureLoader().load('./src/assets/水滴.png'),
    transparent: true,
    opacity: 0.3
})
const groups = new THREE.Group()
let spritey = 2.91
let spriteflag = false
for (let i = 0; i < 200; i++) {
    const sprite = new THREE.Sprite(spriteMaterial)
    sprite.scale.set(0.1, 0.2, 0.1)
    const x = Math.random() - Math.random()
    const y = Math.random() * spritey
    // const y = spritey
    const z = Math.random() - Math.random()
    sprite.position.set(x, y, z)
    groups.add(sprite)
}
let ganzi, yezi1, yezi2, yezi3, yezi4, huapen
const group = new THREE.Group()
group.name = 'group'
let geometry, mesh
let track1, track2, track3, track4, track5
let clip, mixer, actionAnimation, clock
const loader = new GLTFLoader();
loader.load('./src/assets/1111.glb', gltf => {
    console.log(gltf)
    // gltf.scene.scale.set(5,5,5)
    group.add(gltf.scene)
    scene.add(group)
    huapen = group.getObjectByName('花盆')
    yezi1 = group.getObjectByName('葉子1')
    yezi2 = group.getObjectByName('葉子2')
    yezi3 = group.getObjectByName('葉子3')
    yezi4 = group.getObjectByName('葉子4')
    ganzi = group.getObjectByName('桿子')


    mixer = new THREE.AnimationMixer(group)
    actionAnimation = mixer.clipAction(gltf.animations[0])
    actionAnimation.timeScale = 0
    actionAnimation.clampWhenFinished = true
    actionAnimation.loop = THREE.LoopOnce
    actionAnimation.play()
    clock = new THREE.Clock()
})
let mixershuihu, actionanimationshuihu, c1
loader.load('./src/assets/11111.glb', gltf => {
    console.log(gltf)
    group.add(gltf.scene.getObjectByName('水壺'))
    group.getObjectByName('水壺').visible = false
    mixershuihu = new THREE.AnimationMixer(group.getObjectByName('水壺'))
    actionanimationshuihu = mixershuihu.clipAction(gltf.animations[0])
    actionanimationshuihu.timeScale = 4
    actionanimationshuihu.clampWhenFinished = false
    actionanimationshuihu.loop = THREE.LoopOnce
    c1 = new THREE.Clock()

    mixershuihu.addEventListener('finished', e => {
        group.getObjectByName('水壺').visible = false
        actionanimationshuihu.stop()
        scene.remove(groups)
        spriteflag = false
    })

})
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(width, height)

renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0'
renderer.domElement.style.left = '0'
renderer.domElement.style.bottom = '0'
renderer.domElement.style.right = '0'
renderer.domElement.style.zIndex = '-1'

let select = 0
const btn = document.getElementById('add')
btn.addEventListener('click', function () {
    if (select !== 2) {
        select++
    } else {
        select = 0
    }
    group.getObjectByName('水壺').visible = true
    actionanimationshuihu.play()
    groups.traverse(m => {
        m.position.y = Math.random() * spritey
    })
    scene.add(groups)
    spriteflag = true
})

const control = new OrbitControls(camera, renderer.domElement);

(function animation() {
    if (mixer && clock) {
        mixer.update(clock.getDelta())
        if (select === 1) {
            actionAnimation.timeScale = 1
            if (clock.getElapsedTime() >= 5) {
                actionAnimation.timeScale = 0
            }
        } else if (select === 2) {
            actionAnimation.timeScale = 1
            if (clock.getElapsedTime() >= 22) {
                actionAnimation.timeScale = 0
            }
        }
    }
    if (mixershuihu && c1) {
        mixershuihu.update(c1.getDelta())
    }

    if (spriteflag) {
        groups.traverse(m => {
            if (m.position.y >= 0.2) {
                m.position.y -= 0.02
            }
        })
    }


    renderer.render(scene, camera)
    requestAnimationFrame(animation)
})();

window.onresize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}

document.getElementById('data-three-js').appendChild(renderer.domElement)

四、效果圖

? ? ? ? 項目搭建完畢，使用命令“npm run dev”運行。

? ? ? ? 點擊澆水按鈕，實現(xiàn)澆水后植物長大效果，效果圖如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-777956.html

? ? ? ? ?

到了這里，關(guān)于ThreeJS-VUE-3DMax 實現(xiàn)Web3D（簡單測試）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！