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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vue中activated的用法
Jan 03 Vue.js
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
很可爱的输入框
2008/08/03 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python+django实现文件上传
2016/01/17 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python查看模块安装位置的方法
2018/10/16 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python如何停止递归
2020/09/09 Python
怎样从/向数据文件读/写结构
2014/11/23 面试题
linux面试题参考答案(1)
2016/01/22 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
初中团支书竞选稿
2015/11/21 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
小学英语课教学反思
2016/02/15 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS