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


Posted in Javascript onAugust 10, 2020

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动画场景操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hasFocus使用实例
Jun 29 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
vue写一个组件
Apr 09 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
React实现阿里云OSS上传文件的示例
Aug 10 #Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 #Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php批量删除操作代码分享
2017/02/26 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JavaScript中的排序算法代码
2011/02/22 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
js验证上传图片的方法
2015/05/12 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python之wxPython应用实例
2014/09/28 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
个人简历中自我评价
2014/02/11 职场文书
六年级学生评语
2014/04/22 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
教师读书活动心得体会
2016/01/14 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android