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

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

news 来源：原创 2025/5/25 3:03:11

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可选参数&#…...

编程日记 2025/5/25 3:03:11

C语言函数嵌套

#include <stdio.h> void new_line() {printf("hehe\n"); } void three_line() {int i 0;for (i 0; i < 3; i){new_line;} } int main() {three_line();return 0; } 函数可以嵌套调用，但不能嵌套定义链式访问 main有三个参数 //main函数的…...

编程日记 2025/5/24 6:32:31

Android adb查看某个进程的总线程数

Android adb查看某个进程的总线程数 adb shell 进入控制台，然后： top -m 20 列出当前系统的进程，找到目标进程的id， ps -T 进程id | wc -l Android adb shell ps进程查找以及kill-CSDN博客文章浏览阅读777次，点赞3次&a…...

编程日记 2025/5/22 8:06:24

安装milvus以及向量库增删改操作

首先电脑已经安装了docker windows电脑可下载yml文件 https://github.com/milvus-io/milvus/releases/download/v2.4.6/milvus-standalone-docker-compose.yml 创建milvus文件夹，并在这个目录下创建五个文件夹：conf、db、logs、pic、volumes、wal 然后…...

编程日记 2025/5/20 13:13:59

基于深度学习多图像融合的屏幕缺陷检测方案

公司项目，已申请专利。深度学习作为新兴技术在图像领域蓬勃发展，因其自主学习图像数据特征的性能避免了人工设计算法的繁琐，精准的检测性能、高效的检测效率以及对各种不同类型的图像任务都有比较好的泛化性能，使得深度学习技术在…...

编程日记 2025/5/20 4:44:09

OAuth 2.0

简介 OAuth 是一种开放标准的授权协议或框架，它提供了一种安全的方式，使第三方应用程序能够访问用户在其他服务上的受保护资源，而无需共享用户的凭证（如用户名和密码）。OAuth 的核心思想是通过“授权令牌”来代替直接…...

编程日记 2025/5/21 15:12:51

2024年11月蓝桥杯青少组 STEMA考试 Scratch真题

2024年11月蓝桥杯青少组 STEMA考试 Scratch真题（选择题） 题目总数：5 总分数：50 选择题第 1 题单选题 Scratch运行以下程宇后，小兔子会（ ）。 A. 变小 B. 变大 C. 变色 D. …...

编程日记 2025/5/23 15:31:03

pat乙级1072 开学寄语

下图是上海某校的新学期开学寄语：天将降大任于斯人也，必先删其微博，卸其 QQ，封其电脑，夺其手机，收其 ipad，断其 wifi，使其百无聊赖，然后，净面、理发、整衣&am…...

编程日记 2025/5/23 7:08:31

【Linux系统编程】：信号（2）——信号的产生

1.前言我们会讲解五种信号产生的方式: 通过终端按键产生信号，比如键盘上的CtrlC。kill命令。本质上是调用kill()调用函数接口产生信号硬件异常产生信号软件条件产生信号前两种在前一篇文章中做了介绍，本文介绍下面三种. 2. 调用函数产生信号 2.1 k…...

编程日记 2025/5/21 1:55:12

Qwen2.5-7B 微调rz吧数据集

Qwen2.5-7B 微调弱智吧数据集模型微调简介模型微调是一种在已有预训练模型的基础上，通过使用特定任务的数据集进行进一步训练的技术。这种方法允许模型在保持其在大规模数据集上学到的通用知识的同时，适应特定任务的细微差别。使用微调模型&#xff…...

编程日记 2025/5/24 22:08:15

未来将要被淘汰的编程语言

COBOL - 这是一种非常古老的语言，主要用于大型企业系统和政府机构。随着老一代IT工作人员的退休，COBOL程序员变得越来越少。Fortran - 最初用于科学和工程计算，Fortran在特定领域仍然有其应用，但随着更现代的语言（如Py…...

编程日记 2025/5/23 20:45:22

翻转（蓝桥杯2023大学C组试题E）

【问题描述】：小蓝用黑白棋的n个棋子排成了一行，他在脑海里想象出了一个长度为n的01串T，他发现如果把黑棋当作1、白棋当做0，这一行棋子是一个长度为n的01串S。小蓝如果在S中发现一颗棋子和它两边的棋子都不一样，可以将…...

编程日记 2025/5/24 10:08:50

期权VIX指数构建与择时应用

