ThreeJS-VUE-3DMax 实现Web3D(简单测试)

这篇具有很好参考价值的文章主要介绍了ThreeJS-VUE-3DMax 实现Web3D(简单测试)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        今天使用3DMax建模软件进行3D模型的制作,并且加入动画,通过threejs将模型及其动画部署在VUE框架上。

一、环境及其开发包版本

        1. VUE:3.3.4

        2. threejs:0.158.0

        3. vite:4.4.11

        4. 3DMax2021

        5. pycharm2021专业版

二、3DMax模型制作

        简单制作一个小植物和一个水壶,实现浇水后植物长大的动画。

如何将3dmax结合前端,vue.js,前端,javascript,前端框架,npm,html

       UV展开,加个材质,上个颜色。

如何将3dmax结合前端,vue.js,前端,javascript,前端框架,npm,html

如何将3dmax结合前端,vue.js,前端,javascript,前端框架,npm,html

三、项目搭建

        项目使用VUE框架。使用命令“npm init vue@latest”创建一个vue项目,并使用命令“npm i three”安装threejs。

        在vue文件中引入JavaScript文件。如何将3dmax结合前端,vue.js,前端,javascript,前端框架,npm,html

        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”运行。

        点击浇水按钮,实现浇水后植物长大效果,效果图如下:

如何将3dmax结合前端,vue.js,前端,javascript,前端框架,npm,html文章来源地址https://www.toymoban.com/news/detail-777956.html

         

到了这里,关于ThreeJS-VUE-3DMax 实现Web3D(简单测试)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是Web3D?Web3D技术发展历程以及Web3D应用场景

    当今的互联网已经迈入了第三代,这被称为Web3.0,而Web3D正是Web3.0的其中一个技术分支。Web3D是指将三维图形技术应用于Web上的技术,它是将3D图形和Web技术结合起来的一个分支,可以使用户在Web上以更真实、更直观的方式浏览和操作虚拟场景。本文将介绍什么是Web3D、Web3D技术

    2024年02月15日
    浏览(45)
  • Web3D开发经验分享:基于Three.js的Web3D建模案例

    个人主页: 左本Web3D,更多案例预览请点击==》 在线案例 个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例 💕 💕积跬步以至千里,致敬每个爱学习的你。喜欢的话请三连,有问题请私信或者加微信         随着互联网的快速发展,Web3D技术也越来越成熟,越来越

    2024年02月13日
    浏览(49)
  • 初识web3D--webGL/webGPU

    当今互联网时代,我们已经逐渐习惯了浏览和享受丰富多样的网络内容。从文字、图片到视频,我们可以在Web上畅游于各种信息和娱乐资源之间。然而,随着科技的不断进步,一个全新而令人兴奋的概念正在崭露头角——Web3D。 Web3D是一种革命性的技术,它将三维图形、虚拟

    2024年02月04日
    浏览(51)
  • 17个WebGL框架及Web3D图形库

    WebGL是基于OpenGL的JavaScript API库,允许Web浏览器在浏览器中渲染3D / 2D图形,而无需安装额外的插件、桌面应用程序。WebGL允许通过浏览器使用机器GPU将3D图形渲染成HTML页面。WebGL目前在大多数浏览器(如Google Chrome,Mozilla Firefox和Safari)中都受支持。WebGL可以通过浏览器设置或使用

    2024年02月06日
    浏览(61)
  • 纯干货!最全WebGL框架及Web3D图形库

    WebGL 是一个 JavaScript API,用于在 Web 浏览器中呈现交互式 2D 和 3D 图形。它基于 OpenGL ES,这是一种广泛使用的嵌入式系统图形渲染标准。 WebGL 通常用于各种应用程序,包括: 3D 图形: WebGL 允许开发人员在 Web 浏览器中创建和显示 3D 图形,从而实现沉浸式体验、游戏、模拟和

    2024年02月21日
    浏览(54)
  • 智慧大棚Web3D可视化系统 构建高效农业场景

    农业的发展离不开农作物的生长,而农作物的生长会受到多方面的限制,主要是外界因素,因此,智慧农业便将传统农业与科技结合起来,衍生出智慧大棚,从而让农业得以快速发展。 我国农业的基本现状是“大国小农”,农业产业发展仍然受限于农业从业人员匮乏、年龄老

    2023年04月19日
    浏览(82)
  • 智慧垃圾焚烧发电厂Web3D可视化管理系统

    随着我国生产力的飞速发展和经济的迅速崛起,城市生活垃圾作为一种生物质能,将其燃烧用于发电,可以有效节约化石能源。 随着城镇化进程加速、人民生活水平持续提升,城市生活垃圾产生量也在逐年增长。生活垃圾是“放错地方的资源”,能否处理好这些“放错地方的资

    2024年02月08日
    浏览(53)
  • 3dmax快捷键

    3dmax快捷键 2017.9.27 W(移动)/T(顶视图)/P(透视图)/F(前视图)/B(底视图)/ALT+Q(单独显示选中特体)/ALT+W(视图最大化)/ALT+X(全屏显示)/SHIFT+L(隐藏/显示灯光)/SHIFT+C(隐藏/显示相机)/E(旋转)/Q(选择)/S(捕捉的打开/关闭)/F5(锁定X轴)/F6(锁定Y轴)/F3(显

    2024年02月04日
    浏览(55)
  • 3dmax 打开查看模型

    下载一个3dmax模型如下图;包含一个.max文件,一个文件夹; 从File菜单打开该模型;打开对话框右侧会显示模型的一个缩略图; 有任何情况均忽略,直接打开,出现一个Scene Converter对话框,关闭此对话框;  打开后如下;左侧面板显示模型的组成,对象树;左侧面板顶部有

    2024年02月04日
    浏览(57)
  • 3dmax轴约束操作

    轴约束是一种辅助操作,是为了更准确精确的移动物体; 当新建一个茶壶时,使用移动工具,可以任意移动茶壶;      有时候需要使物体准确处于另一个物体上方或某侧,之类的操作;这可以使用轴约束; 按下快捷键F5 F6 F7;X、Y、Z轴分别会高亮,       当某个坐标轴高

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包