当前位置: 首页 > news >正文

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.lryc.cn/news/507317.html

相关文章:

  • CentOS 7 安装、测试和部署FastDFS
  • 全志H618 Android12修改doucmentsui选中图片资源详情信息
  • 【083】基于51单片机智能烘手器【Proteus仿真+Keil程序+报告+原理图】
  • uniApp使用腾讯地图提示未添加maps模块
  • 未来趋势系列 篇五:自主可控科技题材解析和股票梳理
  • Springboot 学习 之 logback-spring.xml 日志压缩 .tmp 临时文件问题
  • maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException
  • K8s docker-compose的入门
  • 去雾Cycle-GAN损失函数
  • word实现两栏格式公式居中,编号右对齐
  • vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
  • shell脚本案例
  • 完整微服务设计 功能实现
  • JWT令牌与微服务
  • C# WinForm移除非法字符的输入框
  • 智慧商城:基于请求数据动态渲染购物车列表
  • 医疗信息化浪潮下 SSM+Vue 医院预约挂号系统的崛起
  • QScreen在Qt5.15与Qt6.8版本下的区别
  • 模具生产过程中的标签使用流程图
  • Unity-URP设置单独渲染UI相机
  • 如何使用java来解析一个pdf文件呢?
  • asp.net core发布配置端口号,支持linux
  • M3D: 基于多模态大模型的新型3D医学影像分析框架,将3D医学图像分析从“看图片“提升到“理解空间“的层次,支持检索、报告生成、问答、定位和分割等8类任务
  • JavaScript中,常用crypto模块进行rsa加密,crypto-js模块进行md5算法
  • 机器学习04-为什么Relu函数
  • 基于Arduino的自动开瓶系统
  • 通过使用 contenteditable=“true“,我们彻底防止了 iOS 系统键盘的弹出
  • 20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕
  • 搜索召回:召回聚合
  • NTFS 文件搜索库