当前位置: 首页 > news >正文

【THREE.JS学习(1)】绘制一个可以旋转、放缩的立方体

学习新技能,做一下笔记。

在使用ThreeJS的时候,首先创建一个场景

const scene = new THREE.Scene();

接着,创建一个相机

其中,THREE.PerspectiveCamera()四个参数分别为:

1.fov 相机视锥体竖直方向视野角度,默认值50 =》 值越大,表示视角越大,离得更远,看得更多

2.aspect 相机视锥体水平方向和竖直方向长度比,默认值1

3.near 相机视锥体近裁截面相对相机距离,默认值0.1

4.far 相机视锥体远裁截面相对相机距离,far-near构成了视锥体高度方向。默认值2000

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.z = 5;//相机位置

再创建一个渲染器,将结果添加至html中

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

上述三步建立好了THREEJS中的场景、相机以及渲染器,接下来需要构建什么模型就创建什么。

创建一个立方体,并将其加入到场景(Scene)中

const geometry = new THREE.BoxGeometry();//立方体对象
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })//材质
const cube = new THREE.Mesh(geometry,material);//网格模型
scene.add(cube)

以上就实现了一个基本图形的创建。

通过执行渲染操作,能够获得结果。

renderer.render(scene, camera); //执行渲染操作

接下来就是增加交互功能。

let isDragging = false;
let previousMousePosition = {x:0,y:0    
}//鼠标移动 执行下面操作
const onMouseMove = (event) => {const deltaMove = {x: event.offsetX - previousMousePosition.x,y: event.offsetY - previousMousePosition.y};//当拖拽时,执行下面操作if (isDragging) {const deltaRotationQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(deltaMove.y * (Math.PI / 180),deltaMove.x * (Math.PI / 180),0,'XYZ'));cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);}previousMousePosition = {x: event.offsetX,y: event.offsetY};
};//鼠标状态会改变isDragging的值
const onMouseDown = (event) => {isDragging = true;
};const onMouseUp = (event) => {isDragging = false;
};//滚轮执行缩放
const onWheel = (event) => {camera.position.z += event.deltaY * 0.01;
};//监听事件
renderer.domElement.addEventListener('mousedown', onMouseDown);
renderer.domElement.addEventListener('mouseup', onMouseUp);
renderer.domElement.addEventListener('mousemove', onMouseMove);
renderer.domElement.addEventListener('wheel', onWheel);// 渲染场景
const animate = () => {requestAnimationFrame(animate);renderer.render(scene, camera);
};animate();

相关文章:

【THREE.JS学习(1)】绘制一个可以旋转、放缩的立方体

学习新技能,做一下笔记。在使用ThreeJS的时候,首先创建一个场景const scene new THREE.Scene();接着,创建一个相机其中,THREE.PerspectiveCamera()四个参数分别为:1.fov 相机视锥体竖直方向视野…...

数仓实战 - 滴滴出行

项目大致流程: 1、项目业务背景 1.1 目的 本案例将某出行打车的日志数据来进行数据分析,例如:我们需要统计某一天订单量是多少、预约订单与非预约订单的占比是多少、不同时段订单占比等 数据海量 – 大数据 hive比MySQL慢很多 1.2 项目架…...

python虚拟环境与环境变量

一、环境变量 1.环境变量 在命令行下,使用可执行文件,需要来到可执行文件的路径下执行 如果在任意路径下执行可执行文件,能够有响应,就需要在环境变量配置 2.设置环境变量 用户变量:当前用户登录到系统,…...

BeautifulSoup文档4-详细方法 | 用什么方法对文档树进行搜索?

4-详细方法 | 用什么方法对文档树进行搜索?1 过滤器1.1 字符串1.2 正则表达式1.3 列表1.4 True1.5 可以自定义方法2 find_all()2.1 参数原型2.2 name参数2.3 keyword 参数2.4 string 参数2.5 limit 参数2.6 recursive 参数3 find()4 find_parents()和find_parent()5…...

初识Tkinter界面设计

目录 前言 一、初识Tkinter 二、Label控件 三、Button控件 四、Entry控件 前言 本文简单介绍如何使用Python创建一个界面。 一、初识Tk...

软件测试面试题中的sql题目你会做吗?

目录 1.学生表 2.一道SQL语句面试题,关于group by表内容: 3.表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列 4. 5.姓名:name 课程:subject 分数&…...

VS实用调试技巧

