vue+three.js开发

three.js中文文档

Three.js Examples
在vue-cli3中使用three.js的OBJLoader和MTLLoader来加载三维模型文件.obj和.mtl
注意：需要threeJs load的模型，只能放在静态资源目录下。

1. 新建vue-cli3项目。
1. 引入three.js：cnpm i three --save-dev （最好用cnpm，npm下载的包版本过低）

/*** 创建渲染器对象
*/this.renderer = new THREE.WebGLRenderer({antialias: true // 抗锯齿})// 参数：相机的开角，成像的比例，1 相机能拍摄到的最近距离，10000是相机能拍到的最远距离
const width = this.container.clientWidth // 窗口宽度
const height = this.container.clientHeight // 窗口高度
const k = width / height // 窗口宽高比 2
this.camera = new THREE.PerspectiveCamera(45, k, 1, 100000) // 透视摄像机
// up是头顶的方向，position 是相机的位置，lookAt 相机指向的焦点

材质类型
MeshBasicMaterial：基础网格材质，不受光照影响的材质
MeshLambertMaterial：Lambert网格材质，与光照有反应，漫反射
MeshPhongMaterial：高光Phong材质,与光照有反应
MeshStandardMaterial：PBR物理材质，相比较高光Phong材质可以更好的模拟金属、玻璃等效果

1. 引入three中的OrbitControls控制器

// 安装依赖
npm install three-orbitcontrols
// 页面引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

1. 引入ThreeBSP (用于组合多个几何体)，threeJs挖洞教程

安装依赖：cnpm install tthreebsp
// 页面使用：
import * as THREE from 'three'
const ThreeBSP = require('tthreebsp')(THREE)
intersect（交集）
union（并集）
subtract（差集）

1. 引入动画插件tween

npm install --save @tweenjs/tween.js

文档阅读笔记：

纹理（Textures）
如果更改了图像，画布，视频和数据纹理，则需要设置以下标志：

texture.needsUpdate = true;

渲染对象就会自动更新。

废置对象——dispose()
旋转——绕向量
网格模型绕(0,1,0)向量表示的轴旋转π/8

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8

vue修饰符：

.capture // 采用事件捕获的方式触发事件

vue+three.js开发相关推荐

Vue.config.js开发环境与生产环境配置
Vue.config.js开发环境与生产环境配置首先在项目根目录创建 .env.development 开发环境 .env.production 生产环境 VUE_APP_SERVICE_URL V ...
基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
2019独角兽企业重金招聘Python工程师标准>>> ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
详细记录基于vue+nodejs+mongodb构建的商城学习（四）基于项目的node.js开发后端的学习与梳理总结...
前置: 本系列文章是一个本人边学习边梳理的学习笔记,俗话说好脑袋不如烂笔头,再好的记忆力时间长了也会有细节忘记,本项目选择的前端框架是vue,后端开发使用是node.js,数据库使用的是mongodb ...
Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...

vue+three.js开发

vue修饰符：

vue+three.js开发相关推荐

最新文章

热门文章