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

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

news 2026/2/10 17:01:31

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

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

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	object	可选参数对象，用于配置渲染器的各种属性。常用参数包括：
antialias	bool	是否开启抗锯齿，默认为 `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)

参数	类型	描述
fov	float	视野角度，单位为度。
aspect	float	相机的宽高比，通常设置为 `window.innerWidth / window.innerHeight`。
near	float	近裁剪面距离，小于该距离的对象不会被渲染。
far	float	远裁剪面距离，大于该距离的对象不会被渲染。

方法

position.set(x, y, z): 设置相机的位置。
lookAt(vector): 设置相机的朝向。

AmbientLight (环境光)

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

构造器

new THREE.AmbientLight(color, intensity)

参数	类型	描述
color	color	光源的颜色，可以是十六进制颜色值或颜色名称。
intensity	float	光源的强度，默认为 1。

PlaneGeometry (平面几何体)

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

构造器

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

参数	类型	描述
width	float	平面的宽度。
height	float	平面的高度。
widthSegments	int	水平方向上的分段数，默认为 1。
heightSegments	int	垂直方向上的分段数，默认为 1。

Mesh (网格)

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

构造器

new THREE.Mesh(geometry, material)

参数	类型	描述
geometry	object	几何体对象。
material	object	材质对象。

MeshPhongMaterial (Phong材质)

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

构造器

new THREE.MeshPhongMaterial(parameters)

参数	类型	描述
map	texture	纹理贴图。
side	constant	渲染面的显示方式，可选值为 `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 ｜日常开发中常用属性详解前言一、控件属性（以 TextBox 控件为例）1.1 Text 属性：1.2 MaxLength 属性：1.3 ReadOnly 属性：1.4 IsPostBack 属性（在ASP.NET Web Forms 中）&#xf…...

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

vscode CMakeLists中对opencv eigen的引用方法

CMakeLists.txt 项目模式（只有一个main函数入口） 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方式实现插件管理插件 - 一份配置，离插件机制只有一步之遥插件 - 插件…...

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

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

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

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

单片机+Qt上位机

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

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

C++ 类和对象（中）

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

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

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

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

编程日记 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四大域。 （1）基本介绍。 （2）RequestScope。(请求域) （3）SessionScope。(会话域) （4）ApplicationScope。(应用域) （5）PageScope。(页面域) 二、Ht…...

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

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

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

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

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

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

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

2024.11.29——[HCTF 2018]WarmUp 1

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

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

AGameModeBase和游戏模式方法

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

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

Swift 扩展

Swift 扩展 Swift 是一种强大的编程语言，由苹果公司开发，用于iOS、macOS、watchOS和tvOS应用程序的开发。自2014年发布以来，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实践

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

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

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

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

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

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

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

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

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...

编程新知 2026/1/28 21:15:38

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位）三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录一、开启慢查询日志，定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48

从零开始了解数据采集（二十八）——制造业数字孪生

近年来，我国的工业领域正经历一场前所未有的数字化变革，从“双碳目标”到工业互联网平台的推广，国家政策和市场需求共同推动了制造业的升级。在这场变革中，数字孪生技术成为备受关注的关键工具，它不仅让企业“看见”设…...

编程新知 2026/2/6 5:58:12

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览研究背景研究问题：这篇文章要解决的问题是当前大型语言模型（LLMs）在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色，但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成（RA…...

编程新知 2026/1/27 18:21:00

宠物车载安全座椅市场报告：解读行业趋势与投资前景

一、什么是宠物车载安全座椅？ 宠物车载安全座椅是一种专为宠物设计的车内固定装置，旨在保障宠物在乘车过程中的安全性与舒适性。它通常由高强度材料制成，具备良好的缓冲性能，并可通过安全带或ISOFIX接口固定于车内。近年来&…...

编程新知 2026/1/8 16:11:22

World-writable config file /etc/mysql/mysql.conf.d/my.cnf is ignored

https://stackoverflow.com/questions/53741107/mysql-in-docker-on-ubuntu-warning-world-writable-config-file-is-ignored 修改权限 -> 重启mysql # 检查字符集配置 SHOW VARIABLES WHERE Variable_name IN (character_set_server, character_set_database ); --------…...

编程新知 2026/2/8 4:36:56

Linux--vsFTP配置篇

一、vsFTP 简介 vsftpd（Very Secure FTP Daemon）是 Linux 下常用的 FTP 服务程序，具有安全性高、效率高和稳定性好等特点。支持匿名访问、本地用户登录、虚拟用户等多种认证方式，并可灵活控制权限。二、安装与启动 1. 检查是否已…...

编程新知 2025/12/14 13:07:37

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

属性

PerspectiveCamera (透视相机)

构造器

方法

AmbientLight (环境光)

构造器

PlaneGeometry (平面几何体)

构造器

Mesh (网格)

构造器

MeshPhongMaterial (Phong材质)

构造器

ImageUtils (图像工具)

方法

动画

方法

示例代码

演示链接

相关文章：