一.什么是BUG🐛Bug一词的原意是虫子,而在电脑系统或程序中隐藏着的一些未被发现的缺陷或问题,人们也叫它"bug"。这是为什么呢?这就要追溯到一个程序员与飞蛾的故事了。Bug的创始人格蕾丝赫柏(Grace Murray H…...

通俗易懂理解三次握手、四次挥手(TCP)

文章目录1、通俗语言理解1.1 三次握手1.2 四次挥手2、进一步理解三次握手和四次挥手2.1 三次握手2.2 四次挥手1、通俗语言理解 1.1 三次握手 C:客户端 S:服务器端 第一次握手: C:在吗?我要和你建立连接。 第二次握手&#xff…...

1.1 什么是并发

1.1 什么是并发 并发:指两个或更多独立的活动同时发生。并发在生活中随处可见。我们可以一边走路一边说话,也可以两只手同时做不同的动作。 1.1.1 计算机系统中的并发 当我们提到计算机术语的“并发”,指的是在单个系统里同时执行多个独立…...

万字讲解你写的代码是如何跑起来的?

今天我们来思考一个简单的问题&#xff0c;一个程序是如何在 Linux 上执行起来的&#xff1f; 我们就拿全宇宙最简单的 Hello World 程序来举例。 #include <stdio.h> int main() {printf("Hello, World!\n");return 0; } 我们在写完代码后&#xff0c;进行…...

034.Solidity入门——21不可变量

Solidity 中的不可变量是在编译时就被确定的常量&#xff0c;也称为常量变量&#xff08;constant variable&#xff09;或只读变量&#xff08;read-only variable&#xff09;。这些变量在定义时必须立即初始化&#xff0c;并且在整个合约中都无法被修改&#xff0c;可以在函…...

Vulnhub 渗透练习(四)—— Acid

环境搭建 环境下载 kail 和 靶机网络适配调成 Nat 模式&#xff0c;实在不行直接把网络适配还原默认值&#xff0c;再重试。 信息收集 主机扫描 没扫到&#xff0c;那可能端口很靠后&#xff0c;把所有端口全扫一遍。 发现 33447 端口。 扫描目录&#xff0c;没什么有用的…...

C++ 在线工具

online编译器https://godbolt.org/Online C Compiler - online editor (onlinegdb.com) https://www.onlinegdb.com/online_c_compilerC Shell (cpp.sh) https://cpp.sh/在线文档Open Standards (open-std.org)Index of /afs/cs.cmu.edu/academic/class/15211/spring.96/wwwC P…...

使用MMDetection进行目标检测、实例和全景分割

MMDetection 是一个基于 PyTorch 的目标检测开源工具箱&#xff0c;它是 OpenMMLab 项目的一部分。包含以下主要特性&#xff1a; 支持三个任务 目标检测&#xff08;Object Detection&#xff09;是指分类并定位图片中物体的任务实例分割&#xff08;Instance Segmentation&a…...

使用ThreadLocal实现当前登录信息的存取

有志者&#xff0c;事竟成 文章持续更新&#xff0c;可以关注【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】获取福利&#xff0c;回复【项目】获取项目源码&#xff0c;回复【简历模板】获取简历模板&#xff0c;回复【学习路线图】获取学习路线图。 文章目录一、使用…...

高通平台开发系列讲解(Android篇)AudioTrack音频流数据传输

文章目录 一、音频流数据传输通道创建1.1、流程描述1.2、流程图解二、音频数据传输2.1、流程描述2.2、流程图解沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要图解AudioTrack音频流数据传输 。 一、音频流数据传输通道创建 1.1、流程描述 AudioTrack在set函…...

BUUCTF-firmware1

题目下载&#xff1a;下载 新题型&#xff0c;记录一下 题目给出了flag形式&#xff0c;md5{网址&#xff1a;端口}&#xff0c;下载发现是一个.bin文件 二进制文件&#xff0c;其用途依系统或应用而定。一种文件格式binary的缩写。一个后缀名为".bin"的文件&#x…...

【C++之容器篇】二叉搜索树的理论与使用

目录前言一、二叉搜索树的概念二、二叉搜素树的模拟实现&#xff08;增删查非递归实现&#xff09;1. 二叉搜素树的结点2. 二叉搜索树的实现&#xff08;1&#xff09;. 二叉搜索树的基本结构&#xff08;2&#xff09;构造函数&#xff08;3&#xff09;查找函数&#xff08;4…...

爬虫神级解析工具之XPath:用法详解及实战

一、XPATH是什么 Xpath最初被设计用来搜寻XML文档,但它同样适用于HTML文档的搜索。通过简洁明了的路径选择表达式,它提供了强大的选择功能;同时得益于其内置的丰富的函数,它可以匹配和处理字符串、数值、时间等数据格式,几乎所有节点我们都可以通过Xpath来定位。 在Pyth…...

Markdown编辑器

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…...

Vue中实现动态标签页的切换优化与状态管理

1. 动态标签页的核心需求与实现思路 在后台管理系统这类多页面应用中&#xff0c;动态标签页几乎是标配功能。想象一下你正在使用某电商后台&#xff0c;同时开着商品管理、订单处理和用户分析三个页面&#xff0c;这时候标签页的流畅切换和状态保持就显得尤为重要。 我经历过一…...

OpenClaw多场景实战:Qwen3-VL:30B在飞书中的5个应用案例

OpenClaw多场景实战&#xff1a;Qwen3-VL:30B在飞书中的5个应用案例 1. 为什么选择OpenClawQwen3-VL:30B组合 去年我在团队内部尝试搭建智能助手时&#xff0c;发现市面上大多数方案要么需要将敏感数据上传到第三方平台&#xff0c;要么功能过于单一。直到遇到OpenClaw这个开…...

抖音高效采集与无水印提取工具使用指南

抖音高效采集与无水印提取工具使用指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作与研究领域&#xff0c;高效的抖音资源管理已成为提升工作流的关键环节。本文将全面介绍一款功能强大的…...

Translumo完整指南:高效实时屏幕翻译工具解决你的多语言障碍难题

Translumo完整指南&#xff1a;高效实时屏幕翻译工具解决你的多语言障碍难题 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Translumo …...

告别硬编码路径:手把手教你用Go cgo优雅集成第三方C库(Windows/MinGW环境)

告别硬编码路径&#xff1a;用Go cgo优雅集成第三方C库的工程实践 在混合编程的世界里&#xff0c;Go与C/C的联姻既带来了性能红利&#xff0c;也伴随着路径管理的噩梦。当项目需要引用多个第三方库时&#xff0c;硬编码的绝对路径会让构建脚本变得脆弱不堪&#xff0c;团队协作…...

高效转换CSDN博客为Markdown:自动化工具与批量处理技巧

1. 为什么需要将CSDN博客转为Markdown格式 作为一个写了多年技术博客的老鸟&#xff0c;我深刻理解Markdown格式对技术写作的重要性。CSDN的富文本编辑器虽然方便&#xff0c;但存在几个致命问题&#xff1a;格式锁定在平台内、排版灵活性差、迁移成本高。而Markdown作为轻量级…...

PyTorch 2.8 + CUDA 12.4镜像实战教程:适配10核CPU+120GB内存的完整配置

PyTorch 2.8 CUDA 12.4镜像实战教程&#xff1a;适配10核CPU120GB内存的完整配置 1. 镜像概述与环境准备 1.1 核心特性介绍 这个深度优化镜像基于RTX 4090D 24GB显卡和CUDA 12.4驱动构建&#xff0c;专为高性能深度学习任务设计。主要特点包括&#xff1a; 硬件适配&#…...

RTX 4090D专属PyTorch 2.8镜像:支持torch.distributed多卡训练教程

RTX 4090D专属PyTorch 2.8镜像&#xff1a;支持torch.distributed多卡训练教程 1. 镜像环境介绍 1.1 硬件与软件配置 这个专为RTX 4090D优化的PyTorch 2.8镜像提供了完整的深度学习训练环境&#xff0c;主要配置包括&#xff1a; 显卡支持&#xff1a;专为RTX 4090D 24GB显…...

AI 辅助开发实战:基于低代码与智能生成的五金店管理系统毕设架构设计

最近在帮学弟学妹们看毕业设计&#xff0c;发现“五金店管理系统”是个高频选题。但很多人做着做着就陷入了“增删改查”的泥潭&#xff0c;前端界面简陋&#xff0c;业务逻辑也写得七零八落&#xff0c;最后答辩时演示效果平平&#xff0c;技术深度更是无从谈起。这让我开始思…...

SpringBoot+Vue 毕业设计效率提升实战:从脚手架到自动化部署的全链路优化

SpringBootVue 毕业设计效率提升实战&#xff1a;从脚手架到自动化部署的全链路优化 毕业设计是每个计算机相关专业学生必须跨越的一道坎。回想我自己的经历&#xff0c;以及身边同学的故事&#xff0c;一个普遍的现象是&#xff1a;大家往往在技术选型和环境搭建上就耗费了大量…...