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

news/2024/12/20 6:41:54/

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

实现效果

效果

知识点

Three.js基础

WebGLRenderer_10">WebGLRenderer

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

构造器

new THREE.WebGLRenderer(parameters)
参数类型描述
parametersobject可选参数,用于配置渲染器。包括但不限于 antialias(抗锯齿)、alpha(透明度)等。

方法

  • setPixelRatio(value): 设置设备像素比。
  • setSize(width, height): 设置渲染器的尺寸。
  • setClearColor(color, alpha): 设置渲染器的背景颜色。
  • shadowMap.enabled: 启用或禁用阴影映射。
  • render(scene, camera): 渲染场景。

Scene

SceneThree.js中的场景对象,用于存储所有需要渲染的对象。

构造器

new THREE.Scene()

Camera

PerspectiveCameraThree.js中的一种透视相机,用于模拟人眼的视觉效果。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)
参数类型描述
fovfloat视野角度,单位为度。
aspectfloat相机宽高比。
nearfloat近裁剪面距离。
farfloat远裁剪面距离。

方法

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

PointLight

PointLightThree.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

MeshThree.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

MeshStandardMaterialThree.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.ppmy.cn/news/1556591.html

相关文章

【Python】pandas库---数据分析

大学毕业那年&#xff0c;你成了社会底层群众里&#xff0c;受教育程度最高的一批人。 前言 这是我自己学习Python的第四篇博客总结。后期我会继续把Python学习笔记开源至博客上。 上一期笔记有关Python的NumPy数据分析&#xff0c;没看过的同学可以去看看&#xff1a;【Pyt…

SAP抓取外部https报错SSL handshake处理方法

一、问题描述 SAP执行报表抓取https第三方数据,数据获取失败。 报错消息: SSL handshake with XXX.COM:449 failed: SSSLERR_SSL_READ (-58)#SAPCRYPTO:SSL_read() failed##SapSSLSessionStartNB()==SSSLERR_SSL_READ# SSL:SSL_read() failed (536875120/0x20001070)# …

MySQL LEFT JOIN 性能优化策略

文章目录 写在文章开头详解MySQL left join场景描述讲讲join的原理能不能说说这个LEFT JOIN如何加索引left join on 左右字段是否都需要加索引?为什么?你觉得针对联表查询还有那些优化技巧小结参考写在文章开头 连接查询算是日常比较常用的数据库关联关键字涉及左外连接、右…

排序算法深度好文(图解 + 代码解析 + 误区 QA )——学排序看这一篇就够了!!!

排序算法 一、概述 1. 内部排序 (1) 冒泡排序 (2) 选择排序 a. 简单选择排序 b. 堆排序 (3) 插入排序 a. 直接插入排序 b. 希尔排序 (4) 快速排序 快速排序 hoare 版本 快速排序挖坑法 优化一随机化快速排序 优化二中位数三分法 (5) 归并排序 (6) 基数排序 2. …

1095. 格子图2

题目描述 给出一个 n ∗ m n*m n∗m的格子图,你从左上角 ( 0 , 0 ) (0,0) (0,0)出发,每次只能向右走或者向下走,问有多少种方法能走到 ( n , m ) (n,m) (n,m)这个格子? 输入 一行,两个整数 n n n, m m m,其中 n < = 1000000 n<=1000000 n<=

【机器学习】乱象中寻序,虚实间求真:统计学连接数据与真理的桥梁

文章目录 统计学基础&#xff1a;揭开机器学习的数学面纱前言一、统计学的核心概念1.1 描述统计1.1.1 集中趋势的测量1.1.2 离散程度的测量1.1.3 数据分布与偏态 1.2 推断统计1.2.1 样本与总体1.2.2 假设检验1.2.3 置信区间 二、推断统计&#xff1a;从样本到总体的桥梁2.1 样本…

HCIA-Access V2.5_3_1_1_VLAN技术原理_VLAN概述_VLAN产生的原因

本章导读 接入网设备大部分工作在二层网络&#xff0c;VLAN的产生为传统的LAN网络注入了新的活力&#xff0c;引起了LAN应用的一场变革。 本章介绍了在交换机中怎样配置VLAN&#xff0c;详细描述了VALN数据帧在交换机与交换机之间传递过程中的变化情况。 你可以带着这些问题…

特征维度远大于样本量时候的过拟合问题

为什么特征维度远大于样本量会导致过拟合&#xff1f; 维度灾难 当特征维度远大于样本量时&#xff0c;会出现所谓的"维度灾难"(curse of dimensionality)。在高维空间中&#xff0c;数据变得非常稀疏&#xff0c;模型有太多的"自由度"来拟合这些稀疏的数…