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

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

实现效果

效果

知识点

WebGLRenderer

WebGLRenderer 是Three.js中用于渲染场景的主要类之一,它负责将场景中的对象渲染到画布上。

构造器

new THREE.WebGLRenderer(parameters : Object)

参数类型描述
parametersObject可选参数对象,包含多个属性,如 antialias(抗锯齿)、alpha(透明背景)等。
方法
  • setPixelRatio(value : Number): 设置设备像素比。
  • setSize(width : Number, height : Number): 设置渲染器的尺寸。
  • setClearColor(color : Color, alpha : Number): 设置渲染器的背景颜色。
  • render(scene : Scene, camera : Camera): 渲染场景。

Scene

Scene 是Three.js中的场景类,用于存储和管理所有可见的对象。

构造器

new THREE.Scene()

PerspectiveCamera

PerspectiveCamera 是Three.js中的透视相机类,用于模拟人眼的透视效果。

构造器

new THREE.PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

参数类型描述
fovNumber视野角度(以度为单位)。
aspectNumber相机的宽高比。
nearNumber近裁剪面距离。
farNumber远裁剪面距离。
方法
  • position.set(x : Number, y : Number, z : Number): 设置相机的位置。
  • lookAt(vector : Vector3): 设置相机的朝向。

DirectionalLight

DirectionalLight 是Three.js中的方向光类,用于模拟太阳光或其他平行光源。

构造器

new THREE.DirectionalLight(color : Color, intensity : Number)

参数类型描述
colorColor光源的颜色。
intensityNumber光源的强度。
方法
  • castShadow = true: 启用阴影投射。
  • position.set(x : Number, y : Number, z : Number): 设置光源的位置。

SphereBufferGeometry

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

构造器

new THREE.SphereBufferGeometry(radius : Number, widthSegments : Number, heightSegments : Number)

参数类型描述
radiusNumber球体的半径。
widthSegmentsNumber经度方向上的分段数。
heightSegmentsNumber纬度方向上的分段数。

Mesh

Mesh 是Three.js中的网格类,用于组合几何体和材质。

构造器

new THREE.Mesh(geometry : Geometry, material : Material)

参数类型描述
geometryGeometry几何体对象。
materialMaterial材质对象。
方法
  • position.set(x : Number, y : Number, z : Number): 设置网格的位置。
  • castShadow = true: 启用阴影投射。
  • receiveShadow = true: 启用阴影接收。

PlaneGeometry

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

构造器

new THREE.PlaneGeometry(width : Number, height : Number, widthSegments : Number, heightSegments : Number)

参数类型描述
widthNumber平面的宽度。
heightNumber平面的高度。
widthSegmentsNumber宽度方向上的分段数。
heightSegmentsNumber高度方向上的分段数。
方法
  • rotateX(angle : Number): 绕X轴旋转。
  • rotateZ(angle : Number): 绕Z轴旋转。
  • position.set(x : Number, y : Number, z : Number): 设置平面的位置。
  • receiveShadow = true: 启用阴影接收。

代码

<!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 myDirectionalLight1 = new THREE.DirectionalLight('white', 1);myDirectionalLight1.castShadow = true;myDirectionalLight1.position.set(-4, 10, 8);myScene.add(myDirectionalLight1);// 创建第二束方向光var myDirectionalLight2 = new THREE.DirectionalLight('white', 0.5);myDirectionalLight2.castShadow = true;myDirectionalLight2.position.set(4, 12, 12);myScene.add(myDirectionalLight2);// 创建用于投射阴影的球体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, -4.5, 0);myPlaneMesh.receiveShadow = true;myScene.add(myPlaneMesh);// 渲染球体及阴影myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode212. 单词搜索 II

给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母顺序&#xff0c;通过 相邻的单元格 内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一…

容器化技术

文章目录 虚拟化容器容器隔离实现隔离文件 chroot隔离访问 namespace隔离资源 cgroups Dockerkubernetes 虚拟化容器 容器的首要目标是让软件分发部署过程从传统的发布安装包、靠人工部署转变为直接发布已经部署好的、包含整套运行环境的虚拟计划镜像。 一个计算机软件能够给正…

【潜意识Java】javaee中的SpringBoot在Java 开发中的应用与详细分析

目录 一、前言 二、Spring Boot 简介 三、Spring Boot 核心模块 四、Spring Boot 项目实战&#xff1a;构建一个简单的 RESTful API 1. 创建 Spring Boot 项目 2. 配置数据库 3. 创建实体类 4. 创建 JPA 仓库接口 5. 创建服务层 6. 创建控制器层 7. 测试 API 8. 运…

土地档案管理关系[源码+文档]

目录 摘 要 Abstract 1 绪论 1.1 可行性研究编写目的 1.2 项目背景 1.3 土地管理现状 1.4 土地档案管理研究方向 1.5 项目目标 1.6 项目设计原则 1.6.1 实用性原则 1.6.2 经济性原则 1.6.3 合法性原则 2 相关技术介绍 2.1 三层架构的选择 2.2 编程…

使用C语言编写UDP循环接收并打印消息的程序

使用C语言编写UDP循环接收并打印消息的程序 前提条件程序概述伪代码C语言实现编译和运行C改进之自由设定端口注意事项在本文中,我们将展示如何使用C语言编写一个简单的UDP服务器程序,该程序将循环接收来自指定端口的UDP消息,并将接收到的消息打印到控制台。我们将使用POSIX套…

Audiocraft智能音频和音乐生成工具部署及使用