芝加哥期权交易所CBOE的波动率指数VIX 是反映 S&P 500 指数未来 30 天预测期波动率的指标，由于预期波动率多用于表征市场情绪，因此 VIX 也被称为“ 恐慌指数”。 VIX指数计算 VIX 反映了市场情绪和投资者的风险偏好， 对于欧美市场而言…...

编程日记 2025/5/20 20:15:07

Nginx界的天花板-Oracle 中间件OHS 11g服务器环境搭建

环境信息服务器基本信息如下表，本次安装总共使用2台服务器，具体信息如下： 服务器IP DNS F5配置 OHS1 172.xx.xx.xx ohs01.xxxxxx.com ohs.xxxxxx.com OHS2 172.xx.xx.xx ohs02.xxxxxx.com 服务器用户角色信息均为：…...

编程日记 2025/5/22 19:36:19

torch.unsqueeze：灵活调整张量维度的利器

在深度学习框架PyTorch中，张量（Tensor）是最基本的数据结构，它类似于NumPy中的数组，但可以在GPU上运行。在日常的深度学习编程中，我们经常需要调整张量的维度以适应不同的操作和层。torch.unsqueeze函数就是…...

编程日记 2025/5/23 7:42:28

为什么使用环形队列

1.看以下两种情况。第一种不会出现问题，当主流程读取次数比较慢时，数据会被覆盖。 2.扩大空间。不可取。 3.什么是队列...

编程日记 2025/4/9 15:37:05

Qt之QML应用程序开发：给应用程序添加图标文件

开发环境： 1、Qt Creator 14.0.1 2、windows10 先看下面的步骤，不明白再返回来看下面官方指导链接。先看下面的步骤，不明白再返回来看下面官方指导链接。先看下面的步骤，不明白再返回来看下面官方指导链接。 --------------------------------------------------------…...

编程日记 2025/5/20 8:48:12

基于xiaothink对Wanyv-50M模型进行c-eval评估

使用pypi安装xiaothink： pip install xiaothink1.0.2下载模型： 万语-50M 开始评估(修改模型路径后即可直接开始运行，结果保存在output文件夹里)： import os import json import pandas as pd import re from tqdm import tqdm i…...

编程日记 2025/5/21 7:15:13

大模型项目如何成功落地？

随着人工智能的快速发展，大模型已经成为企业转型和提升效率的关键工具。要让大模型成功落地，需要几个关键要素，以及明白如何组建一个高效的团队。首先，成功的关键在于业务人员的积极参与，这是项目成功的起点。其次…...

编程日记 2025/5/19 20:27:00

重构（二）

继续"提高代码质量" 接着上文提高代码质量, 需要从这几个特点入手 1、代码重用性。2、可读性。3、可扩展性。4、可靠性。5、高内聚，低耦合。仅仅就"可读性"去分析一下吧, 毕竟例子实在是太多了递归的"可读性"不如while循环递归…...

编程日记 2025/5/23 16:34:05

Sapro编程软件

Sapro软件是由西门子建筑科技公司开发的一款编程软件，主要用于Climatix控制器的编程、调试及相关功能实现.以下是其具体介绍： • 功能强大：可进行HVAC控制编程，实现设备控制、HMI用户访问和设备集成等功能，满足复杂的…...

编程日记 2025/5/22 10:33:04

EasyGBS国标GB28181公网平台P2P远程访问故障诊断：云端服务端排查指南

随着信息技术的飞速发展，视频监控领域正经历从传统安防向智能化、网络化安防的深刻转变。EasyGBS平台，作为基于国标GB28181协议的视频流媒体平台，为用户提供了强大的视频监控直播功能。然而，在实际应用中，P2P远程访问可…...

编程日记 2025/5/22 17:32:38

学生管理系统，增加教师管理，班级管理，角色功能权限管理

为了在现有的学生管理系统中增加**教师管理**、**班级管理**以及**角色和权限管理**，我们需要对数据库进行扩展，并相应地更新 Python 代码和用户界面。以下是详细的步骤和代码示例。 ## 1. 数据库扩展 ### 1.1 创建新表 #### 教师表 (teachers) sql …...

编程日记 2025/5/22 13:24:00

Vue CLI 脚手架创建项目流程详解（2）

更新 CLI 脚手架确保你安装的是最新版本的 Vue CLI，以支持最新的特性及改进。你可以通过以下命令全局安装或更新 Vue CLI： npm install -g vue/cli创建 Vue 3.x 项目启动创建向导使用 vue create 命令来开始创建一个新的 Vue 项目： vue …...

