33. Three.js案例-创建带阴影的球体与平面

news2024/12/18 11:54:44

33. Three.js案例-创建带阴影的球体与平面

实现效果

效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。

构造器
new THREE.WebGLRenderer(parameters)
参数类型描述
parametersObject可选参数对象，用于配置渲染器的各种属性。

常用参数：

  • antialias：布尔值，是否开启抗锯齿，默认为 false。
  • alpha：布尔值，是否允许透明背景，默认为 false。
  • premultipliedAlpha：布尔值，是否使用预乘 alpha，默认为 true。
  • preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为 false。
  • depth：布尔值，是否创建深度缓冲区，默认为 true。
  • stencil：布尔值，是否创建模板缓冲区，默认为 true。
  • logarithmicDepthBuffer：布尔值，是否使用对数深度缓冲区，默认为 false。
  • powerPreference：字符串，指定 GPU 的性能偏好，可选值为 default、high-performance 或 low-power。
方法
  • setPixelRatio(value)：设置设备像素比。
  • setSize(width, height, updateStyle)：设置渲染器的尺寸。
  • setClearColor(color, alpha)：设置渲染器的背景颜色。
  • render(scene, camera)：渲染场景。

Scene (场景)

Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。

构造器
new THREE.Scene()

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于创建透视投影的相机。

构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数类型描述
fovNumber视野角度，以度为单位。
aspectNumber相机的宽高比。
nearNumber近裁剪面距离，小于该距离的对象不会被渲染。
farNumber远裁剪面距离，大于该距离的对象不会被渲染。
方法
  • position.set(x, y, z)：设置相机的位置。
  • lookAt(vector)：使相机看向指定的点。

SpotLight (聚光灯)

SpotLight 是 Three.js 中用于创建聚光灯的光源。

构造器
new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)
参数类型描述
colorColor光源的颜色。
intensityNumber光源的强度，默认为 1。
distanceNumber光源的最大影响距离，默认为 0（无限远）。
angleNumber光源的光照角度，默认为 Math.PI/3。
penumbraNumber光源的半影区域，默认为 0。
decayNumber光源的衰减，默认为 1。
属性
  • castShadow：布尔值，是否投射阴影，默认为 false。

Mesh (网格)

Mesh 是 Three.js 中用于创建 3D 对象的基本类。

构造器
new THREE.Mesh(geometry, material)
参数类型描述
geometryGeometry网格的几何体。
materialMaterial网格的材质。
属性
  • castShadow：布尔值，是否投射阴影，默认为 false。
  • receiveShadow：布尔值，是否接收阴影，默认为 false。

SphereBufferGeometry (球体几何体)

SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。

构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
参数类型描述
radiusNumber球体的半径。
widthSegmentsNumber经度方向上的分段数，默认为 8。
heightSegmentsNumber纬度方向上的分段数，默认为 6。
phiStartNumber经度起始角度，默认为 0。
phiLengthNumber经度范围，默认为 2 * Math.PI。
thetaStartNumber纬度起始角度，默认为 0。
thetaLengthNumber纬度范围，默认为 Math.PI。

PlaneGeometry (平面几何体)

PlaneGeometry 是 Three.js 中用于创建平面几何体的类。

构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数类型描述
widthNumber平面的宽度。
heightNumber平面的高度。
widthSegmentsNumber宽度方向上的分段数，默认为 1。
heightSegmentsNumber高度方向上的分段数，默认为 1。

MeshNormalMaterial (网格法线材质)

MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。

构造器
new THREE.MeshNormalMaterial(parameters)
参数类型描述
parametersObject可选参数对象，用于配置材质的各种属性。

常用参数：

  • wireframe：布尔值，是否以线框模式显示，默认为 false。
  • transparent：布尔值，是否允许透明，默认为 false。

MeshStandardMaterial (网格标准材质)

MeshStandardMaterial 是 Three.js 中用于创建物理上准确的标准材质。

构造器
new THREE.MeshStandardMaterial(parameters)
参数类型描述
parametersObject可选参数对象，用于配置材质的各种属性。

常用参数：

  • color：颜色值，材质的颜色。
  • metalness：浮点数，金属度，默认为 0。
  • roughness：浮点数，粗糙度，默认为 1。

Vector3 (三维向量)

Vector3 是 Three.js 中用于表示三维向量的类。

构造器
new THREE.Vector3(x, y, z)
参数类型描述
xNumber向量的 x 分量。
yNumber向量的 y 分量。
zNumber向量的 z 分量。
方法
  • set(x, y, z)：设置向量的各个分量。
  • multiplyScalar(scalar)：将向量的各个分量乘以一个标量。

ShadowMap (阴影映射)

ShadowMap 是 Three.js 中用于启用和配置阴影映射的功能。

属性
  • enabled：布尔值，是否启用阴影映射，默认为 false。

代码

