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

19. Three.js案例-创建一个带有纹理映射的旋转平面

news 2025/7/15 5:01:09

19. Three.js案例-创建一个带有纹理映射的旋转平面

实现效果

效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它利用 WebGL 技术在浏览器中绘制 3D 图形。

构造器
new THREE.WebGLRenderer(parameters)
参数类型描述
parametersobject可选参数对象，用于配置渲染器的各种属性。常用参数包括：
antialiasbool是否开启抗锯齿，默认为 false。开启后可以提高图像质量，但会增加性能消耗。
方法
  • setSize(width, height): 设置渲染器的尺寸。
  • render(scene, camera): 渲染指定的场景和相机。

Scene (场景)

Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。

构造器
new THREE.Scene()
属性
  • background: 场景的背景颜色或环境贴图。

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于模拟人眼视角的相机类。

构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数类型描述
fovfloat视野角度，单位为度。
aspectfloat相机的宽高比，通常设置为 window.innerWidth / window.innerHeight。
nearfloat近裁剪面距离，小于该距离的对象不会被渲染。
farfloat远裁剪面距离，大于该距离的对象不会被渲染。
方法
  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向。

AmbientLight (环境光)

AmbientLight 是 Three.js 中用于模拟环境光的光源类。环境光会使场景中的所有物体均匀受光。

构造器
new THREE.AmbientLight(color, intensity)
参数类型描述
colorcolor光源的颜色，可以是十六进制颜色值或颜色名称。
intensityfloat光源的强度，默认为 1。

PlaneGeometry (平面几何体)

PlaneGeometry 是 Three.js 中用于创建平面几何体的类。

构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数类型描述
widthfloat平面的宽度。
heightfloat平面的高度。
widthSegmentsint水平方向上的分段数，默认为 1。
heightSegmentsint垂直方向上的分段数，默认为 1。

Mesh (网格)

Mesh 是 Three.js 中用于组合几何体和材质的类。

构造器
new THREE.Mesh(geometry, material)
参数类型描述
geometryobject几何体对象。
materialobject材质对象。

MeshPhongMaterial (Phong材质)

MeshPhongMaterial 是 Three.js 中用于创建 Phong 照明模型的材质类。

构造器
new THREE.MeshPhongMaterial(parameters)
参数类型描述
maptexture纹理贴图。
sideconstant渲染面的显示方式，可选值为 THREE.FrontSide、THREE.BackSide 和 THREE.DoubleSide。

ImageUtils (图像工具)

ImageUtils 是 Three.js 中用于加载和处理图像的工具类。

方法
  • loadTexture(url): 加载指定 URL 的图像并返回一个 Texture 对象。

动画

requestAnimationFrame 是浏览器提供的 API，用于请求浏览器在下一次重绘之前调用指定的回调函数。

方法
  • requestAnimationFrame(callback): 请求浏览器在下一次重绘之前调用指定的回调函数。

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();myScene.background = new THREE.Color('white');// 创建相机var myCamera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 1, 1000);myCamera.position.set(0, 0, 400);myScene.add(myCamera);// 添加环境光myScene.add(new THREE.AmbientLight(0xffffff));// 创建平面var myPlaneGeometry = new THREE.PlaneGeometry(160, 240, 5, 5);var myMap = THREE.ImageUtils.loadTexture("images/img137.jpg");var myPlane = new THREE.Mesh(myPlaneGeometry,new THREE.MeshPhongMaterial({map: myMap, side: THREE.DoubleSide}));myScene.add(myPlane);// 渲染平面animate();function animate() {myRenderer.render(myScene, myCamera);myPlane.rotation.y += 0.01;requestAnimationFrame(animate);}
</script>
</body>
</html>

演示链接

示例链接

相关文章：

19. Three.js案例-创建一个带有纹理映射的旋转平面

19. Three.js案例-创建一个带有纹理映射的旋转平面 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它利用 WebGL 技术在浏览器中绘制 3D 图形。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobj…...

编程日记 2024/12/9 11:28:02

ASP.NET｜日常开发中常用属性详解

JAVA &#xff5c;日常开发中常用属性详解 前言一、控件属性&#xff08;以 TextBox 控件为例&#xff09;1.1 Text 属性&#xff1a;1.2 MaxLength 属性&#xff1a;1.3 ReadOnly 属性&#xff1a;1.4 IsPostBack 属性&#xff08;在ASP.NET Web Forms 中&#xff09;&#xf…...

