Skip to content

Commit

Permalink
更新
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaojianghua
gaojianghua committed Apr 20, 2024
1 parent 9a13bb4 commit 7849097
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 83 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,12 @@
"dependencies": {
"@nuxtjs/eslint-config-typescript": "^12.1.0",
"@pinia/nuxt": "^0.4.6",
"@types/dat.gui": "^0.7.13",
"@vueuse/core": "^10.3.0",
"@vueuse/nuxt": "^10.3.0",
"cesium": "^1.116.0",
"daisyui": "^2.47.0",
"dat.gui": "^0.7.9",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-nuxt": "^4.0.0",
"gsap": "^3.12.5",
Expand Down
1 change: 1 addition & 0 deletions src/app.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@ interface Window {
}
declare let Cesium: any;
declare module 'three'
declare module 'dat.gui'
declare module 'three/examples/jsm/controls/OrbitControls'
172 changes: 89 additions & 83 deletions src/components/works/three-one.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: 高江华 g598670138@163.com
* @Date: 2024-04-18 14:43:09
* @LastEditors: 高江华
* @LastEditTime: 2024-04-19 10:14:50
* @LastEditTime: 2024-04-20 16:38:20
* @Description: file content
-->
<template>
Expand All @@ -14,6 +14,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import gsap from 'gsap'
import {GUI} from 'dat.gui'

const threeContainer: any = ref(null);
let scene : any
Expand All @@ -26,77 +27,7 @@ let cubeMaterial : any
let cube : any
let clock : any
let animate1 : any

if (process.client) {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(75, window?.innerWidth / window?.innerHeight, 0.1, 1000);

// 初始化渲染器
renderer = new THREE.WebGLRenderer();
// 创建轨道控制器
controls = new OrbitControls(camera, renderer.domElement)
// 创建坐标系
axesHelper = new THREE.AxesHelper(5)
// 创建几何体
cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xffff00
});
// 根据几何体和材质创建物体
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 创建时钟
clock = new THREE.Clock();
// 设置动画
animate1 = gsap.to(cube.position, {
x:5,
duration: 5,
ease: 'power1.inOut',
repeat: -1, // 重复次数，-1无限循环
yoyo: true, // 往返运动
delay: 2, // 延迟多少秒开始
onComplete: () => {
console.log('动画结束')
},
onStart: () => {
console.log('动画开始')
}
})
gsap.to(cube.rotation, {
x:2 * Math.PI,
duration: 5,
ease: 'power1.inOut',
repeat: -1, // 重复次数，-1无限循环
yoyo: true, // 往返运动
onComplete: () => {
console.log('动画结束')
},
onStart: () => {
console.log('动画开始')
}
})

window.addEventListener('dblclick', () => {
if (animate1.isActive()) {
animate1.pause()
}else {
animate1.resume()
}

})
}

// 修改物体位置
// cube.position.set(5, 0, 0)
// 缩放
// cube.scale.set(3, 2, 1)
// 旋转
// cube.rotation.set(Math.PI/4, 0, 0)



let gui : any

// 渲染函数
const render = () => {
Expand All @@ -109,6 +40,92 @@ const render = () => {
}

onMounted(() => {
if (process.client) {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(75, threeContainer.value!.clientWidth / threeContainer.value!.clientHeight, 0.1, 1000);
// 初始化渲染器
renderer = new THREE.WebGLRenderer();
// 创建轨道控制器
controls = new OrbitControls(camera, renderer.domElement)
// 创建坐标系
axesHelper = new THREE.AxesHelper(5)
// 创建几何体
cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xffff00
});
// 根据几何体和材质创建物体
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 创建时钟
clock = new THREE.Clock();
// 设置动画
// animate1 = gsap.to(cube.position, {
// x:5,
// duration: 5,
// ease: 'power1.inOut',
// repeat: -1, // 重复次数，-1无限循环
// yoyo: true, // 往返运动
// delay: 2, // 延迟多少秒开始
// onComplete: () => {
// console.log('动画结束')
// },
// onStart: () => {
// console.log('动画开始')
// }
// })
// gsap.to(cube.rotation, {
// x:2 * Math.PI,
// duration: 5,
// ease: 'power1.inOut',
// repeat: -1, // 重复次数，-1无限循环
// yoyo: true, // 往返运动
// onComplete: () => {
// console.log('动画结束')
// },
// onStart: () => {
// console.log('动画开始')
// }
// })

// window.addEventListener('dblclick', () => {
// if (animate1.isActive()) {
// animate1.pause()
// }else {
// animate1.resume()
// }

// })
// 监听窗口变化，更新渲染画面
window.addEventListener('resize', () => {
// 更新摄像头
camera.aspect = threeContainer.value!.clientWidth / threeContainer.value!.clientHeight
// 更新摄像头投影矩阵
camera.updateProjectionMatrix()
// 更新渲染器
renderer.setSize(threeContainer.value!.clientWidth, threeContainer.value!.clientHeight)
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
// 监听双击事件
window.addEventListener('dblclick', () => {
const fullScreenElement = document.fullscreenElement
if (fullScreenElement) {
document.exitFullscreen()
}else {
renderer.domElement.requestFullscreen()
}
})
// 引入GUI
import('dat.gui').then((dat) => {
// 在客户端环境下引入dat.gui并进行相关操作
gui = new dat.GUI()
// 添加X轴的操作
gui.add(cube.position, "x").min(0).max(5).step(0.01).name("移动X抽坐标")
});
}
// 添加相机到场景中
scene.add(camera);
// 添加坐标系到场景中
Expand All @@ -125,17 +142,6 @@ onMounted(() => {
renderer.setSize(threeContainer.value!.clientWidth, threeContainer.value!.clientHeight);
// 调用渲染
render()
// 监听窗口变化，更新渲染画面
window.addEventListener('resize', () => {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight
// 更新摄像头投影矩阵
camera.updateProjectionMatrix()
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight)
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
});

onBeforeUnmount(() => {});
Expand Down
10 changes: 10 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1794,6 +1794,11 @@
resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.1.tgz#0ae28ed9c635805557f78c2626464018d5f1b5e2"
integrity sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==

"@types/dat.gui@^0.7.13":
version "0.7.13"
resolved "https://registry.yarnpkg.com/@types/dat.gui/-/dat.gui-0.7.13.tgz#40bbdcf72714ce46fe624d9d05e8000f1265653c"
integrity sha512-LmG4Pr0mbsB/1WVttf8xaHx45BvSBDGY5D9+0/9AZCbI4vvOguwBHZdKyJMxt5Yst8+icRSHKmr7ClV2u5ZtDA==

"@types/estree@*", "@types/estree@^1.0.0":
version "1.0.0"
resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
Expand Down Expand Up @@ -3581,6 +3586,11 @@ dargs@^7.0.0:
resolved "https://registry.npmmirror.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==

dat.gui@^0.7.9:
version "0.7.9"
resolved "https://registry.yarnpkg.com/dat.gui/-/dat.gui-0.7.9.tgz#860cab06053b028e327820eabdf25a13cf07b17e"
integrity sha512-sCNc1OHobc+Erc1HqiswYgHdVNpSJUlk/Hz8vzOCsER7rl+oF/4+v8GXFUyCgtXpoCX6+bnmg07DedLvBLwYKQ==

data-uri-to-buffer@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
Expand Down

0 comments on commit 7849097

Please sign in to comment.