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

Three.js-实现加载图片并旋转

1.实现效果

2. 实现步骤

2.1创建场景

const scene = new THREE.Scene();

2.2添加相机

说明:

  • fov(视场角):视场角决定了相机的视野范围,即相机可以看到的角度范围。较大的视场角表示更广阔的视野,但可能会导致失真。一般建议设置在 45° 到 90° 之间。
  • aspect(纵横比):纵横比表示了渲染区域的宽度和高度之比。通常设置为渲染区域的宽度除以高度,以保持图像不变形。
  • near(近裁剪面):近裁剪面决定了相机能够看到的最近的物体的距离。通常设置为一个正数,表示相机距离近裁剪面的距离。
  • far(远裁剪面):远裁剪面决定了相机能够看到的最远的物体的距离。通常设置为一个正数,表示相机距离远裁剪面的距离。
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

2.3添加网格

说明:创建几何图形和图形的材质(几何图形必须要材质)。下面创建了矩阵图形。

const textureMaterial = new THREE.MeshBasicMaterial({map: texture});
const geometry = new THREE.PlaneGeometry(1, 1);
mesh = new THREE.Mesh(geometry, textureMaterial);

2.4渲染动画

const renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, height);

2.5放入Dom结构

  document.querySelector("#renderBox").appendChild(renderer.domElement);

3.源代码

