three.js学习(基础)

这篇具有很好参考价值的文章主要介绍了three.js学习(基础)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言:

参考文档:

实现 

1、安装

2、声明

3、引入使用


前言:

前面学习了three.js物体的动画展示,接下来学习应用图形界面更改变量

目标、页面提供操作区域进行变量修改

three.js学习(基础),typescript,前端,vue,vite

参考文档:

dat.gui - npmA lightweight graphical user interface for changing variables in JavaScript.. Latest version: 0.7.9, last published: a year ago. Start using dat.gui in your project by running `npm i dat.gui`. There are 216 other projects in the npm registry using dat.gui.https://www.npmjs.com/package/dat.gui

实现 
1、安装

npm install --save dat.gui

或者

yarn add dat.gui

2、声明

在env.d.ts同级目录下创建dat.gui.d.ts

declare module 'dat.gui'文章来源地址https://www.toymoban.com/news/detail-595145.html

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

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 animatel = gsap.to(cube.position, {
	x: 5,
	duration: 5,
	// 设置重复次数
	repeat: -1,
	// 设置往返运动
	// 延迟两秒
	delay: 2,
	yoyo: true,
	onComplete: () => {
		console.log('动画完成')
	},
	onStart: () => {
		console.log('动画开始')
	}
})
const gui = new dat.GUI()
// 修改物体位置
gui
	.add(cube.position, 'x')
	.min(0)
	.max(5)
	.step(0.01)
	.name('移动X轴')
	.onChange((value: any) => {
		console.log(value)
	})
	.onFinishChange((value: any) => {
		console.log(value)
	})
// 修改物体颜色
const params = {
	color: '#ffff00',
	fn: () => {
		if (animatel.isActive()) {
			animatel.pause()
		} else {
			animatel.resume()
		}
	}
}
gui.addColor(params, 'color').onChange((value: any) => {
	cube.material.color.set(value)
})
// 设置物体的显示隐藏
gui.add(cube, 'visible').name('是否显示')
// 设置按钮点击触发事件
gui.add(params, 'fn').name('物体运动')
// 设置文件夹
const folder = gui.addFolder('设置立方体')
folder.add(cube.material, 'wireframe')
// 渲染
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>

到了这里,关于three.js学习(基础)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Three.js基础学习】8.3D Text

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档   课程要点:     1.要使用的字体  字体加载器 FontLoading()     引入: import { FontLoader } from \\\'three/examples/jsm/loaders/FontLoader.js\\\'         const fontLoading = FontLoading()  // 133 版本之后使用这种写法     但是和

    2024年04月25日
    浏览(26)
  • 【wow-ts】前端学习笔记Typescript基础语法(一)

    项目地址是https://github.com/datawhalechina/wow-ts。 我选择的是ts前端课程 第一次接触ts,先去了解了下ts的内容,复制内容如下 TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 是一种给 JavaScript 添加特性的

    2024年01月16日
    浏览(57)
  • Vue3+Vite+TypeScript常用项目模块详解

      目录 1.Vue3+Vite+TypeScript 概述 1.1 vue3  1.1.1 Vue3  概述 1.1.2 vue3的现状与发展趋势 1.2 Vite 1.2.1 现实问题 1.2 搭建vite项目 1.3 TypeScript 1.3.1 TypeScript 定义 1.3.2 TypeScript 基本数据类型  1.3.3 TypeScript语法简单介绍 2. 项目配置简单概述 2.1 eslint 校验代码工具配置 2.1.1 eslint定义 2.1.2 esl

    2024年02月08日
    浏览(41)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(3) - vite配置

    项目代码同步至码云 weiz-vue3-template 关于vite的详细配置可查看 vite官方文档,本文简单介绍vite的常用配置。 项目初建后, vite.config.ts 的默认内容如下: 比如,修改 App.vue : 根目录下新建 .env 、 .env.development 、 .env.production 三个文件。 .env 文件内新增内容: .env.development 文件内

    2024年02月05日
    浏览(105)
  • Vue 3 + TypeScript + Vite 项目中,实现选中图片移动

    在组件的  script  标签中,定义相关的数据和方法。首先,使用 Vue 的  ref  函数创建一个对图片元素的引用: 接下来,实现选中时出现边框的效果。你可以通过设置 CSS 样式来实现这一点。以下是一个简单的示例: 在组件的  template  中,为选中的容器元素动态绑定  sele

    2024年02月13日
    浏览(32)
  • Vue3 + Vite + TypeScript + dataV 打造可视化大屏

    网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从 0 搭建一个可视化大屏项目,毕竟 Vue 一直在更新,自己搭建的可以使用最新版本的 Vue ,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好

    2024年02月03日
    浏览(46)
  • Vue3 + Vite2 + TypeScript4搭建企业级项目框架

    1. 创建项目 使用命令行工具进入到你想要创建项目的目录,然后执行以下命令: 这将会创建一个新的项目文件夹和一个 package.json 文件。 2. 安装依赖 接下来你需要在项目中安装 Vue、Vite、TypeScript 和其他需要的依赖。执行以下命令: 以上命令会安装最新的 Vue、Vite 和 TypeSc

    2024年02月08日
    浏览(63)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范

    项目代码同步至码云 weiz-vue3-template 要求代码规范,主要是为了提高多人协同和代码维护效率,结合到此项目,具体工作就是为项目配置 eslint 和 prettier 。 安装 EditorConfig for VS Code 插件,根目录下新建 .editorconfig 文件,增加以下配置 如果是非windows系统, end_of_line 设置为 cr 安

    2024年02月05日
    浏览(104)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)

    Vue 是前端开发中非常常见的一种框架,它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中,组件的开发也变得非常简单,但随着 Vue3 版本的发布,组件开发有了更多的特性和优化,为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件

    2024年02月19日
    浏览(89)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置

    项目代码同步至码云 weiz-vue3-template 关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解 文件修改如下: 修改文件如下: 新建文件夹 types ,用来存放类型定义。比如新建 index.d.ts : 后续也可以新增其他文件,比如 global.d.ts 存放全局定义, router.d.ts 存放路由定

    2024年02月05日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包