<!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);

    // 创建场景
    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));

    // 启用阴影映射
    myRenderer.shadowMap.enabled = true;

    // 添加渲染器到容器
    $("#myContainer").append(myRenderer.domElement);

    // 创建聚光灯
    var mySpotLight = new THREE.SpotLight('white');
    mySpotLight.position.set(-3, 46, -1);
    mySpotLight.distance = 80;
    mySpotLight.angle = Math.PI / 50;
    mySpotLight.castShadow = true;
    myScene.add(mySpotLight);

    // 创建球体
    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>

演示链接

示例链接

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2261576.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Scala—“==“和“equals“用法（附与Java对比）

Scala—“==“和“equals“用法（附与Java对比）

Scala 字符串比较—""和"equals"用法 Scala 的 在 Scala 中&#xff0c; 是一个方法调用&#xff0c;实际上等价于调用 equals 方法。不仅适用于字符串&#xff0c;还可以用于任何类型&#xff0c;并且自动处理 null。 Demo&#xff1a; Java 的 在 J…
阅读更多...
Qt WORD/PDF（一）使用 QtPdfium库实现 PDF 预览

Qt WORD/PDF（一）使用 QtPdfium库实现 PDF 预览

文章目录 一、简介二、下载 QtPdfium三、加载 QtPdfium 动态库四、Demo 使用 关于QT Widget 其它文章请点击这里: QT Widget 姊妹篇: Qt WORD/PDF&#xff08;一&#xff09;使用 QtPdfium库实现 PDF 操作 Qt WORD/PDF&#xff08;二&#xff09;使用 QtPdfium库实现…
阅读更多...
优选算法——链表

优选算法——链表

1. 链表常用技巧和操作总结 2. 两数相加 题目链接&#xff1a;2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 题目展示&#xff1a; 题目分析&#xff1a;本题给的是逆序&#xff0c;其实降低了难度&#xff0c;逆序刚好我们从第一位开始加&#xff0c;算法原理其实就…
阅读更多...
[蓝桥杯 2019 国 B] 排列数

[蓝桥杯 2019 国 B] 排列数

目录 前言 题解 思路 疑问 解答 前言 对于本篇文章是站在别人的基础之上来写的&#xff0c;对于这道题作为2019年国赛B组的最难的一题&#xff0c;他的难度肯定是不小的&#xff0c;这道题我再一开始接触的时候连思路都没有&#xff0c;也是看了两三遍别人发的题解&#x…
阅读更多...
Spring Boot 3.x：自动配置类加载机制的变化

Spring Boot 3.x：自动配置类加载机制的变化

随着 Spring Boot 3.x 版本的发布&#xff0c;Spring Boot 引入了一些关键的变更。其中最重要的一项变更是 自动配置类的加载机制。在之前的版本中&#xff0c;Spring Boot 使用 spring.factories 文件来管理自动配置类的加载。然而&#xff0c;在 Spring Boot 3.x 中&#xff…
阅读更多...
arXiv-2024 | NavAgent：基于多尺度城市街道视图融合的无人机视觉语言导航

arXiv-2024 | NavAgent：基于多尺度城市街道视图融合的无人机视觉语言导航

作者&#xff1a;Youzhi Liu, Fanglong Yao*, Yuanchang Yue, Guangluan Xu, Xian Sun, Kun Fu 单位&#xff1a;中国科学院大学电子电气与通信工程学院&#xff0c;中国科学院空天信息创新研究院网络信息系统技术重点实验室 原文链接&#xff1a;NavAgent: Multi-scale Urba…
阅读更多...
（三）PyQT5+QGIS+python使用经验——解决各版本不兼容问题

（三）PyQT5+QGIS+python使用经验——解决各版本不兼容问题

一、问题描述 基础环境&#xff1a;Windows10&#xff08;64&#xff09; PyCharm2024 QGIS 3.22。 目的&#xff1a;解决之前python版本多&#xff0c;pyqt5以及QT Designer交互使用存在环境变量冲突矛盾&#xff0c;以及QGIS安装时自带python、pyqt5等问题。 尤其是在QT …
阅读更多...
【OpenCV计算机视觉】图像处理——平滑

【OpenCV计算机视觉】图像处理——平滑

本篇文章记录我学习【OpenCV】图像处理中关于“平滑”的知识点&#xff0c;希望我的分享对你有所帮助。 目录 一、什么是平滑处理 1、平滑的目的是什么&#xff1f; 2、常见的图像噪声 &#xff08;1&#xff09;椒盐噪声 ​编辑&#xff08;2&#xff09; 高斯噪声 &a…
阅读更多...
秒优科技-供应链管理系统 login/doAction SQL注入漏洞复现

秒优科技-供应链管理系统 login/doAction SQL注入漏洞复现

0x01 产品简介 秒优科技提供的供应链管理系统，即秒优SCM服装供应链管理系统，是一款专为服装电商企业设计的全方位解决方案。是集款式研发、订单管理、物料管理、生产管理、工艺管理、收发货管理、账单管理、报表管理于一体的服装电商供应链管理解决方案。它涵盖了从企划到开…
阅读更多...
快速掌握源码部署Filebeat