1、概述 Facebook开源了一款名为AudioCraft的AI音频和音乐生成工具。 该工具可以直接从文本描述和参考音乐生成高质量的音频和音乐。AudioCraft包含MusicGen、AudioGen和EnCodec三个模型&#xff0c;分别实现音乐生成、音频生成和自定义音频模型构建。 2、项目地址 https://…

vulnhub靶场【DriftingBlues】之7

前言 靶机&#xff1a;DriftingBlues-6&#xff0c;IP地址192.168.1.65 攻击&#xff1a;kali&#xff0c;IP地址192.168.1.16 都采用虚拟机&#xff0c;网卡为桥接模式 主机发现 使用arp-scan -l或netdiscover -r 192.168.1.1/24 信息收集 使用nmap扫描端口 SSH服务&…

SCAU期末笔记 - Linux系统应用与开发教程样卷解析(2024版)

我真的不理解奥&#xff0c;为什么会有给样卷不自带解析的&#xff0c;对答案都没得对&#xff0c;故整理一篇 样卷1 一、选择题 1、为了遍历shell脚本调用时传入的参数&#xff0c;需要在shell脚本中使用_____。 A.$#表示参数的个数B.S表示所有参数C.$0表示脚本名D.$1表示…

spring\strust\springboot\isp前后端那些事儿

后端 一. 插入\更新一条数据&#xff08;老&#xff09; Map<String, Object> parameterMap MybatisUtil.initParameterSave("Send_ProjectFrozenLog", sendProjectFrozenLog); commonMapper.insert(parameterMap);parameterMap MybatisUtil.initParameter…

对golang的io型进程进行off-cpu分析

背景&#xff1a; 对于不能占满所有cpu核数的进程&#xff0c;进行on-cpu的分析是没有意义的&#xff0c;因为可能程序大部分时间都处在阻塞状态。 实验例子程序&#xff1a; 以centos8和golang1.23.3为例&#xff0c;测试下面的程序&#xff1a; pprof_netio.go package m…

CSS Grid 布局:属性及使用详解

CSS Grid 布局&#xff1a;属性及使用详解 一、CSS Grid 布局的基础概念二、主要的 CSS Grid 属性1、display: grid / display: inline-grid声明 Grid 容器2、grid-template-columns / grid-template-rowsGrid 容器中列和行的尺寸3、 grid-template-areas命名布局区域4、gap/ g…

【数学建模】利用Matlab绘图(2)

一、Matlab中plot函数的基本用法 在matlab中&#xff0c;函数的基本用法主要包括以下几种 第一类&#xff1a; plot(X,Y,LineSpec) 第二类&#xff1a; plot(tbl,xvar,yvar) 1.1 第一类 1.1.1x-y坐标 x和y的选择取决于绘图所需的数据类型以及图像的类型。下表列出了几种…

编写工具模块

文章目录 1.新建模块1.新建模块sun-common-tool2.sun-dependencies指定依赖3.sun-common统一管理sun-common-tool子模块4.sun-common-tool的pom.xml5.清除掉创建模块时默认sun-frame对sun-common-tool进行管理 2.常用工具类1.DateUtils.java2.EncodeUtils.java3.IpUtils.java4.…

构建一个rust生产应用读书笔记四(实战3)

从这一节开始&#xff0c;我们将继续完善邮件订阅生产级应用&#xff0c;根据作者的选型sqlx作为数据库操作的类库&#xff0c;它有如下优点&#xff1a; 它旨在提供高效、安全且易于使用的数据库交互体验。sqlx 支持多种数据库&#xff0c;包括 PostgreSQL、MySQL 和 SQLite&…

视频直播点播平台EasyDSS推拉流技术结合无人机推流在道路交通巡检场景中的应用

随着城市化进程的加速&#xff0c;交通网络日益复杂&#xff0c;交通巡检工作面临着前所未有的挑战。传统的巡检方式往往依赖于人工巡查或地面监控设备&#xff0c;但这些方法存在巡检范围有限、效率低下等缺点。 无人机凭借其高空视野、灵活机动、实时监控等优势&#xff0c;…

VBA技术资料MF238:ADO提取多文件区域指定数据到工作表

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

Mapper代理开发

引入 Mybatis入门方式中&#xff0c;以下代码仍存在硬编码问题 Mapper 代理开发&#xff1a; 目的&#xff1a; 解决原生方式中的硬编码 简化后期执行sql ------下图中&#xff0c;第一段代码是原生硬编码代码块&#xff0c;第二个是引入了Mapper代理开发的代码块。 Mapper代…

ubuntu22.04编译安装Opencv4.8.0+Opencv-contrib4.8.0教程

本章教程,主要记录在Ubuntu22.04版本系统上编译安装安装Opencv4.8.0+Opencv-contrib4.8.0的具体过程。 一、下载opencv和opencv-contrib包 wget https://github.com/opencv/opencv/archive/refs/tags/4.8.0.zip wget https://github.com/opencv/opencv_contrib/archive/refs/…

使用C语言连接MySQL

库的准备 要使用C语言连接mysql&#xff0c;需要使用mysql官网提供的connect库&#xff0c;可以去官网下载&#xff0c;由于我们要下载到 Linux 操作系统中&#xff0c;也可以使用如下指令进行安装库 sudo apt-get install libmysqlclient-dev MySQL连接C/C的库通常会安装在/us…

【Android学习】RxJava

文章目录 资料连接1. Merge & Zip操作符: 合并数据源2. Map & FlapMap & ConcatMap & Buffer: 变换操作符3. retry & retryUntil & retryWhen : 错误处理操作符4. Transformer & Compose 转换操作符5. 网络请求嵌套回调 FlatMap6. 网络请求出错重连…