目录
8.vue 使用jquery supersized插件实现幻灯片的效果
一.vue基础知识
1.vue-cli创建项
首先你要安装vue-cli 之后在要创建项目的地方执行
vue create my-project
二 vue资源使用总结
1.vue使用three.js知识总结
1.首先执行安装three.js命令
npm install three --save
2.在之后要引入的组件中写入
import * as Three from 'three'
再引入three.js之后我们需要建立scene(屏幕),camera(相机),renderer(渲染器) 分别代码如下
this.scene = new THREE.Scene() // 场景
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场,长宽比,近面,远面
this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
我们可以对相机,和渲染器做参数调整例如
this.camera.position.x = -20
this.camera.position.y = 40
this.camera.position.z = 30
this.camera.lookAt(this.scene.position)//分别设置相机的位置和相机拍摄点位于屏幕中心
this.renderer.setSize(window.innerWidth, window.innerHeight - 100)//设置渲染器的大小
this.renderer.shadowMapEnabled = true // 开启阴影
我们可以建立适当的坐标系以供参考
let axes = new THREE.AxisHelper(200) // 坐标轴
如果我们想要鼠标键盘可以旋转模型的话需要引入OrbitControls引入方法为
- 首先先安装npm Install imports-loader and exports-loader,用于向一个模块的作用域内注入变量、从模块中导出变量。
- 配置webpack.base.conf.js文件,在其module中的rules[]中添加
{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “imports-loader?THREE=three”
},
{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “exports-loader?THREE.OrbitControls”
}
- 需要使用的地方引入OrbitControls
import OrbitControls from ‘three/examples/js/controls/OrbitControls’
使用时不需要通过THREE.OrbitControls了,直接new即可
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
我们还可以加入引入dat.gui 来对其进行可视化控制
只需引入即可执行以下代码
npm install dat.gui -save
最终的代码如下
<template>
<div ref="demo1"></div>
</template>
<script>
import * as THREE from 'three'
import OrbitControls from 'three/examples/js/controls/OrbitControls';
import dat from 'dat.gui'
export default {
name:"three",
data: () => ({
controls: {
scene: null,
camera: null,
renderer: null,
rotationSpeed: 0.02
}
}),
created () {
this.$nextTick(() => {
this.init()
})
},
methods: {
init () {
let {initMesh, controls} = this
const gui = new dat.GUI() // gui监测器
gui.add(controls, 'rotationSpeed', 0, 0.5)
initMesh()
},
initMesh () {
this.scene = new THREE.Scene() // 场景
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场,长宽比,近面,远面
this.camera.position.x = -20
this.camera.position.y = 40
this.camera.position.z = 30
this.camera.lookAt(this.scene.p