编程日记 2024/12/9 11:27:00

vscode CMakeLists中对opencv eigen的引用方法

CMakeLists.txt 项目模式&#xff08;只有一个main函数入口&#xff09; cmake_minimum_required(VERSION 3.5)project(vsin01 VERSION 0.1 LANGUAGES CXX)set(CMAKE_CXX_STANDARD 17) set(CMAKE_CXX_STANDARD_REQUIRED ON)set(OpenCV_DIR G:/MinGW_Opencv/opencv4.10/opencv…...

编程日记 2024/12/9 11:25:58

使用Goland对6.5840项目进行go build出现异常

使用Goland对6.5840项目进行go build出现异常 Lab地址: https://pdos.csail.mit.edu/6.824/labs/lab-mr.html项目地址: git://g.csail.mit.edu/6.5840-golabs-2024 6.5840运行环境: mac系统 goland git clone git://g.csail.mit.edu/6.5840-golabs-2024 6.5840 cd 6.5840/src…...

编程日记 2024/12/9 11:24:57

Plugin - 插件开发06_开源项目JPom中的插件实现机制

文章目录 Pre工程结构概述1. 插件接口与实现分析2. 插件工厂初始化分析3. 插件项包装类解析4. 插件工厂方法解析5. 插件加载与资源释放机制6. 实现类小结附PluginFactory Pre 插件 - 通过SPI方式实现插件管理 插件 - 一份配置&#xff0c;离插件机制只有一步之遥 插件 - 插件…...

编程日记 2024/12/9 11:23:55

关于成功插入 SQLite 但没有数据的问题

背景 技术栈&#xff1a;SpringBoot Mybatis-flex SQLite 项目中集成了SQLite&#xff0c;配置如下&#xff1a; spring:datasource:url: jdbc:sqlite::resource:db/project.dbdriver-class-name: org.sqlite.JDBC在进行测试时&#xff0c;使用Mybatis-flex往表中插入数据&…...

编程日记 2024/12/9 11:22:54

单片机+Qt上位机

目录 一、引言 通信方式 优势 案例 常见问题及解决方法 二、单片机与 Qt 上位机的通信方式 &#xff08;一&#xff09;使用 QT 上位机和 STC 单片机实现串口通信 三、单片机 Qt 上位机的优势 &#xff08;一&#xff09;高效便捷的 USB 通信上位机解决方案 &#xf…...

编程日记 2024/12/9 11:18:47

C++ 类和对象（中）

1.类的六个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;其实并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下六个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编…...

编程日记 2024/12/9 11:10:31

在做题中学习（79）：最小K个数

解法&#xff1a;快速选择算法 说明&#xff1a;堆排序也是经典解决问题的算法&#xff0c;但时间复杂度为&#xff1a;O(NlogK)&#xff0c;K为k个元素 而将要介绍的快速选择算法的时间复杂度为: O(N) 先看我的前两篇文章&#xff0c;分别学习&#xff1a;数组分三块&#…...

编程日记 2024/12/9 11:08:26

spark3 sql优化：同一个表关联多次，优化方案

目录 1.合并查询2.使用 JOIN 条件的过滤优化3.使用 Map-side Join 或 Broadcast Join4.使用 Partitioning 和 Bucketing5.利用 DataFrame API 进行优化假设 A 和 B 已经加载为 DataFramePerform left joins with specific conditions6.使用缓存或持久化7.避免笛卡尔积总结 1.合…...

编程日记 2024/12/9 11:01:15

JavaWeb学习(4)（四大域、HttpSession原理(面试)、SessionAPI、Session实现验证码功能）

目录 一、web四大域。 &#xff08;1&#xff09;基本介绍。 &#xff08;2&#xff09;RequestScope。(请求域) &#xff08;3&#xff09;SessionScope。(会话域) &#xff08;4&#xff09;ApplicationScope。(应用域) &#xff08;5&#xff09;PageScope。(页面域) 二、Ht…...

编程日记 2024/12/9 11:00:13

Ubuntu22.04系统源码编译OpenCV 4.10.0（包含opencv_contrib）