编程日记 2025/5/22 12:47:34

LabVIEW机械故障诊断中的传感器选择

在机械设备故障诊断中，传感器是关键设备，用于采集设备运行状态的各种数据。常见的传感器类型和选择方法如下： 1. 振动传感器用于检测设备运行中的振动特征，常见于旋转机械和轴承故障诊断。加速度传感器：检测高频振…...

编程日记 2025/5/24 0:39:42

二叉树_堆

目录一. 树(非线性结构） 1.1 树的概念与结构 1.2 树的表示二. 二叉树 2.1 二叉树的概念与结构 2.2 特殊的二叉树 2.3 二叉树的存储结构三. 实现顺序结构的二叉树 3.1 堆的概念与结构一. 树(非线性结构） 1.1 树的概念与结构概念&#xff…...

编程日记 2025/5/22 6:19:35

Java图片拼接

最近遇到一个挺离谱的功能，某个表单只让上传一张图，多图上传会使导出失败。跟开发沟通后表示，这个问题处理不了。我... 遂自己思考，能否以曲线救国的方式拯救一下，即不伤及代码之根本，又能解决燃眉之急。灵…...

编程日记 2025/5/25 0:20:45

使用qemu搭建armv7嵌入式开发环境

目录目录 1 概述 2 环境准备 2.1 vexpress系列开发板介绍 2.2 安装工具 2.2.1 安装交叉工具链 2.2.2 安装qemu 2.2.3 安装其他工具 3 启动uboot 3.1 uboot下载与编译 3.1.1 下载 3.1.2 编译 3.2 使用qemu启动uboot 4 启动kernel 4.1 下载和编译kernel 4.1.1 下…...

编程日记 2025/5/23 23:12:16

新版国标GB28181设备端Android版EasyGBD支持国标GB28181-2022，支持语音对讲，支持位置上报，开源在Github

经过近3个月的迭代开发，新版本的国标GB28181设备端EasyGBD安卓Android版终于在昨天发布到Github了，最新的EasyGBD支持了国标GB28181-2022版，还支持了语音对讲、位置上报、本地录像等功能，比原有GB28181-2016版的EasyGBD更加高效、…...

编程日记 2025/5/23 23:12:15

Hashtable 描述及源码解析

目录一、Hashtable的基本概念二、Hashtable的源码解析构造函数哈希算法函数处理哈希冲突类定义和成员变量构造方法插入元素查找元素删除元素扩容 Hashtable（哈希表）是一种非常重要的数据结构，它提供了快速的数据插入、删…...

编程日记 2025/5/22 3:08:37

clickhouse-数据库引擎

1、数据库引擎和表引擎数据库引擎默认是Ordinary，在这种数据库下面的表可以是任意类型引擎。生产环境中常用的表引擎是MergeTree系列，也是官方主推的引擎。 MergeTree是基础引擎，有主键索引、数据分区、数据副本、数据采样、删除和修改等功…...

编程日记 2025/5/23 23:12:12

深度学习之超分辨率算法——SRCNN

网络为基础卷积层 tensorflow 1.14 scipy 1.2.1 numpy 1.16 大概意思就是针对数据，我们先把图片按缩小因子照整数倍进行缩减为小图片，再针对小图片进行插值算法，获得还原后的低分辨率的图片作为标签。 main.py 配置文件 from model im…...

编程日记 2025/5/23 23:12:09

本机如何连接虚拟机MYSQL

要让本机（主机）连接到虚拟机上的 MySQL 数据库，你需要确保虚拟机和主机之间的网络连接正常，并且 MySQL 配置允许外部连接。以下是实现本机连接虚拟机 MySQL 的步骤： 步骤 1：确认虚拟机与本机的网络连接确…...

编程日记 2025/5/21 4:33:11

Download GraalVM 上面链接选择jdk的版本以及系统的环境下载graalvm的tar包解压tar包 tar -xzf graalvm-jdk-<version>_macos-<architecture>.tar.gz 移入java的文件夹目录 sudo mv graalvm-jdk-<version> /Library/Java/JavaVirtualMachines 设置环境变…...

编程日记 2025/5/24 18:23:25

大模型日报 2024-12-19

大模型日报 2024-12-19 大模型资讯标题：OpenAI发布季第十天：ChatGPT登陆电话、WhatsApp，你可以给ChatGPT真正打电话了摘要：OpenAI于2024年12月18日发布了ChatGPT的新功能，用户可以通过电话和WhatsApp与ChatGPT进行互…...

编程日记 2025/5/20 13:21:02

【数据结构练习题】链表与LinkedList

顺序表与链表LinkedList 选择题链表面试题1. 删除链表中等于给定值 val 的所有节点。2. 反转一个单链表。3. 给定一个带有头结点 head 的非空单链表，返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。4. 输入一个链表，输出该链…...

编程日记 2025/5/18 21:52:10

使用 acme.sh 申请域名 SSL/TLS 证书完整指南

使用 acme.sh 申请域名 SSL/TLS 证书完整指南简介为什么选择 acme.sh 和 ZeroSSL？前置要求安装过程步骤一：安装 acme.sh步骤二：配置 ZeroSSL 证书申请方法一：手动 DNS 验证（推荐新手使用）方法二&#xf…...

编程日记 2025/5/21 5:14:06

微信小程序开发入门

实现滚动需要设置高度和边框轮播图差值表达式（ {{表达式的值}} ）,info数据要写到js文件的data数据中小程序中常用的事件...

编程日记 2025/5/17 23:42:41

【LeetCode】9、回文数

【LeetCode】9、回文数文章目录一、数学: 除法和取模1.1 数学: 除法和取模二、多语言解法一、数学: 除法和取模 1.1 数学: 除法和取模例如 15251, offset 也是五位数的 10000 先判断首1和尾1, 再变为 525, offset 变为 100 再判断首5和尾5, 再变为 2, offset 变为 1 整个…...

编程日记 2025/5/20 8:15:15

面试题整理9----谈谈对k8s的理解2

面试题整理9----谈谈对k8s的理解2 1. Service 资源1.1 ServiceClusterIPNodePortLoadBalancerIngressExternalName 1.2 Endpoints1.3 Ingress1.4 EndpointSlice1.5 IngressClass 2. 配置和存储资源2.1 ConfigMap2.2 Secret2.3 PersistentVolume2.4 PersistentVolumeClaim2.5 St…...

编程日记 2025/5/24 7:19:00

fpga系列 HDL：Quartus II PLL (Phase-Locked Loop) IP核 (Quartus II 18.0)

在 Quartus II 中使用 PLL (Phase-Locked Loop) 模块来将输入时钟分频或倍频，并生成多个相位偏移或频率不同的时钟信号： 1. 生成 PLL 模块在 Quartus II 中： 打开 IP Components。 file:///C:/intelFPGA_lite/18.0/quartus/common/help/w…...

编程日记 2025/5/25 7:50:00

中国量子计算机领域的发展现状与展望

中国量子计算机领域的发展现状与展望摘要随着全球科技竞争的加剧，量子计算作为前沿技术领域备受瞩目。中国在量子计算机的研发方面取得了显著进展，本文将深入探讨中国量子计算机领域的现状、取得的成果、面临的挑战以及未来的发展方向，并…...

编程日记 2025/5/25 3:36:54

html（超文本标记语言）

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&…...

编程日记 2025/5/23 8:11:48

如何在Windows系统上安装和配置Maven

Maven是一个强大的构建和项目管理工具，广泛应用于Java项目的自动化构建、依赖管理、项目构建生命周期控制等方面。在Windows系统上安装Maven并配置环境变量，是开发者开始使用Maven的第一步。本文将详细介绍如何在Windows系统上安装和配置Maven&#xff0…...

编程日记 2025/5/24 9:11:52

基于Python Scrapy的豆瓣Top250电影爬虫程序

Scrapy安装 Python实现一个简单的爬虫程序（爬取图片）_python简单扒图脚本-CSDN博客创建爬虫项目创建爬虫项目： scrapy startproject test_spider 创建爬虫程序文件： >cd test_spider\test_spider\spiders >scrapy g…...

编程日记 2025/5/20 8:33:44

mysql,数据库数据备份

mysql 一.数据库备份概念1.备份分类2.备份策略3.备份三要素二.完全备份操作1.物理备份(还原),冷备份2.逻辑备份,温备份三.percona软件的xtrabackup工具备份(2备份,3还原),增量,差异1.percona软件安装2.增量备份(还原)3.差异备份四.binlog日志1.binlog日志概念2.查看binlog日志信…...

编程日记 2025/5/19 13:56:43