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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
JS自定义滚动条效果
Mar 13 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Django实现分页显示效果
2019/10/31 Python
python实现加密的方式总结
2020/01/19 Python
Pandas之缺失数据的实现
2021/01/06 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
小学语文课后反思精选
2014/04/25 职场文书
公司授权委托书样本
2014/09/15 职场文书
高中校园广播稿
2014/10/21 职场文书
学校计划生育责任书
2015/05/09 职场文书
委托收款证明
2015/06/23 职场文书
生产车间管理制度
2015/08/04 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
python基础之类方法和静态方法
2021/10/24 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Java实现注册登录跳转
2022/06/16 Java/Android