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

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

实现效果

效果

知识点

Three.js基础

WebGLRenderer

WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。

构造器

new THREE.WebGLRenderer(parameters)
参数类型描述
parametersobject可选参数,用于配置渲染器。包括但不限于 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)
参数类型描述
fovfloat视野角度,单位为度。
aspectfloat相机宽高比。
nearfloat近裁剪面距离。
farfloat远裁剪面距离。

方法

  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向。

PointLight

PointLight 是Three.js中的点光源,用于模拟从一个点发出的光。

构造器

new THREE.PointLight(color, intensity, distance, decay)
参数类型描述
colorcolor光源颜色。
intensityfloat光源强度。
distancefloat光源的最大影响距离。如果为0,则表示无限远。
decayfloat光源衰减系数。默认值为1。

属性

  • castShadow: 是否投射阴影。
  • distance: 光源的最大影响距离。
  • intensity: 光源强度。

SphereBufferGeometry

SphereBufferGeometry 用于创建一个球体几何体。

构造器

new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
参数类型描述
radiusfloat球体半径。
widthSegmentsint经度方向上的分段数。默认值为8。
heightSegmentsint纬度方向上的分段数。默认值为6。
phiStartfloat球体起始经度。默认值为0。
phiLengthfloat球体经度范围。默认值为2π。
thetaStartfloat球体起始纬度。默认值为0。
thetaLengthfloat球体纬度范围。默认值为π。

Mesh

Mesh 是Three.js中的网格对象,用于将几何体和材质组合在一起。

构造器

new THREE.Mesh(geometry, material)
参数类型描述
geometryGeometry几何体对象。
materialMaterial材质对象。

属性

  • castShadow: 是否投射阴影。
  • receiveShadow: 是否接收阴影。

PlaneGeometry

PlaneGeometry 用于创建一个平面几何体。

构造器

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数类型描述
widthfloat平面的宽度。
heightfloat平面的高度。
widthSegmentsint宽度方向上的分段数。默认值为1。
heightSegmentsint高度方向上的分段数。默认值为1。

MeshStandardMaterial

MeshStandardMaterial 是Three.js中的一种标准材质,支持物理光照模型。

构造器

new THREE.MeshStandardMaterial(parameters)
参数类型描述
parametersobject可选参数,用于配置材质。包括但不限于 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>

演示链接

示例链接

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

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

相关文章

websocket再项目中的使用

WebSocket在项目中的使用‌主要包括以下几个方面&#xff1a; ‌WebSocket的基本概念和原理‌&#xff1a; ‌定义‌&#xff1a;WebSocket是一种基于TCP的协议&#xff0c;实现了浏览器与服务器之间的全双工通信。它通过HTTP/1.1协议的101状态码进行握手&#xff0c;建立连接‌…

el-table表格嵌套子表格:展开所有内容;对当前展开行内容修改,当前行默认展开;

原文1 原文2 原文3 一、如果全部展开 default-expand-all"true" 二、设置有数据的行打开下拉 1、父table需要绑定两个属性expand-row-key和row-key <el-table:data"tableData":expand-row-keys"expends" //expends是数组&#xff0c;设置…

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

&#x1f3a5; 作者简介&#xff1a; CSDN\阿里云\腾讯云\华为云开发社区优质创作者&#xff0c;专注分享大数据、Python、数据库、人工智能等领域的优质内容 &#x1f338;个人主页&#xff1a; 长风清留杨的博客 &#x1f343;形式准则&#xff1a; 无论成就大小&#xff0c;…

NOTEBOOK_11 汽车电子设备分享(工作经验)

汽车电子设备分享 摘要 本文主要列出汽车电子应用的一些实验设备和生产设备&#xff0c;部分会给予一定推荐。目录 摘要一、通用工具&#xff1a;二、测量与测试仪器2.1测量仪器2.2无线通讯测量仪器2.3元器件测试仪2.4安规测试仪2.5电源供应器2.6电磁兼容测试设备2.7可靠性环境…

利用两种方式分别实现单例模式(懒汉式、饿汉式)

package testsingle;//实现单例的两种方式 public class TestMySingle {public static void main(String[] args) {ClassA ca1 ClassA.getClassA();ClassA ca2 ClassA.getClassA();System.out.println(ca1ca2);ClassB cb1 ClassB.getClassB();ClassB cb2 ClassB.getClassB(…

linux centos 7 安装 mongodb7

MongoDB 是一个基于文档的 NoSQL 数据库。 MongoDB 是一个文档型数据库&#xff0c;数据以类似 JSON 的文档形式存储。 MongoDB 的设计理念是为了应对大数据量、高性能和灵活性需求。 MongoDB使用集合&#xff08;Collections&#xff09;来组织文档&#xff08;Documents&a…

微服务设计原则——功能设计

文章目录 1.ID生成2.数值精度3.DB操作4.性能测试5.版本兼容5.1 向旧兼容5.2 向新兼容 6.异步时序问题7.并发问题7.1 并发时序7.2 并发数据竞争 参考文献 1.ID生成 在分布式系统中&#xff0c;生成全局唯一ID是非常重要的需求&#xff0c;因为需要确保不同节点、服务或实例在并…

