three.js学习2（基础）

渣渣灰飞

已于 2023-07-19 16:19:49 修改

阅读量402

点赞数

文章标签：学习 vue.js typescript three.js

于 2023-07-19 15:44:37 首次发布

本文链接：https://blog.csdn.net/flhhly/article/details/131810204

版权

前言：

上面学习了three.js在页面上的简单显示，本次学习把展示在页面上的物体动起来

参考文档（gsap使用）：

TweenMax 基础案例_TweenMax中文网tweenmax 是greensock 动画平台的核心插件，greensock 是一套用于在所有主流浏览器中制作高性能html5动画的工具。tweenmax中文网提供tweenmax、tweenlite、timelinemax、timelinelite核心功能的中文文档和greensock 相关插件下载。http://www.tweenmax.com.cn/demo/

目标一、使物体移动、旋转

Ⅰ、设置时钟方式

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const container = ref<HTMLDivElement>()

// 创建场景
const scene = new THREE.Scene()

// 创建相机对象
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 修改元素位置
// cube.position.x = 2
// 缩放
// cube.scale.x = 2
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ')
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(window.innerWidth, window.innerHeight)

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 坐标轴
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

// 设置时钟
const clock = new THREE.Clock()

// 渲染
const render = () => {
	// 物体移动
	const deltaTime = clock.getDelta()
	console.log(deltaTime)
	const time = clock.getElapsedTime()
	cube.position.x = (time % 5) * 1
	if (cube.position.x > 8) {
		cube.position.x = 0
	}
	// 物体旋转
	cube.rotation.x += 0.01
	controls.update()
	renderer.render(scene, camera) // 执行渲染操作
	requestAnimationFrame(render)
}

onMounted(() => {
	container.value?.appendChild(renderer.domElement)
	render()
})
</script>

<template>
	<div ref="container" class="container"></div>
</template>
<style scoped lang="scss">
.container {
	height: 100%;
	width: 100%;
}
</style>

Ⅱ、使用gsap

1、安装

yarn add gsap

2、引入使用

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import gsap from 'gsap'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const container = ref<HTMLDivElement>()

// 创建场景
const scene = new THREE.Scene()

// 创建相机对象
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 修改元素位置
// cube.position.x = 2
// 缩放
// cube.scale.x = 2
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ')
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(window.innerWidth, window.innerHeight)

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 坐标轴
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

// 设置动画
const animatel = gsap.to(cube.position, {
	x: 5,
	duration: 5,
	// 设置重复次数
	repeat: -1,
	// 设置往返运动
	// 延迟两秒
	delay: 2,
	yoyo: true,
	onComplete: () => {
		console.log('动画完成')
	},
	onStart: () => {
		console.log('动画开始')
	}
})
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, repeat: -1 })

// 监听事件，双击暂停
window.addEventListener('dblclick', () => {
	// 动画
	if (animatel.isActive()) {
		animatel.pause()
	} else {
		animatel.resume()
	}
})
// 渲染
const render = () => {
	controls.update()
	renderer.render(scene, camera) // 执行渲染操作
	requestAnimationFrame(render)
}

onMounted(() => {
	container.value?.appendChild(renderer.domElement)
	render()
})
</script>

<template>
	<div ref="container" class="container"></div>
</template>
<style scoped lang="scss">
.container {
	height: 100%;
	width: 100%;
}
</style>

目标二、自适应

解决页面在进行缩放之后，显示bug

// 监听页面变化
window.addEventListener('resize', () => {
	// 更新摄像头
	camera.aspect = window.innerWidth / window.innerHeight
	// 更新摄像机的投影矩阵
	camera.updateProjectionMatrix()
	// 更新渲染器
	renderer.setSize(window.innerWidth, window.innerHeight)
	// 设置渲染器的像素比
	renderer.setPixelRatio(window.devicePixelRatio)
})

目标三、双击全屏或者退出全屏

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const container = ref<HTMLDivElement>()

// 创建场景
const scene = new THREE.Scene()

// 创建相机对象
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 修改元素位置
// cube.position.x = 2
// 缩放
// cube.scale.x = 2
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ')
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(window.innerWidth, window.innerHeight)

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 坐标轴
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

// 监听页面变化
window.addEventListener('resize', () => {
	// 更新摄像头
	camera.aspect = window.innerWidth / window.innerHeight
	// 更新摄像机的投影矩阵
	camera.updateProjectionMatrix()
	// 更新渲染器
	renderer.setSize(window.innerWidth, window.innerHeight)
	// 设置渲染器的像素比
	renderer.setPixelRatio(window.devicePixelRatio)
})
// 监听事件，双击暂停
window.addEventListener('dblclick', () => {
	if (document.fullscreenElement === null) {
		renderer.domElement.requestFullscreen()
	} else {
		document.exitFullscreen()
	}
})
// 渲染
const render = () => {
	controls.update()
	renderer.render(scene, camera) // 执行渲染操作
	requestAnimationFrame(render)
}

onMounted(() => {
	container.value?.appendChild(renderer.domElement)
	render()
})
</script>

<template>
	<div ref="container" class="container"></div>
</template>
<style scoped lang="scss">
.container {
	height: 100%;
	width: 100%;
}
</style>