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

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

news 2025/11/9 12:35:20

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

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2025/10/19 0:02:23

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。第 1…...

编程新知 2025/11/8 6:13:30

【AI学习】三、AI算法中的向量

在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...

编程新知 2025/8/12 22:58:13

Mac下Android Studio扫描根目录卡死问题记录

环境信息操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...

编程新知 2025/11/7 19:36:02

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录一、👋🏻前言二、😈sinx波动的基本原理三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理四、🌊波动优化…...

编程新知 2025/11/7 19:36:15

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构代码结构代码详情功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/11/8 5:25:18

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/10/12 2:43:11

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/11/9 5:39:48

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型，它将权限分配给角色，再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2025/11/7 20:13:04

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

属性

PerspectiveCamera (透视相机)

构造器

方法

AmbientLight (环境光)

构造器

PlaneGeometry (平面几何体)

构造器

Mesh (网格)

构造器

MeshPhongMaterial (Phong材质)

构造器

ImageUtils (图像工具)

方法

动画

方法

示例代码

演示链接

相关文章：