<template><div id="renderBox"></div>
</template><script setup>
import * as THREE from 'three';
import {onMounted} from "vue";
// 浏览器可操作的宽度,高度
const width = window.innerWidth, height = window.innerHeight;const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry(1, 1);
let mesh;
const textureLoader = new THREE.TextureLoader().load("/data/map/scene-bg2.png",function (texture) {// 纹理加载完成后创建材质,map:texture实际就是贴在上面的const textureMaterial = new THREE.MeshBasicMaterial({map: texture});// 创建一个网格对象mesh = new THREE.Mesh(geometry, textureMaterial);// 将网格对象添加到场景中scene.add(mesh);}
);
const renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, height);
renderer.setAnimationLoop(animation);function animation(time) {if (mesh) {// 每一帧增加网格对象的旋转角度,实现 360 度旋转效果mesh.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0.02);}// 渲染图形renderer.render(scene, camera);}const init = () => {document.querySelector("#renderBox").appendChild(renderer.domElement);
}onMounted(() => {init()
})
</script><style></style>

4.素材图片

 

相关文章:

Three.js-实现加载图片并旋转

1.实现效果 2. 实现步骤 2.1创建场景 const scene new THREE.Scene(); 2.2添加相机 说明&#xff1a; fov&#xff08;视场角&#xff09;&#xff1a;视场角决定了相机的视野范围&#xff0c;即相机可以看到的角度范围。较大的视场角表示更广阔的视野&#xff0c;但可能…...

ACM实训第25天

第四套 第一道&#xff08;修改&#xff09; #include<stdio.h> #include<string.h> int cnt[10]; void count_digits(int n,int* cnt){for(int i1;i<n;i){int numi;while(num){cnt[num%10];num/10;}} } int main(){int t;scanf("%d\n",&t);whi…...

GraphQL(2):使用express和GraphQL编写helloworld

1 安装express、graphql以及express-graphql 在项目的目录下运行一下命令。 npm init -y npm install express graphql express-graphql -S 2 新建helloworld.js 代码如下&#xff1a; const express require(express); const {buildSchema} require(graphql); const grap…...

Vue中的计算属性和侦听器:提升响应式编程的艺术

引言 Vue.js是一个用于构建用户界面的渐进式框架&#xff0c;它的核心特性之一是响应式编程。Vue通过数据绑定和响应式系统&#xff0c;使得开发者能够以声明式的方式处理数据变化。在Vue中&#xff0c;计算属性&#xff08;Computed Properties&#xff09;和侦听器&#xff…...

JavaScript倍速播放视频

F12打开开发者工具&#xff0c;打开控制台&#xff0c;输入这行代码&#xff0c;视频即可加速播放&#xff0c; 可以调整倍速&#xff08;2&#xff0c;4&#xff0c;8&#xff0c;16&#xff09; document. getElementsByTagName("video")[0]. playbackRate16...

ER图介绍

在数据库设计和建模中&#xff0c;实体-关系图&#xff08;Entity-Relationship Diagram&#xff0c;简称ER图&#xff09;是一个至关重要的工具。ER图通过图形化的方式描述了现实世界中的实体&#xff08;Entity&#xff09;及其之间的关系&#xff08;Relationship&#xff0…...

Oracle通过datax迁移线上表到历史库

历史数据迁移 线上库数据增长迅速&#xff0c;需要定期清理历史数据&#xff0c;因为异地灾备&#xff0c;但是带宽很小&#xff0c;不能使用数据泵直接往历史库导数&#xff0c;会导致本地机房到灾备机房的带宽被占满&#xff0c;调研过flink、golden gate、datax&#xff0c…...

java基础-深拷贝和浅拷贝

java中有一个概念叫深拷贝和浅拷贝&#xff0c;那这两个是什么意思呢&#xff1f;其实你可以对比一下c中的传值和传引用的问题。 深拷贝 即两个相同的对象地址不同&#xff0c;比如对象A通过拷贝出来对象B&#xff0c;在对B对象进行操作时不会影响到A对象的内容。 浅拷贝 和…...

Java数组操作

数组拓展 1.1 数组拷贝 需求&#xff1a;定义一个方法arraycopy, 从指定源数组中从指定的位置开始复制指定数量的元素到目标数组的指定位置。 1.2. 排序操作 需求&#xff1a;完成对int[] arr new int[]{2,9,6,7,4,1}数组元素的升序排序操作. 1.2.1.冒泡排序 对未排序的各元素…...

C++vector及其实现

第一个参数是类型(可以是自定义也可以是内置类型) 相当于生成一个该类型的数组 allocator是空间配置器 遍历 1.下标遍历 2.迭代器遍历 3.范围for 对象访问 有名对象访问 匿名对象访问 隐式类型转换 成员函数 sort 使用sort需要包含头文件algorithm eg. sort的使用非…...

路由策略实验1

先把地址全部配通 对R1 对R2 对R4 对R3 对R5 对R6 对R7 然后起路由协议 对R1 对R2 对R3 对R4 对R5 对R6 对R7...

含情脉脉的进程

冯诺依曼体系结构 一个计算机在工作的时候是怎样的呢&#xff1f; 我们所认识的计算机都是由一个个的硬件组件组成&#xff1a; 输入设备&#xff1a;键盘、鼠标、摄像头、话筒、磁盘、网卡 中央处理器&#xff08;CPU&#xff09;&#xff1a;运算器、控制器 输出设备&#x…...

重复文件怎么查找并清理?电脑重复文件清理工具分享:4个

在日常使用电脑的过程中&#xff0c;我们不可避免地会遇到各种重复文件的问题。这些重复文件不仅占据了宝贵的存储空间&#xff0c;还可能导致系统性能下降&#xff0c;甚至引发一些不必要的问题。因此&#xff0c;如何有效地查找并清理这些重复文件成为了许多用户关注的焦点。…...

Java中连接Mongodb进行操作

文章目录 1.引入Java驱动依赖2.快速开始2.1 先在monsh连接建立collection2.2 java中快速开始2.3 Insert a Document2.4 Update a Document2.5 Find a Document2.6 Delete a Document 1.引入Java驱动依赖 注意&#xff1a;启动服务的时候需要加ip绑定 需要引入依赖 <dependen…...

LabVIEW远程开发与调试

在现代项目开发中&#xff0c;远程开发与调试已经成为一种常见的模式&#xff0c;特别是在使用LabVIEW进行工程项目时。本文将详细分析LabVIEW远程开发与调试的优缺点&#xff0c;并从多个角度说明如何建议客户采用这种方式&#xff0c;以提高项目效率和质量。 优点 灵活性和便…...

C/C++|基于回调函数实现异步操作

首先&#xff0c;要搞懂一点&#xff0c;异步操作本质上也是并发&#xff0c;我们想要在线程级别实现异步并发基本就靠三种方式&#xff1a; 多线程并发回调函数协程 今天我们讨论的是回调函数&#xff0c;我们如何通过回调函数来实现异步操作呢&#xff1f; 非阻塞I/O操作回…...

Mac上搭建Python环境:深入探索与高效实践

Mac上搭建Python环境&#xff1a;深入探索与高效实践 在Mac上搭建Python环境&#xff0c;对于开发者来说是一个既具挑战性又充满乐趣的过程。本文将从四个方面、五个方面、六个方面和七个方面详细阐述如何在Mac上成功搭建Python环境&#xff0c;并帮助您更好地理解和应用Pytho…...

数据标准的制定落地

目录 什么是数据标准 基本定义 目的 数据标准体系分类 从内容层面分类 从管理视角分类 从面向的对象分类 从数据结构的角度分类 数据标准价值 业务价值 技术价值 管理价值 数据标准和数据治理的关系 数据标准在数据治理各项任务中的作用 数据标准与主数据 数据…...

微信小程序基础 -- 小程序UI组件(5)

小程序UI组件 1.小程序UI组件概述 开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html 什么是组件&#xff1a; 组件是视图层的基本组成单元。 组件自带一些功能与微信风格一致的样式。 一个组件通常包括 开始标签 和 结…...

Linux shell编程学习笔记55:hostname命令——获取或设置主机名,显示IP地址和DNS、NIS

0 前言 2024年的网络安全检查又开始了&#xff0c;对于使用基于Linux的国产电脑&#xff0c;我们可以编写一个脚本来收集系统的有关信息。其中主机名也是我们要收集的信息之一。 1. hostname命令 的功能、格式和选项说明 我们可以使用命令 hostname --help 来查看hostname命令…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...