学习three.js —— 第一天

news2024/11/28 2:42:08

1.创建三要素

  • 场景

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

  • 相机

    // 创建透视相机
    const camera = new THREE.PerspectiveCamera(a,b,c,d)
    // 参数含义
    // a:相机可视垂直角度;b:相机可视长宽比;c:近端距离;d:远端距离

  • 渲染器

    // 创建渲染器
    const renderer = new WebGLRenderer()
    // 设置渲染器的大小
    renderer.setSize(window.innerWidth,window.innerHeight)

2.获取canvas画布,并将其加入到body中

document.body.appendChild(renderer.domElement)

3.创建几何体

// 创建几何体
const geometry = new THREE.BoxGeometry(1,1,1)

4.创建材质

// 创建材质
const Material = new.THREE.MeshBssicMaterial({color:0xff00ff,wireframe:true})
// color:材质颜色;wireframe:为true时,渲染网格将会呈现线框形式

5.创建网格

几何体 + 材质 -> 物体

const cube = new THREE.Mesh(geometry,Material)
// geometry:几何体;Material:材质

// 将网格添加到场景中
scene.add(cube)

6.设置相机的位置

相机的位置就相当于人是视角

camera.position.z = 5
camera.position.y = 3
camera.position.x = 2
// 设置相机看向的位置(默认为原点)
camera.lookAt(0,0,0)

7.渲染

renderer.render(scene,camera)

在这里插入图片描述

完成以上操作,边可以在页面上渲染一个基础的立方体,可以通过一下操作进一步完善。

设置响应式画布

监听窗口变化,做出响应的操作

window.addEventListener('resize',()=>{
	// 重新设置渲染器的宽高比
	renderer.setSize(window.innerWidth,window.innerHeight)
	// 重新设置相机的宽高比
	camera.aspect(window.innerWidth/window.innerHeight)
	// 更新相机投影矩阵
	camera.updateProjectionMatrix()
})

世界坐标

为了更好的观察,我们可以添加一个世界坐标辅助器

const axesHelper = new THREE.AxesHelper(5)
// 将世界坐标辅助器添加到场景中
scene.add(axesHelper);

在这里插入图片描述

轨道控制器

// 导入轨道控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 添加轨道控制器
const controls = new OrbitControls(camera,render,domElement)
// 设置带阻尼的惯性
controls.enableDamping = true
// 阻尼系数
controls.dampingFactor = 0.05

GUI控件

// 引入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// 创建GUI
const gui = new GUI()
// 利用folder对控件进行分组
let folder = gui.addFolder("立方体的位置")
folder.add(cube.position,"x",-5,5).name("x轴方向的位置")
folder.add(cube.position,"y").min(-5).max(5).step(1).name("y轴方向的位置")

let folder1 = gui.addFolder("旋转");
folder1.add(cube.rotation, "x", -Math.PI, Math.PI).name("绕x轴旋转");

gui.add(Material,"wireframe").name('线框模式')

let coloeParams = {
  cubeColor:'#00ff00'
}
gui.addColor(coloeParams,'cubeColor').name('立方体颜色').onChange(val=>{
  cube.material.color.set(val)
})

在这里插入图片描述

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

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

相关文章

YOLOv5改进系列(19)——替换主干网络之Swin TransformerV1(参数量更小的ViT模型)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制

小结:基于 JavaWeb 的宠物店管理系统

宠物店管理系统 系统介绍系统展示登录界面用户注册页面 店主主界面宠物信息管理页面修改宠物信息 宠物出入库管理页面宠物订单查询页面宠物账单查看页面用户信息管理页面修改用户信息 用户主界面宠物订购页面用户订购支付页面 个人资料编辑页面个人订单查看页面 系统说明开发环…

尚硅谷大数据项目《在线教育之采集系统》笔记005

视频地址:尚硅谷大数据项目《在线教育之采集系统》_哔哩哔哩_bilibili 目录 P057 P058 P059 P060 P061 P062 P063 P064 P065 P066 P067 P068 P069 P070 P071 P072 P073 P057 #!/bin/bashMAXWELL_HOME/opt/module/maxwell/maxwell-1.29.2status_ma…

虚拟机的创建与使用

一、虚拟机的下载 链接:百度网盘下载链接 提取码:a9p4 二、新建虚拟机系统 需要有版本序列号 注意: 选择 第一个是纯dos 的窗口指令 桌面没有任何东西 选择第二个就是正常的操作系统.有文件夹 我的电脑之类的 三、从主机中复制文件到虚拟机中需要安装 …

【自用】JAVA复习(初级到循环 0-156集):break、while、for、continue、return

总览 1.break 2.while 3.for 4.continue 5.return 一、break 1.作用 跳出当前的循环。 2.break 在多重循环中的使用&#xff1a;配合标签使用 二、while 三、for 1.for( ; ; )、for( ; i<10 ; ) 四、continue 1.作用 用于结束本次循环&#xff0c;开始下一次循环 …

C语言笔试训练【第九天】

文章目录 &#x1f47f;1、下列程序的输出是&#xff08; &#xff09;&#x1f48e;2、二维数组X按行顺序存储&#xff0c;其中每个元素占1个存储单元。若 X[4][4] 的存储地址为 Oxf8b82140 , X[9][9] 的存储地址为 Oxf8b8221c ,则 X[7][7] 的存储地址为&#xff08; &#xf…

