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

server/2024/12/22 10:26:57/

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/server/152209.html

相关文章

苍穹外卖-前端部分(持续更新中)

d 第二种&#xff1a;cmd中输入 vue ui进入图形化界面选择npm,vue2进行创建 先将创建的Vue框架导入Vsocde开发工具 然后ctrshiftp 输入npm 点击serve将项目启动 下这种写法跨域会报错&#xff1a; 解决方法&#xff1a; 注意 这种用法&#xff1a;&#xff08;不是单引号&…

端到端自动驾驶大模型:视觉-语言-动作模型 VLA

模型框架定义、模型快速迭代能力是考查智驾团队出活能力的两个核心指标。在展开讨论Vision-Language-Action Models(VLA)之前&#xff0c;咱们先来讨论端到端自动驾驶大模型设计。 目录 1. 端到端自动驾驶大模型设计 1.1 模型输入设计 1.2 模型输出设计 1.3 实现难点分析 …

#{ }和${ } 、参数处理

目录 #{ }和${ } 参数处理 入参-parameterType 使用Map 使用Bean / List<Bean> 使用多参数 Param注解&#xff08;命名参数&#xff09; 出参-resultType 返回Map / List<Map> 返回Map<String,Map> 属性名不一致-resultMap结果映射 #{ }和${ }…

HarmonyOS(71) 自定义事件分发之TouchTestStrategy使用说明

TouchTestStrategy 1、前言2、TouchTestStrategy简介2.1、TouchTestStrategy枚举类型简介2.2、TouchTestStrategy.DEFAULT效果1.3、TouchTestStrategy.FORWARD_COMPETITION效果2.3、TouchTestStrategy.FORWARD效果3、参考资料1、前言 本文根据官方文档自定义事件分发整理而来,…

汽车气候控制传感器

红外温度传感器在过程控制和制造中使用了多年&#xff0c;现在已被接受用于乘用车。必须解决生产、可靠性和成本问题。此外&#xff0c;还必须解决复杂的信号调节和校准问题。 红外温度传感器在过程控制和制造中使用了多年&#xff0c;现在已被接受用于乘用车。必须解决生产、…

无人机加激光雷达高效率实时建模技术详解

无人机与激光雷达的结合在实时三维点云建模成像技术中展现出了高效率与高精度&#xff0c;这种技术结合了无人机的灵活性与激光雷达的高精度测量能力&#xff0c;以下是该技术的详细介绍&#xff1a; 技术原理 1. 激光雷达&#xff08;LiDAR&#xff09;&#xff1a; 定义&am…

HarmonyOS 输入框组件:TextInput 和 TextArea 深度解析

输入框组件是移动端开发中最常见的组件之一&#xff0c;常用于响应用户的输入操作&#xff0c;比如评论区的文本输入、聊天框的消息输入、表单内容填写等场景。在 HarmonyOS 中&#xff0c;TextInput 和 TextArea 分别用于单行和多行输入操作。除此之外&#xff0c;它们还可以与…

Unity Shader学习日记 part 2 线性代数--矩阵

矩阵的基础概念这里就不用说了。 先来看看矩阵的乘法 矩阵乘法 对于矩阵A*矩阵B有这样的要求 1.左边矩阵的&#xff08;A&#xff09;列数等于右边矩阵的&#xff08;B&#xff09;的行数 2.相乘的的结果是一个左边矩阵的&#xff08;A&#xff09;行数*右边矩阵&#xff08;…