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

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

news 2026/2/10 10:30:43

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

超短脉冲激光自聚焦效应

前言与目录强激光引起自聚焦效应机理超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...

编程新知 2026/2/8 20:42:48

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”，物流的终极形态正在诞生想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

使用LangGraph和LangSmith构建多智能体人工智能系统

现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。在这篇博客〔原作者&a…...

编程新知 2026/1/26 13:48:59

C# 表达式和运算符(求值顺序)

求值顺序表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生变化。例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。如果乘法先执行，结果是17。如果5…...

编程新知 2026/1/31 13:13:28

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

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

编程新知 2025/9/14 12:09:11

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展，企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心，成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为若依后台管理框架的系统，它不仅支持跨平台应用，还能提供丰富…...

编程新知 2026/2/4 15:23:03

【笔记】AI Agent 项目 SUNA 部署之 Docker 构建记录

#工作记录构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...

编程新知 2026/2/9 17:28:19

以太网PHY布局布线指南

1. 简介对于以太网布局布线遵循以下准则很重要，因为这将有助于减少信号发射，最大程度地减少噪声，确保器件作用，最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查首先检查DRC规则是否设置正确，然…...

编程新知 2026/1/23 16:48:31

零基础在实践中学习网络安全-皮卡丘靶场（第十一期-目录遍历模块）

经过前面几期的内容我们学习了很多网络安全的知识，而这期内容就涉及到了前面的第六期-RCE模块，第七期-File inclusion模块，第八期-Unsafe Filedownload模块。什么是"遍历"呢：对学过一些开发语言的朋友来说应该知道&…...

编程新知 2026/1/8 18:24:29

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

属性

PerspectiveCamera (透视相机)

构造器

方法

AmbientLight (环境光)

构造器

PlaneGeometry (平面几何体)

构造器

Mesh (网格)

构造器

MeshPhongMaterial (Phong材质)

构造器

ImageUtils (图像工具)

方法

动画

方法

示例代码

演示链接

相关文章：