opengl 着色器 (四)最终章收尾

颜色属性 在前面的教程中&#xff0c;我们了解了如何填充VBO、配置顶点属性指针以及如何把它们都储存到一个VAO里。这次&#xff0c;我们同样打算把颜色数据加进顶点数据中。我们将把颜色数据添加3个float值到vertices数组。我们将把三角形的三个角分别指定为红色、绿色和蓝色…

矩阵在资产收益(Asset Returns)中的应用:以资产回报矩阵为例(中英双语)

本文中的例子来源于&#xff1a; 这本书&#xff0c;网址为&#xff1a;https://web.stanford.edu/~boyd/vmls/ 矩阵在资产收益(Asset Returns)中的应用&#xff1a;以资产回报矩阵为例 在量化金融中&#xff0c;矩阵作为一种重要的数学工具&#xff0c;被广泛用于描述和分析…

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

作者&#xff1a;Youzhi Liu, Fanglong Yao*, Yuanchang Yue, Guangluan Xu, Xian Sun, Kun Fu 单位&#xff1a;中国科学院大学电子电气与通信工程学院&#xff0c;中国科学院空天信息创新研究院网络信息系统技术重点实验室 原文链接&#xff1a;NavAgent: Multi-scale Urba…

【Leetcode Top 100】199. 二叉树的右视图

问题背景 给定一个二叉树的 根节点 r o o t root root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 数据约束 二叉树的节点个数的范围是 [ 0 , 100 ] [0,100] [0,100] − 100 ≤ N o d e . v a l ≤ 100…

校园点餐订餐外卖跑腿Java源码

简介&#xff1a; 一个非常实用的校园外卖系统&#xff0c;基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化&#xff0c;提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合&am…

Android AOSP 源码中批量替换“phone“为“tablet“的命令详解

我来帮你写一篇关于这条命令的分析博客。 Android 项目中批量替换"phone"为"tablet"的命令详解 前言 在 Android 开发中,有时我们需要批量修改资源文件中的某些文本内容。今天我们来分析一条结合了 grep 和 sed 的强大命令,该命令用于将项目中的 “ph…

[计算机网络]ARP协议的故事:小明找小红的奇妙旅程

1.ARP小故事 在一个繁忙的网络世界中&#xff0c;每个设备都有自己的身份标识——MAC地址&#xff0c;就像每个人的身份证号码一样。在这个故事里&#xff0c;我们的主角小明&#xff08;主机&#xff09;需要找到小红&#xff08;目标主机&#xff09;的MAC地址&#xff0c;才…

YOLOv9-0.1部分代码阅读笔记-autoanchor.py

autoanchor.py utils\autoanchor.py 目录 autoanchor.py 1.所需的库和模块 2.def check_anchor_order(m): 3.def check_anchors(dataset, model, thr4.0, imgsz640): 4.def kmean_anchors(dataset./data/coco128.yaml, n9, img_size640, thr4.0, gen1000, verboseTrue…

arcgisPro将面要素转成CAD多段线

1、说明&#xff1a;正常使用【导出为CAD】工具&#xff0c;则导出的是CAD三维多线段&#xff0c;无法进行编辑操作、读取面积等。这是因为要素面中包含Z值&#xff0c;导出则为三维多线段数据。需要利用【复制要素】工具禁用M值和Z值&#xff0c;再导出为CAD&#xff0c;则得到…

c# iis 解决跨域问题

该错误是一个典型的跨域问题&#xff0c;说明从 http://www.fuc.com 发起的请求被目标服务器&#xff08;https://aip.baidubce.com&#xff09;拒绝&#xff0c;原因是目标服务器未返回正确的 AccessControlAllowOrigin 响应头。 解决方法 1. 了解问题的本质 CORS&#xff08…

vue+springboot+cas配置及cookie传递问题

cookie的注意事项 前边的文章已经介绍过cookie的基本信息&#xff0c;这里再次说明一点&#xff1a;cookie是无法进行跨域传递的&#xff0c;很多时候cookie无法设置和传递都是因为跨域问题&#xff0c;ip/端口不一致。 主要就是&#xff1a;被设置cookie和要传递cookie的地址…

java数据类型(补充-引用类型)

Java还提供了引用数据类型&#xff08;Reference Types&#xff09;。这些类型的变量存储的是对象的引用&#xff0c;而不是直接存储值。引用数据类型主要包括以下几类&#xff1a; 类型描述类(Class)每个对象都有自己的状态&#xff08;属性或字段&#xff09;、行为&#xf…

simulink离散传递函数得到差分方程并用C语言实现

一. 创建连续时间的传递函数 G ( s ) s 2 217 s s 2 384 s 8989 G(s) \frac{s^2217s}{s^2384s8989} G(s)s2384s8989s2217s​ 二. 离散连续时间的传递函数G(s) 2.1 在matlab中用c2d函数双线性变换法离散G(s)&#xff0c; 下面是matlab脚本代码 % 创建连续时间传递函数 …