vue页面引入three.js实现3d动画场景操作
5星 · 超过95%的资源 51 浏览量
2020-11-19
23:36:36
上传
评论 1
收藏 101KB PDF 举报 
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是否引入成功。页面测试代码如下：
<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 () {
评论5
最新资源