python 动画场景_vue页面引入three.js实现3d动画场景操作
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是否引入成功。页面测试代码如下:
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()
}
}
#container {
height: 400px;
}
注意相关变量的定义容器大小的定义,接下来可以运行当前vue项目,并在浏览器中查看当前效果:
出来的效果是一个旋转的正方形,这就表明当前项目已经成功引入three.js并可以运行,剩下的就可以创建场景,打造酷炫的3D效果。
补充知识:vue中three及其依赖引入和使用
引入
单页面应用
//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的使用==
或者是
//官方依赖文档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动画场景操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
python 动画场景_vue页面引入three.js实现3d动画场景操作相关推荐
- html页面引入vue.js + elementUI 离线包快速开发前端页面
背景 需要开发一个页面,页面复杂,原生H5不熟悉.项目要求开发一键打开的html页面,不需要任何运行环境,例如node等.最后决定采用html + vue.js + elementUI离线开发. 离线 ...
- vue + Three.js实现3d动画效果
1.安装依赖 // 引入three.js相关插件npm install three --save// 安装轨道控件插件// npm install three-orbit-controls//安装加载 ...
- js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
- android 三维动画效果,9款令人惊叹的HTML5 3D动画应用
原标题:9款令人惊叹的HTML5 3D动画应用 之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的.今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3 ...
- android3d动画的实现,【转】Android 实现3d动画旋转效果
Roate3dAnimation 实现了围绕y轴竖直方向 或者绕x轴方向旋转的3d动画效果.这个例子来 自Android APIDemo中的一个自定义View动画.他的实现展示自定义View动画的基本 ...
- 删除页面引入的js或者css文件
有些时候,页面采用了集成方式,统一引入了一些js.css组件,如何单独移出不需要的组件. 移出代码 定义 function removejscssfile(filename, filetype) {v ...
- vue 页面引入多个内部js_.html多页页面引入vue.js怎么开发?
vue.config里可以配置多页面应用module.exports = { // publicPath: process.env.NODE_ENV === 'production' // ? 'ht ...
- 致远OA二开整理(基础版,本地环境搭建,插件project设置,页面引入外部js文档)
最近在看致远OA开发相关,顺便整理了分文档(基础的). 关注下方公众号 回复"致远OA"免费获取.
- html禁止页面动画,如何在页面加载时阻止CSS动画?
我有一个动画,它负责按钮悬停状态下的淡入和淡出过渡. 问题是默认动画(-webkit-animation:off-state 1s;)在页面加载时触发.如何在第一个悬停状态后才使其处于活动状态? 我知 ...
最新文章
- play store显示“从服务器检索信息时出错。DF-DFERH-01”问题解决
- mySql中The user specified as a definer ('root'@'%') does not exist
- Unable to find the ncurses libraries or the required header files解决
- 推荐系统炼丹笔记:EdgeRec阿里边缘计算推荐系统
- 软考5个高级中哪个好考_请问:计算机软考中、高级,哪个好考些呢?
- oracle多条数据合并成一条_建议将北京地铁13-B线和28号线合并成一条线
- WSSv3 Technical Articles_使用Visual Studio 2005扩展创建Windows SharePoint Services 3.0 Web Part...
- 第 6 章 MybatisPlus 代码生成器
- oracle pfile 注释,Oracle pfile/spfile参数文件详解
- websphere mq 查看队列中是否有数据_如果面试官再问你消息队列,就把这篇甩给他!...
- Haproxy+Keepalived+Nginx
- 计算机组装维修设置还原点,电脑组装、维护与故障排除
- android pc投屏,如何解决乐播投屏中投屏失败的问题【乐播投屏】
- 像京东等大厂为什么不通过减薪来代替裁员,降低成本?
- 免费 GIS 软件资源介绍,大家值得收藏
- Androidstudio之菜单栏设置
- react项目中使用消息订阅(subscribe)-发布(publish)机制
- 使用 Amazon Amplify快速创建简单的 Android 应用程序
- 消息推送配置url(服务器地址),设置推送url接口
- 交通安全评价方法简介
热门文章
- ubuntu20安装ukylin企业微信记录
- esp-idf安装过程中遇到的一些问题
- 微信赞赏不适合国内免费模式主导的互联网市场
- android监听程序被杀死,Android 监听主进程被杀
- jessibuca的使用——纯H5直播流播放器
- 浅析量子技术在军事领域的应用
- 瑞达利欧《原则》笔记
- 机器人Scribit_飞檐走壁的艺术家 Scribit绘画机器人
- bluestacks android 文件夹,蓝叠安卓模拟器怎么传文件?Bluestacks与PC电脑文件传输方法介绍...
- BlueStacks4国际版支持同时开启hyper-v