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

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

news 2026/2/10 12:47:29

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

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。可以把它想象成你的 AI 模型和想要使用它…...

编程新知 2026/2/10 5:21:30

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。腐蚀…...

编程新知 2026/2/8 22:00:17

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2026/1/23 10:51:19

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/9 18:50:34

MySQL：分区的基本使用

目录一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...

编程新知 2026/2/2 18:52:32

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...

编程新知 2026/2/4 19:29:38

企业大模型服务合规指南：深度解析备案与登记制度

伴随AI技术的爆炸式发展，尤其是大模型（LLM）在各行各业的深度应用和整合，企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者，还是积极拥抱AI转型的传统企业，在面向公众…...

编程新知 2026/2/9 1:32:22

react菜单，动态绑定点击事件，菜单分离出去单独的js文件，Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

编程新知 2026/2/5 4:34:02

CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？

在现代前端开发中，Utility-First (功能优先) CSS 框架已经成为主流。其中，Tailwind CSS 无疑是市场的领导者和标杆。然而，一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。这篇文章将深入探讨这两款工具的核心理念、技术差…...

编程新知 2026/2/5 16:05:59

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

属性

PerspectiveCamera (透视相机)

构造器

方法

AmbientLight (环境光)

构造器

PlaneGeometry (平面几何体)

构造器

Mesh (网格)

构造器

MeshPhongMaterial (Phong材质)

构造器

ImageUtils (图像工具)

方法

动画

方法

示例代码

演示链接

相关文章：