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 相关文章推荐
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
Java无向树分析 实现最小高度树
Apr 09 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
模仿OSO的论坛(四)
2006/10/09 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
详解 vue.js用法和特性
2017/10/15 Javascript
vuex的简单使用教程
2018/02/02 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python OS模块实例详解
2019/04/15 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python numpy 反转 reverse示例
2019/12/04 Python
学习Python需要哪些工具
2020/09/04 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
迟到早退检讨书
2014/02/10 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
竞聘书模板
2014/03/31 职场文书
借款担保书范文
2014/05/13 职场文书
财产分割协议书范本
2014/11/03 职场文书
监考失职检讨书
2015/01/26 职场文书
小英雄雨来观后感
2015/06/09 职场文书