three.js--立方体

作者:baekpcyyy🐟

使用three.js渲染出可以调节大小的立方体

1.搭建开发环境

1.首先新建文件夹用vsc打开项目终端

2.执行npm init -y

创建配置文件夹

3.执行npm i three@0.152

安装three.js依赖

4.执行npm I vite -D

安装 Vite 作为开发依赖

在这里插入图片描述

5.根目录下新建index.html

作为页面入口文件

6.根目录新建src文件

在src文件夹里新建main.js
现在我们将新建的main.js引入到index.html中请添加图片描述

7.src文件中新建assets/style/reset.css

这里我们可以写全局的样式 现在我们主要用来测试环境的搭建
请添加图片描述
将样式文件引入到index.html中
请添加图片描述

8.启动项目

在package.json中编写启动脚本
在这里插入图片描述
在项目终端输入npm run dev将项目启动
请添加图片描述
请添加图片描述

2.初识three.js

three.js中我们要渲染出一个图形需要
1.创建一个三维场景
2.创建一个相机
3.创建一个渲染器渲染

以下内容都在main.js中设置

1.将three.js导入在main.js中

请添加图片描述

2.创建一个三维场景

![请添加图片描述](https://img-blog.csdnimg.cn/b968021b26134cd09142bea81d68d638.png请添加图片描述

3.创建相机

45 相机视角
window.innerWidth/window.innerHeight 宽高比 和显示器一致
1 //近平面 相机最近看到的物体
1000 // 远平面 相机最远看到的物体
请添加图片描述

4.创建渲染器

请添加图片描述

5.渲染

请添加图片描述
现在我们打开浏览器已经可以看见刚创建出来的正方体已经显示在了页面中
只不过我们没有去转动页面所以看见的是一个平面的图形请添加图片描述

6.动画效果请添加图片描述

现在我们打开浏览器可以看见三维正方体已经成功渲染请添加图片描述

3.显示辅助坐标器

我们在创建渲染器上面加上如下代码
请添加图片描述
打开浏览器可以看见坐标器也成功渲染
ps:
红色x轴
绿色y轴
蓝色z轴
请添加图片描述

4.创建轨道控制器

使用鼠标可以三维观看立方体
![请添加图片描述](https://img-blog.csdnimg.cn/49fd5f18b1aa44d3a11请添加图片描述请添加图片描述
将刚才的动画效果删除将渲染语句写入动画函数里
请添加图片描述
设置渲染器的动画循环
在这里插入图片描述
现在我们打开浏览器可以发现通过鼠标我们已经可以三维观看渲染出来的正方体了

5.创建自适应画布

就是浏览器窗口发生变化后页面的渲染也会发生变化

这段代码就是浏览器事件监听器监听窗口大小变化 变化后重新设置一系列内容

请添加图片描述
现在我们打开浏览器就可以发现渲染画面以及可以通过浏览器的改变而变化了

6.创建网格辅助对象

20 20 则是指将页面分成多少行多少列 后面的是对应行列的颜色
请添加图片描述
现在我们打开浏览器就可以看到网格辅助工具请添加图片描述

7.对正方体进行基础的设置

在旋转中我们的旋转角度统一使用弧度制

ps:注意以下代码的书写位置
在这里插入图片描述
现在我们打开浏览器就可以发现我们正方体已经发生了变化

请添加图片描述

8.集成ui工具

自定义ui工具就可以在浏览器上进行立方体的基础设置便于开发直观看到效果

1.首先我们在终端下载依赖

npm i dat.gui
请添加图片描述

2.然后我们将集成工具进行导入

请添加图片描述

3.初始化集成GUI

我们将设置移动位置的代码用如下代码进行替换

const guiPosition = gui.addFolder(‘位置信息’)

这里我们是在页面中新建一个位置信息改变的文件夹

guiPosition.add(cube.position, ‘x’, -10, 10, 1)
guiPosition.add(cube.position, ‘y’, -10, 10, 1)
guiPosition.add(cube.position, ‘z’, -10, 10, 1)

这三句则是对立方体在x轴 y轴 z 轴的位置进行初始化
缩放和位置信息的初始化逻辑一致

我们将重点讲解旋转逻辑

const guiRotate = gui.addFolder(‘旋转’)

在页面中新建旋转文件夹

const data = {
x: 0,
y: 0,
z: 0,

}
将初始xyz的角度放在data对象中
使用onChange回调函数将移动的value值转化为弧长制在赋值给cube.rotation
请添加图片描述
现在我们打开浏览器就可以使用集成工具在浏览器页面上设置立方体的大小了
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/194672.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS7搭建部署NTP服务器

服务端配置: yum install ntp ntpdate -y #下载安装包 修改配置文件,同步阿里的NTP服务器 vim /etc/ntp.conf systemctl start ntpd #启动该服务 ntpq -p #查看是否同步了阿里的NTP 服务端同步成功后,可以去新增…

网络安全现状

威胁不断演变: 攻击者不断变化和改进攻击方法,采用更复杂、更隐秘的技术,以逃避检测和追踪。这包括新型的勒索软件、零日漏洞利用和社交工程攻击等。 供应链攻击: 攻击者越来越关注供应链的弱点,通过在供应链中植入恶…

记录 | linux查看文件夹大小

linux 查看文件夹大小,以 GB 为单位: sudo du -h -s /workspace

【Rust日报】2023-12-02 深度学习框架 Burn 发布 v0.11.0

深度学习框架 Burn 发布 v0.11.0 深度学习框架 Burn 发布 v0.11.0,新版本引入了自动内核融合(Kernel Fusion)功能,大大提升了访存密集型(memory-bound)操作的性能。同时宣布成立 Tracel AI (https://tracel…

提权(1), 脱裤, dirty-cow 脏牛提权

提权(1), 脱裤, dirty-cow脏牛提权 本实验以打靶为案例演示脱裤和dirty-cow脏牛提权的操作过程. 实验环境: 靶机: https://www.vulnhub.com/entry/lampiao-1,249/ 本地: 192.168.112.201, kali 目标: 192.168.112.202 一, 信息搜集 扫描全端口: nmap -p- 192.168.112.202…

Mybatis 操作续集(结合上文)

当我们增加一个数据之后,如果我们想要获取它的 Id 进行别的操作,我们该如何获取 Id 呢? 用那个Options package com.example.mybatisdemo.mapper;import com.example.mybatisdemo.model.UserInfo; import org.apache.ibatis.annotations.*;import java.util.List;Mapper pub…

docker搭建nginx实现负载均衡

docker搭建nginx实现负载均衡 安装nginx 查询安装 [rootlocalhost ~]# docker search nginx [rootlocalhost ~]# docker pull nginx准备 创建一个空的nginx文件夹里面在创建一个nginx.conf文件和conf.d文件夹 运行映射之前创建的文件夹 端口:8075映射80 docker…

关于媒体查询不能生效的原因

问题 今天写媒体查询,遇到了个问题,卡了很久,引入三个样式:mainPageCommon.css、mainPageBig.css、mainPageSmall.css。其中的两个样式可以生效,但是小尺寸的媒体查询不能生效,这里很奇怪!&…

第十一节HarmonyOS 常用容器组件3-Tabs

一、Tabs 1、概述 我们经常使用时,会出现试图切换的场景,比如底部有多个菜单,“首页”、 “我的”等。 两个内容容器的切换: ArkUI开发框架提供了一种页签容器组件Tabs,开发者通过Tabs组件可以很容易的实现内容视图…

跟着Nature Communications学习Hisat-Trinity-PASA等分析流程

一边学习,一边总结,一边分享! 详细教程请访问: 组学分析流程 本期分析流程 Hisat2-SamtoolsTrinity_GG_denovoPASA … 本期教程文章 题目:Genomic insights into local adaptation and future climate-induced vu…

华为手环配置技巧

前言 华为手环作为生活健康辅助设备发挥不可忽视的作用,但每次更换手环后需要重新配置。华为手环不仅有健康监测、消息通知、天气推送、离线支付、公交卡、运动锻炼、等功能,还有倒计时、计时器、手电筒、闹钟、等小工具。下文介绍如何进行配置。 配置…

qt-C++笔记之组件-分组框QGroupBox

qt-C笔记之组件-分组框QGroupBox code review! 文章目录 qt-C笔记之组件-分组框QGroupBox1.《Qt 6 C开发指南》p752.《Qt 官方文档》3.《Qt 5.12实战》——5.9 分组框控件 1.《Qt 6 C开发指南》p75 2.《Qt 官方文档》 中间段落翻译: 我把示例补充完整: …

深入了解Java8新特性-日期时间API之ZonedDateTime类

阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概19000多字,预计阅读时间长需要10分钟以上。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&…

【c++随笔15】c++常用第三方库

【c随笔15】c常用第三方库 一、数据库相关:HDFS、libpq、SQLite、RocksDB、unixODBC、Nanobdc、Ignite ; 二、网络通信相关:libcurl、libevent、libssh、mosquitto、nghttp2、libuv; 三、加密和安全相关:1、OpenSSL 四…

【Java 基础】17 集合

文章目录 1.基本概念2.核心接口3.常见实现1)List 接口的实现类ArrayListLinkedListVector 2)Set 接口的实现类HashSetLinkedHashSetTreeSet 3)Queue 接口的实现**类**ArrayQueue 4)Map 接口的实现类HashMapLinkedHashMapTreeMap 4…