软件外包开发的VUE开发框架

Vue.js&#xff08;通常简称为Vue&#xff09;是一个流行的渐进式JavaScript框架&#xff0c;用于构建用户界面。它的核心库专注于视图层&#xff0c;但也可以结合其他库和工具来构建完整的单页面应用&#xff08;SPA&#xff09;。以下分享Vue.js的开发框架和特点&#xff0c;…

春秋云镜 CVE-2022-0948

春秋云镜 CVE-2022-0948 WordPress plugin Order Listener for WooCommerce SQLI 靶标介绍 WordPress 插件 Order Listener for WooCommerce 3.2.2 之前版本存在 SQL注入漏洞。 启动场景 漏洞利用 EXP curl http://example.com/?rest_route/olistener/new --data {"…

分布式学习最佳实践:从分布式系统的特征开始

正文   在延伸feature&#xff08;分布式系统需要考虑的特性&#xff09;的时候&#xff0c;我逐渐明白&#xff0c;这是因为要满足这些feature&#xff0c;才设计了很多协议与算法&#xff0c;也提出了一些理论。比如说&#xff0c;这是因为要解决去中心化副本的一致性问题&…

SCAU操作系统知识点之(六)并发:死锁和饥饿

1、死锁原因&#xff1a;竞争资源、进程推进顺序不当 2、资源分配图&#xff08;若死锁&#xff0c;则资源分配图中必有环路&#xff0c;但有环路时不一定死锁&#xff09; 3、死锁的四个必要条件 ①互斥 ②占有且等待 ③不可抢占 ④循环等待 在死锁的四个必要条件中&#xff…

jupyter默认工作目录的更改

1、生成配置文件&#xff1a;打开Anaconda Prompt&#xff0c;输入如下命令 jupyter notebook --generate-config询问[y/N]时输入y 2、配置文件修改&#xff1a;根据打印路径打开配置文件jupyter_notebook_config.py&#xff0c;全文搜索找到notebook_dir所在位置。在单引号中…

Vue组件库

Vue组件库 ViteVue3TypescriptTSX 1、项目搭建 1.1、创建项目&#xff08;yarn&#xff09; D:\WebstromProject>yarn create vite yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh pa…

python使用matplot库绘图颜色表

matlpot的color参数可以是十六进制&#xff0c;也可以是颜色描述的字符串。 下面是字符串描述的颜色表。为了颜色间要有区分度。同时要求颜色比较明显&#xff0c;特意选择一些比较有代表性的颜色&#xff0c;以供使用&#xff08;颜色由于个人需要&#xff0c;除去了红色和绿…

SpringBoot启动图标替换-banner文件

1.banner.txt文件内容如下 ${AnsiColor.BRIGHT_YELLOW}${AnsiStyle.BOLD}_________ .__ __________ __ / _____/____________|__| ____ ____\______ \ ____ _____/ |_ \_____ \\____ \_ __ \ |/ \ / ___\| | _//…

实践|Linux 中查找和删除重复文件

动动发财的小手&#xff0c;点个赞吧&#xff01; 如果您习惯使用下载管理器从互联网上下载各种内容&#xff0c;那么组织您的主目录甚至系统可能会特别困难。 通常&#xff0c;您可能会发现您下载了相同的 mp3、pdf 和 epub&#xff08;以及各种其他文件扩展名&#xff09;并将…

tkinter文件对话框

文章目录 文件对话框文件对象文件类型其他参数 tkinter系列&#xff1a; GUI初步&#x1f48e;布局&#x1f48e;绑定变量&#x1f48e;绑定事件&#x1f48e;消息框扫雷小游戏&#x1f48e;强行表白神器 文件对话框 filedialog提供了多种与文件交互相关的对话框&#xff0c…

Linux:Shell编辑之文本处理器(awk)

目录 绪论 1、用法 1.1 格式选项 1.2 awk 常用内置变量 1.3 awk的打印功能 1.4 奇偶打印 1.5 awk运算 1.6 awk的内置函数&#xff1a;getline 1.7 文本过滤打印 1.8 awk条件判断打印 1.9 三元表达式&#xff0c;类似于java 1.10 awk的精确筛选 1.11 awk和tr比较改变…

【Django】无法从“django.utils.encoding”导入名称“force_text”

整晚处理 Django 的导入错误。 我将把它作为提醒&#xff0c;希望处于相同情况的人数会减少。 原因 某些软件包版本不支持Django 4 请看下表并决定Django和Python的版本 方案 如果出现难以响应&#xff0c;或者更改环境麻烦&#xff0c;请尝试以下操作 例如出现以下错误 …

【Github】SourceTree技巧汇总

sourceTree登录github账户 会跳转到浏览器端 按照Git Flow 初始化仓库分支 克隆远程仓库到本地 推送变更到远程仓库 合并分支 可以看到目前的本地分支&#xff08;main、iOS_JS&#xff09;和远程分支&#xff08;origin/main、origin/HEAD、origin/iOS_JS&#xff09;目前所处…

时间序列预测任务下探索深度学习参数对模型预测性能的影响

时间序列相关的项目在我之前的很多博文中都有涉及&#xff0c;覆盖的数据领域也是比较广泛的&#xff0c;很多任务或者是项目中往往是搭建出来指定的模型之后就基本完成任务了&#xff0c;比较少去通过实验的维度去探索分析不同参数对模型性能的影响&#xff0c;这两天正好有时…