36. Three.js案例-创建带光照和阴影的球体与平面
36. Three.js案例-创建带光照和阴影的球体与平面
实现效果

知识点
Three.js基础
WebGLRenderer
WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。
构造器
new THREE.WebGLRenderer(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | object | 可选参数,用于配置渲染器。包括但不限于 antialias(抗锯齿)、alpha(透明度)等。 |
方法
setPixelRatio(value): 设置设备像素比。setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色。shadowMap.enabled: 启用或禁用阴影映射。render(scene, camera): 渲染场景。
Scene
Scene 是Three.js中的场景对象,用于存储所有需要渲染的对象。
构造器
new THREE.Scene()
Camera
PerspectiveCamera 是Three.js中的一种透视相机,用于模拟人眼的视觉效果。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | float | 视野角度,单位为度。 |
| aspect | float | 相机宽高比。 |
| near | float | 近裁剪面距离。 |
| far | float | 远裁剪面距离。 |
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
PointLight
PointLight 是Three.js中的点光源,用于模拟从一个点发出的光。
构造器
new THREE.PointLight(color, intensity, distance, decay)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | color | 光源颜色。 |
| intensity | float | 光源强度。 |
| distance | float | 光源的最大影响距离。如果为0,则表示无限远。 |
| decay | float | 光源衰减系数。默认值为1。 |
属性
castShadow: 是否投射阴影。distance: 光源的最大影响距离。intensity: 光源强度。
SphereBufferGeometry
SphereBufferGeometry 用于创建一个球体几何体。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
| 参数 | 类型 | 描述 |
|---|---|---|
| radius | float | 球体半径。 |
| widthSegments | int | 经度方向上的分段数。默认值为8。 |
| heightSegments | int | 纬度方向上的分段数。默认值为6。 |
| phiStart | float | 球体起始经度。默认值为0。 |
| phiLength | float | 球体经度范围。默认值为2π。 |
| thetaStart | float | 球体起始纬度。默认值为0。 |
| thetaLength | float | 球体纬度范围。默认值为π。 |
Mesh
Mesh 是Three.js中的网格对象,用于将几何体和材质组合在一起。
构造器
new THREE.Mesh(geometry, material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体对象。 |
| material | Material | 材质对象。 |
属性
castShadow: 是否投射阴影。receiveShadow: 是否接收阴影。
PlaneGeometry
PlaneGeometry 用于创建一个平面几何体。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | float | 平面的宽度。 |
| height | float | 平面的高度。 |
| widthSegments | int | 宽度方向上的分段数。默认值为1。 |
| heightSegments | int | 高度方向上的分段数。默认值为1。 |
MeshStandardMaterial
MeshStandardMaterial 是Three.js中的一种标准材质,支持物理光照模型。
构造器
new THREE.MeshStandardMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | object | 可选参数,用于配置材质。包括但不限于 color(颜色)、roughness(粗糙度)、metalness(金属度)等。 |
代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer();myRenderer.setPixelRatio(window.devicePixelRatio);myRenderer.setSize(480, 320);myRenderer.setClearColor('white', 1);myRenderer.shadowMap.enabled = true;$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();// 创建相机var myCamera = new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);myCamera.position.set(4, 4, 2);myCamera.position.multiplyScalar(2);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 创建点光源var myPointLight = new THREE.PointLight('white');myPointLight.position.set(0, 6, 0);myPointLight.distance = 380;myPointLight.castShadow = true;myScene.add(myPointLight);// 创建球体var mySphereGeometry = new THREE.SphereBufferGeometry(2, 36, 36);var mySphereMaterial = new THREE.MeshNormalMaterial({wireframe: true, transparent: true});var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);mySphereMesh.position.set(0, 2.5, 0);mySphereMesh.castShadow = true;myScene.add(mySphereMesh);// 创建平面var myPlaneGeometry = new THREE.PlaneGeometry(120, 120, 1, 1);var myPlaneMaterial = new THREE.MeshStandardMaterial({color: 'white'});var myPlaneMesh = new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);myPlaneMesh.rotateX(-Math.PI / 2);myPlaneMesh.rotateZ(-Math.PI / 7);myPlaneMesh.position.set(0, -3.5, 0);myPlaneMesh.receiveShadow = true;myScene.add(myPlaneMesh);// 渲染场景myRenderer.render(myScene, myCamera);
</script>
</body>
</html>
演示链接
示例链接
相关文章:
36. Three.js案例-创建带光照和阴影的球体与平面
36. Three.js案例-创建带光照和阴影的球体与平面 实现效果 知识点 Three.js基础 WebGLRenderer WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数&#…...
CentOS 7 安装、测试和部署FastDFS
目录 FastDFS环境搭建 安装 libfastcommon 库 安装FastDFS 查看编译后的文件 FastDFS配置 FastDFS启动 启动tracker服务 启动storage服务 查看storage是否已经注册到了tracker下 查看存储文件的目录 FastDFS重启 FastDFS关闭 使用fdfs_test进行测试 修改client.co…...
全志H618 Android12修改doucmentsui选中图片资源详情信息
背景: 由于当前的文件管理器在我们的产品定义当中,某些界面有改动的需求,所以需要在Android12 rom中进行定制以符合当前产品定义。 需求: 进入file文件管理器后,点击选中图片资源,选中功能按钮,获取信息,不显示“调试信息(仅开发者)”;现状是,获取信息,显示“调试信…...
【083】基于51单片机智能烘手器【Proteus仿真+Keil程序+报告+原理图】
☆、设计硬件组成:51单片机最小系统LCD1602液晶显示DS18B20温度传感器TCRT5000红外感应传感器AT24C02存储芯片风扇加热片继电器LED灯按键设置。 1、设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片; 2、系统采用DS18B20温度传感器感应当前环…...
uniApp使用腾讯地图提示未添加maps模块
uniApp使用腾讯地图,打包提示未添加maps模块解决方案 这是报错信息,在标准基座运行的时候是没问题的,但是打包后会提示未添加,可以通过在mainfest里面把地图插件上腾讯地图的key更换高德地图的key,定位服务可以继续用腾…...
未来趋势系列 篇五:自主可控科技题材解析和股票梳理
文章目录 系列文章自主可控科技题材分析国产算力信创(信息技术应用创新)华为鸿蒙军工信息化半导体芯片卫星互联网工业软件股票梳理系列文章 未来趋势系列 篇一:AI题材解析和股票梳理 未来趋势系列 篇一(加更):AI医疗题材解析和股票梳理 未来趋势系列 篇二:HBM题材解析和…...
Springboot 学习 之 logback-spring.xml 日志压缩 .tmp 临时文件问题
文章目录 前言功能简述1. 自定义日志文件名2. 归档规则 && 压缩2.1. 归档配置2.2. 归档压缩2.3. 日志格式 && 编码 现象原因解决办法 前言 在 Springboot 应用中,默认使用 logback-spring.xml 配置日志相关 功能简述 1. 自定义日志文件名 <fi…...
maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException
Maven生产环境中遇到java.lang.IndexOutOfBoundsException的问题,尝试了重启电脑、重启IDEA等常规方法无效,最终通过直接重建工程解决了问题。 Rebuild Project 再启动OK...
K8s docker-compose的入门
一、Docker Compose 简介 什么是 Docker Compose? 用于定义和运行多容器 Docker 应用的工具。Docker Compose 的主要功能 使用 docker-compose.yml 文件定义服务。一键启动和管理多容器环境。安装与环境准备 安装 Docker 和 Docker Compose。检查版本:d…...
去雾Cycle-GAN损失函数
文章目录 GAN-LossIdentity-LossDP-lossCycle-Loss G和F都是生成器 G是hazy → \to → gt F是gt → \to → hazy D y D_y Dy判别无雾图是真实还是生成的? D x D_x Dx判别有雾图是真实还是生成的? GAN-Loss 在 DAM-CCGAN 中存在两个判别器 D x D_x D…...
word实现两栏格式公式居中,编号右对齐
1、确定分栏的宽度 选定一段文字 点击分栏:如本文的宽度为22.08字符 2、将公式设置为 两端对齐,首行无缩进。 将光标放在 公式前面 点击 格式-->段落-->制表位 在“制表位位置”输入-->11.04字符(22.08/211.04字符)&…...
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
在不依赖 Vite 或其他构建工具的情况下,使用 TailwindCSS CLI 快速生成独立的 CSS 文件是一种简单高效的方法,适合需要纯样式文件的场景。 这个项目中,使用到了tailwindCss, 需要把里面的样式打包出来,给其他项目用。 使用命令生…...
shell脚本案例
脚本一:打印当前系统登录用户列表 #!/bin/bash # 使用 who 命令获取当前登录用户信息并输出 who解释:who 命令用于显示当前登录系统的用户信息,包括用户名、登录终端、登录时间等。此脚本直接执行 who 命令并将结果输出到终端。 脚本二&…...
完整微服务设计 功能实现
我们将以一个简单的电商系统为例,实现微服务架构,逐步用Java代码详细实现每个模块,并配合注释帮助小白理解。在这个实现中,我们使用以下工具和框架: Spring Boot:用于构建微服务。Spring Cloud:…...
JWT令牌与微服务
1. 什么是JWT JWT(JSON Web Token)是一种开放标准(RFC 7519),它定义了一种紧凑且自包含的方式,用于作为JSON对象在各方之间安全地传输信息。JWT通常用于身份验证和信息交换。 以下是JWT的一些关键特性: 紧凑ÿ…...
C# WinForm移除非法字符的输入框
C# WinForm移除非法字符的输入框 文章目录 namespace System.Windows.Forms {using System.ComponentModel;/// <summary>/// 支持移除 非法字符 的输入框。/// </summary>public class RemoveInvalidCharTextBox : TextBox{/// <summary>/// 测试代码&#…...
智慧商城:基于请求数据动态渲染购物车列表
进入购物车列表页面,当即触发请求,打印出解构出来的data.list 查看数据是否添加到 vuex 中。 将物品加入购物车,点击购物车进入购物车列表页,点击 vue 调试工具,可以看到 cart 模块state中新增添加的几个物品信息 渲染…...
医疗信息化浪潮下 SSM+Vue 医院预约挂号系统的崛起
2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…...
QScreen在Qt5.15与Qt6.8版本下的区别
简述 QScreen主要用于提供与屏幕相关的信息。它可以获取有关显示设备的分辨率、尺寸、DPI(每英寸点数)等信息。本文主要是介绍Qt5.15与Qt6环境下,QScreen的差异,以及如何判断高DPI设备。 属性说明 logicalDotsPerInch࿱…...
模具生产过程中的标签使用流程图
①NFC芯片嵌入周转筐,通过读卡器读取CK_Label_v3的数据,并将这些信息上传至服务器进行存储; ②服务器随后与客户的WMS(仓库管理系统)进行交互,记录和同步注塑机的原始数据; ③当周转筐内的模具…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