GateWay的路由与全局过滤器

1.断言工厂 我们在配置文件中写的断言规则只是字符串,这些字符串会被Predicate Factory读取并处理,转变为路由判断的条件 例如Path/user/**是按照路径匹配,这个规则是由 org.springframework.cloud.gateway.handler.predicate.PathRoutePr…

shell编程-awk命令详解(超详细)

文章目录 前言一、awk命令介绍1. awk命令简介2. awk命令的基本语法3. 常用的awk命令选项4. 常用的awk内置变量 二、awk命令示例用法1. 打印整行2. 打印特定字段3. 根据条件筛选行4. 自定义分隔符5. 从文件中读取awk脚本 总结 前言 awk命令是一种强大的文本处理工具&#xff0c…

柔性数组(Flexible Array Members)在C语言中的应用

什么是柔性数组? 在C语言中,柔性数组(Flexible Array Members,FAMs)是C99标凈引入的一种便捷的数据结构,用于声明具有可变大小数组的结构体。柔性数组通常用于当结构体的大小在编译时不确定,但…

【C++】异常处理 ⑦ ( 异常类的继承层次结构 | 抛出 / 捕获 多个类型异常对象 | 抛出子类异常对象 / 捕获并处理 父类异常对象 )

文章目录 一、抛出 / 捕获 多个类型异常对象1、抛出 / 捕获 多个类型异常对象2、操作弊端3、完整代码示例 二、异常类的继承层次结构1、抛出子类异常对象 / 捕获并处理 父类异常对象2、完整代码示例 - 抛出子类异常对象 / 捕获并处理 父类异常对象 自定义的 异常类 , 可能存在 …

浅析SD-WAN技术如何加强企业网络安全

在这个数字化时代,企业组网的安全性已经成为许多企业所面临的一个重要挑战。特别是随着云计算、移动办公等新型信息技术的普及,企业网络的规模和复杂度不断增加,网络攻击和数据泄露的威胁也日益增加。因此,企业需要采取更加有效的…