因项目需要使用不同版本的OpenCV&#xff0c;而本地的Ubuntu22.04系统装了ROS2自带OpenCV 4.5.4的版本&#xff0c;于是编译一个OpenCV 4.10.0&#xff08;带opencv_contrib&#xff09;版本&#xff0c;给特定的项目使用&#xff0c;这就不用换个设备后重新安装OpenCV 了&…...

编程日记 2024/12/9 10:57:10

【Unity高级】在编辑器中如何让物体围绕一个点旋转固定角度

本文介绍如何在编辑器里让物体围绕一个点旋转固定角度&#xff0c;比如上图里的Cube是围绕白色圆盘的中心旋转45度的。 目标&#xff1a; 创建一个在 Unity 编辑器中使用的旋转工具&#xff0c;使开发者能够在编辑模式下快速旋转一个物体。 实现思路&#xff1a; 编辑模式下…...

编程日记 2024/12/9 10:54:06

2024.11.29——[HCTF 2018]WarmUp 1

拿到题&#xff0c;发现是一张图&#xff0c;查看源代码发现了被注释掉的提示 <!-- source.php--> step 1 在url传参看看这个文件&#xff0c;发现了这道题的源码 step 2 开始审计代码&#xff0c;分析关键函数 //mb_strpos($haystack,$needle,$offset,$encoding):int|…...

编程日记 2024/12/9 10:53:04

AGameModeBase和游戏模式方法

AGameModeBase和游戏模式方法有着密切的关系&#xff1a; AGameModeBase是游戏模式的基础类&#xff1a; 它提供了控制游戏规则的基本框架包含了一系列管理游戏流程的核心方法是所有自定义游戏模式类的父类 主要的游戏模式方法包括&#xff1a; // 游戏初始化时调用 virtua…...

编程日记 2024/12/9 10:52:00

Swift 扩展

Swift 扩展 Swift 是一种强大的编程语言&#xff0c;由苹果公司开发&#xff0c;用于iOS、macOS、watchOS和tvOS应用程序的开发。自2014年发布以来&#xff0c;Swift因其易于阅读和编写的语法、现代化的设计以及出色的性能而广受欢迎。本文将探讨Swift的一些关键特性&#xff…...

编程日记 2024/12/9 10:50:58

【NebulaGraph】官方查询语言nGQL教程1 (四)

【NebulaGraph】官方查询语言nGQL教程1 1. 课程信息2. 查找路径FIND PATH2.1 补充说明FIND PATH2.2 例子 1. 课程信息 课程地址: https://www.bilibili.com/video/BV1PT411P7w8/?spm_id_from333.337.search-card.all.click&vd_source240d9002f7c7e3da63cd9a975639409a …...

编程日记 2024/12/9 10:49:57

阿里云负载均衡SLB实践

基于上篇文章继续&#xff0c;如果你使用的是阿里云等云平台&#xff0c;通过配置nginxkeepAlived行不通&#xff0c;因为阿里云服务器不支持你虚拟出ip提供给外部访问&#xff0c;需要使用阿里云的负载均衡产品 对应的产品有三个系列 1、应用场景 ALB: 主要是对应应用层的7层…...

编程日记 2024/12/9 10:48:55

鸿蒙技术分享：❓❓[鸿蒙应用开发]怎么更好的管理模块生命周期？

鸿蒙HarmonyOS NEXT应用开发架构设计-模块生命周期管理 模块化开发 模块化开发已经是应用开发中的一个共识&#xff0c;一般对于公司级的应用开发&#xff0c;都会考虑是否可以进行模块化开发。 HarmonyOS NEXT系统应用开发目前使用的Stage模型其实就有涉及模块化开发的部分…...

编程日记 2024/12/9 10:46:53

深度解析 Ansible：核心组件、配置、Playbook 全流程与 YAML 奥秘(上)

文章目录 一、ansible的主要组成部分二、安装三、相关文件四、ansible配置文件五、ansible 系列 一、ansible的主要组成部分 ansible playbook&#xff1a;任务剧本&#xff08;任务集&#xff09;&#xff0c;编排定义ansible任务集的配置文件&#xff0c;由ansible顺序依次执…...

编程日记 2024/12/9 10:44:50

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/7/10 15:49:28

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/6/27 0:52:23

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/7/14 1:18:35

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/7/12 9:26:29

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/7/10 11:47:38

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/7/13 12:22:19

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/7/5 23:00:12

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/7/13 23:37:54

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/7/12 0:28:59

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/7/11 19:32:48