快速掌握源码部署Filebeat

文章目录 1. 裸金属安装1.1 压缩包方式安装1.2 yum方式安装 2. docker安装3. K8s安装 项目使用了Filebeat&#xff0c;现在需要运行在ARM架构的服务器上&#xff0c;但是Filebeat官方没有提供&#xff0c;需要自己编译一份 filebeat等组件的源码地址 https://github.com/elasti…
阅读更多...
ST-Linker V2 烧录器详解说明文档

ST-Linker V2 烧录器详解说明文档

目录 ST-Linker v2烧录器介绍 STM8烧录口 STM32烧录接口 JTAG烧录接口 ​​​​​​​ ​​​​​​​ ​​​​​​​ 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 ST-Linker v2烧录器介绍 图片中是两种IC芯片的烧录器&#x…
阅读更多...
同三维TL201H2S4 4+2机手术互动录播主机产品

同三维TL201H2S4 4+2机手术互动录播主机产品

同三维TL201H2S4 42机手术互动录播主机产品 录制点播、直播导播、互动、音频处理器、中控等多功能为一体 6路视频输入:4路SDI1路HDMI1(4K30)1路(3选1:HDMI2/2路VGA) 2路视频输出&#xff1a;1路HDMI1(4K30)1路&#xff08;2选1&#xff1a;VGA和HDMI2) 5路音频输入&#xf…
阅读更多...
RabbitMQ实现网络分区

RabbitMQ实现网络分区

RabbitMQ实现网络分区 网络分区的判断应答时间范围判定方式日志方式命令查看监控页面提示API查看 模拟网络分区封禁端口封禁IP封禁网卡挂起恢复操作系统 网络分区的影响未配置镜像队列情况下已配置镜像队列情况下 处理网络分区手动处理恢复步骤挑选信任分区重启方式&#xff08…
阅读更多...
一、LRU缓存

一、LRU缓存

LRU缓存 1.LRU缓存介绍2.LRU缓存实现3.LRU缓存总结3.1 LRU 缓存的应用3.2 LRU 缓存的优缺点 1.LRU缓存介绍 LRU是Least Recently Used 的缩写&#xff0c;意为“最近最少使用”。它是一种常见的缓存淘汰策略&#xff0c;用于在缓存容量有限时&#xff0c;决定哪些数据需要被删…
阅读更多...
【大前端vue：组件】鼠标上移 出现动画

【大前端vue：组件】鼠标上移 出现动画

【大前端vue&#xff1a;组件】鼠标上移 出现动画 <template><div class"view-introduction-culture"><div class"culture-wrapper"><h2 class"culture-title">鼠标上移&#xff1a;展示动画 显示出来</h2><di…
阅读更多...
解决电脑网速慢问题：硬件检查与软件设置指南

解决电脑网速慢问题：硬件检查与软件设置指南

电脑网速慢是许多用户在使用过程中常见的问题&#xff0c;它不仅会降低工作效率&#xff0c;还可能影响娱乐体验。导致电脑网速慢的原因多种多样&#xff0c;包括硬件问题、软件设置和网络环境等。本文将从不同角度分析这些原因&#xff0c;并提供提高电脑网速的方法。 一、检查…
阅读更多...
快速本地化部署 OnlyOffice服务 （ Linux+Docker）

快速本地化部署 OnlyOffice服务 （ Linux+Docker）

文章目录 一、OnlyOffice介绍&#x1f4d6;二、集成OnlyOffice&#x1f9e9;2.1 环境准备&#x1f5a5;️2.2 搜索镜像2.3 拉取镜像2.4 查看镜像2.5 创建容器2.6 进入容器配置2.7 重启服务2.8 添加字体字号2.9 测试OnlyOffice服务 三、在线预览office文档四、Cpolar内网穿透 一…
阅读更多...
Leecode刷题C++之形成目标字符串需要的最少字符串数①

Leecode刷题C++之形成目标字符串需要的最少字符串数①

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; class Solution { public:int minValidStrings(vector<string>& words, string target) {auto prefix_function [](const string& word, const string& target) -> vector<…
阅读更多...
51c嵌入式~合集2

51c嵌入式~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/11529950 一、不同的电平信号的MCU怎么通信 “电平转换”电路 ​ 先说一说这个电路的用途&#xff1a;当两个MCU在不同的工作电压下工作&#xff08;如MCU1 工作电压5V&#xff1b;MCU2 工作电压3.3V&#xff09;&#xf…
阅读更多...
2024年第十五届蓝桥杯青少组C++国赛—割点

2024年第十五届蓝桥杯青少组C++国赛—割点

割点 题目描述 一张棋盘由n行 m 列的网格矩阵组成&#xff0c;每个网格中最多放一颗棋子。当前棋盘上已有若干棋子。所有水平方向或竖直方向上相邻的棋子属于同一连通块。 现给定棋盘上所有棋子的位置&#xff0c;如果要使棋盘上出现两个及以上的棋子连通块&#xff0c;请问…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023