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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 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 年月日的三级联动实例代码
2017/05/24 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python列表的切片实例讲解
2019/08/20 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
Python: glob匹配文件的操作
2020/12/11 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
nohup的用法
2012/11/26 面试题
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
户外活动总结
2015/02/04 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
springboot读取nacos配置文件
2022/05/20 Java/Android
Python测试框架pytest高阶用法全面详解
2022/06/01 Python