欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue页面引入three.js实现3d动画场景操作

程序员文章站 2022-07-08 09:21:01
vue中安装three.js近来无聊顺便研究一些关于3d图形化库。three.js是javascript编写的webgl第三方库。three.js 是一款运行在浏览器中的 3d 引擎,你可以用它通过控...

vue中安装three.js

近来无聊顺便研究一些关于3d图形化库。three.js是javascript编写的webgl第三方库。three.js 是一款运行在浏览器中的 3d 引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3d动画场景。

我们开始引入three.js相关插件。

1、首先利用淘宝镜像,操作命令为:

cnpm install three

2.接下来利用npm安装轨道控件插件:

关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300g前端,java,微信小程序,python等资源,让我们一起学前端。

npm install three-orbit-controls

3.接下来安装加载.obj和.mtl文件的插件:

npm i --save three-obj-mtl-loader

4.安装渲染器插件:

npm i --save three-css2drender

5、安装好以后,在页面中引入three.js并使用,在所调用页面引入的代码为:

import * as three from ‘three'

主要插件都已经安装完成了,接下来可以实现一个demo,测试three.js是否引入成功。页面测试代码如下:

<template>
 <div>
 <div id="container"></div>
 </div>
</template>

<script>
 import * as three from 'three'

 export default {
 name: 'threetest',
 data () {
  return {
  camera: null,
  scene: null,
  renderer: null,
  mesh: null
  }
 },
 methods: {
  init: function () {
  let container = document.getelementbyid('container')
  this.camera = new three.perspectivecamera(70, container.clientwidth / container.clientheight, 0.01, 10)
  this.camera.position.z = 0.6
  this.scene = new three.scene()
  let geometry = new three.boxgeometry(0.2, 0.2, 0.2)
  let material = new three.meshnormalmaterial()
  this.mesh = new three.mesh(geometry, material)
  this.scene.add(this.mesh)

  this.renderer = new three.webglrenderer({antialias: true})
  this.renderer.setsize(container.clientwidth, container.clientheight)
  container.appendchild(this.renderer.domelement)
  },
  animate: function () {
  requestanimationframe(this.animate)
  this.mesh.rotation.x += 0.01
  this.mesh.rotation.y += 0.02
  this.renderer.render(this.scene, this.camera)
  }
 },
 mounted () {
  this.init()
  this.animate()
 }
 }
</script>
<style scoped>
 #container {
 height: 400px;
 }
</style>

注意相关变量的定义容器大小的定义,接下来可以运行当前vue项目,并在浏览器中查看当前效果:

vue页面引入three.js实现3d动画场景操作

出来的效果是一个旋转的正方形,这就表明当前项目已经成功引入three.js并可以运行,剩下的就可以创建场景,打造酷炫的3d效果。

补充知识:vue中three及其依赖引入和使用

官方文档和例子[https://threejs.org/docs/index.html#manual/zh/introduction/creating-a-scene]

引入

单页面应用

<script src="../lib/three.js"></script> //es5,相关依赖相同

模块化应用

npm 安装

npm install three --save

我自己的是适用于require

const three=require('three') //或者

import * as three from 'three'

官方依赖

各种控制器,加载器,渲染相关先将文件放入相关文件夹都可以通过这种方法引入。也可以使用npm安装,但在依赖多的情况下没必要安装。使用时同官方

import {css2dobject,css2drenderer} from '../utils/three/css2drenderer.js';

== 需要注意应该先在该文件引入var three = require(‘three'); 因为文件中有对three的使用==

vue页面引入three.js实现3d动画场景操作

或者是

//官方依赖文档jsm/controls/dragcontrols.js
//引入需要的依赖
import {
 eventdispatcher,
 matrix4,
 plane,
 raycaster,
 vector2,
 vector3
} from "@/build/three.module.js";

....

//最后一步始终是暴露出去
export { dragcontrols };

相关插件

同样通过npm install xxx安装后,如精灵字体的three-spritetext,可以实现粗线条的three.meshline,以及常用的dat.gui插件

import spritetext from 'three-spritetext';
var meshline = require('three.meshline'); //包含了meshline,meshlinematerial
//或者
var {meshline,meshlinematerial} = require('three.meshline');

其外性能检测插件stats,不能通过npm 安装,可以先下载stats.min.js。

使用:

1、修改为stats.js

2、该文件最后有一句"object" === typeof module && (module.exports = stats);将其注释

3、最后加上export default stats

4、import stats from ‘…/utils/three/stats.js';

经常与stats一起使用的dat需要先通过npm安装再使用

1、npm install dat.gui

2、var dat = require(“dat.gui”);

以上这篇vue页面引入three.js实现3d动画场景操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。