陕西网站建设美化/阿里大数据官网
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…...

ASP.NET|日常开发中常用属性详解
JAVA |日常开发中常用属性详解 前言一、控件属性(以 TextBox 控件为例)1.1 Text 属性:1.2 MaxLength 属性:1.3 ReadOnly 属性:1.4 IsPostBack 属性(在ASP.NET Web Forms 中)…...

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…...

使用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…...

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

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

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

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

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

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.合…...

JavaWeb学习(4)(四大域、HttpSession原理(面试)、SessionAPI、Session实现验证码功能)
目录 一、web四大域。 (1)基本介绍。 (2)RequestScope。(请求域) (3)SessionScope。(会话域) (4)ApplicationScope。(应用域) (5)PageScope。(页面域) 二、Ht…...

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

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

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

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

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

【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 …...

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

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

深度解析 Ansible:核心组件、配置、Playbook 全流程与 YAML 奥秘(上)
文章目录 一、ansible的主要组成部分二、安装三、相关文件四、ansible配置文件五、ansible 系列 一、ansible的主要组成部分 ansible playbook:任务剧本(任务集),编排定义ansible任务集的配置文件,由ansible顺序依次执…...

LabVIEW气缸摩擦力测试系统
基于LabVIEW的气缸摩擦力测试系统实现了气缸在不同工作状态下摩擦力的快速、准确测试。系统由硬件平台和软件两大部分组成,具有高自动化、精确测量和用户友好等特点,可广泛应用于精密机械和自动化领域。 项目背景: 气缸作为舵机关键部件…...

Leetcode. 688骑士在棋盘上的概率
题目描述 原题链接:Leetcode. 688骑士在棋盘上的概率 解题思路 多元dp 将dp[step][i][j])定义为从(i, j)出发,走step步之后骑士还在棋盘上的概率。 如果 ( i , j ) (i,j) (i,j)不在棋盘上,即非 0 < i < n 0<i<n 0<i<…...

TCP/IP 协议栈高效可靠的数据传输机制——以 Linux 4.19 内核为例
TCP/IP 协议栈是一种非常成熟且广泛使用的网络通信框架,它将复杂的网络通信任务分成多个层次,从而简化设计,使每一层的功能更加清晰和独立。在经典的 TCP/IP 协议栈中,常见的分层为链路层、网络层、传输层和应用层。本文将对每一层的基本功能进行描述,并列出对应于 Linux …...

Ubuntu22.04搭建LAMP环境(linux服务器学习笔记)
目录 引言: 一、系统更新 二、安装搭建Apache2 1.你可以通过以下命令安装它: 2.查看Apache2版本 3.查看Apache2运行状态 4.浏览器访问 三、安装搭建MySQL 1.安装MySQL 2.查看MySQL 版本 3.安全配置MySQL 3.1是否设置密码?(按y|Y表…...

鸿蒙面试---1208
HarmonyOS 三大技术理念 分布式架构:HarmonyOS 的分布式架构使得设备之间能够无缝协同工作。例如,它允许用户在不同的智能设备(如手机、平板、智能手表等)之间共享数据和功能。比如,用户可以在手机上开始编辑文档&…...

java基础教程第16篇( 正则表达式)
Java 正则表达式 正则表达式定义了字符串的模式。 正则表达式可以用来搜索、编辑或处理文本。 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别。 Java 提供了 java.util.regex 包,它包含了 Pattern 和 Matcher 类,用于处理正…...

Docker部署的gitlab升级的详细步骤(升级到17.6.1版本)
文章目录 一、Gitlab提示升级信息二、老版本的docker运行gitlab命令三、备份老版本Gitlab数据四、确定升级路线五、升级(共分3个版本升级)5.1 升级第一步(17.1.2 > 17.3.7)5.2 升级第二步(17.3.7 > 17.5.3)5.3 升级第三步(17.5.3 > 17.6.1) 六、web端访问gitlab服务 一…...

【如何制定虚拟货币的补仓策略并计算回本和盈利】
在虚拟货币市场中,价格波动性极大,如何在波动中生存并获得盈利是每个投资者都在思考的问题。作为一种投资策略,补仓(又称“摊低成本”)常常被用来降低持仓成本,并在市场回升时获得更大的盈利。但如何科学地设定补仓计划,确定回本点和盈利目标呢? 本文将以 Dogecoin 为…...

给图像去除水印攻
去除水印的过程与添加水印相反,它涉及到图像修复、颜色匹配和区域填充等技术。OpenCV-Python 提供了多种方法来处理不同类型的水印,包括但不限于纯色水印、半透明水印以及复杂背景上的水印。下面将详细介绍几种常见的去水印策略,并给出具体的…...

Linux之封装线程库和线程的互斥
Linux之封装线程库和线程的互斥与同步 一.封装线程库二.线程的互斥2.1互斥量的概念2.2初始化和销毁互斥量2.3加锁和解锁2.4互斥量的原理2.5可重入和线程安全2.6死锁 一.封装线程库 其实在我们C内部也有一个线程库而C中的线程库也是封装的原生线程库的函数,所以我们…...