37. Three.js案例-绘制部分球体

news/2024/12/23 12:42:54/

37. Three.js案例-绘制部分球体

实现效果

效果

知识点

WebGLRenderer_8">WebGLRenderer

WebGLRendererThree.js中的一个渲染器类,用于将3D场景渲染到网页上。

构造器

WebGLRenderer( parameters : Object )

参数类型描述
parametersObject渲染器的配置参数,可选。

常用参数:

  • antialias:布尔值,是否开启抗锯齿,默认为false
  • alpha:布尔值,是否透明,默认为false
  • premultipliedAlpha:布尔值,是否使用预乘 alpha,默认为true
  • preserveDrawingBuffer:布尔值,是否保留绘图缓冲区,默认为false
  • depth:布尔值,是否启用深度测试,默认为true
  • stencil:布尔值,是否启用模板测试,默认为true
  • failIfMajorPerformanceCaveat:布尔值,如果性能不佳则失败,默认为false
  • powerPreference:字符串,GPU性能偏好,默认为default,可选值有defaulthigh-performancelow-power
方法
  • setPixelRatio( value : Number ):设置设备像素比。
  • setSize( width : Number, height : Number, updateStyle : Boolean ):设置渲染器的尺寸。

Scene

SceneThree.js中的一个场景类,用于存储和管理3D对象。

构造器

Scene()

无参数。

属性
  • background:场景的背景颜色或纹理。

PerspectiveCamera

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

构造器

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

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

SphereGeometry

SphereGeometryThree.js中的一个球体几何体类,用于创建球体。

构造器

SphereGeometry( radius : Number, widthSegments : Integer, heightSegments : Integer, phiStart : Number, phiLength : Number, thetaStart : Number, thetaLength : Number )

参数类型描述
radiusNumber球体的半径,默认为50
widthSegmentsInteger经度方向上的分段数,默认为8
heightSegmentsInteger纬度方向上的分段数,默认为6
phiStartNumber经度起始角度,默认为0
phiLengthNumber经度范围角度,默认为Math.PI * 2
thetaStartNumber纬度起始角度,默认为0
thetaLengthNumber纬度范围角度,默认为Math.PI

Mesh

MeshThree.js中的一个网格类,用于将几何体和材质组合成一个3D对象。

构造器

Mesh( geometry : Geometry, material : Material )

参数类型描述
geometryGeometry几何体。
materialMaterial材质。
方法
  • position.set( x : Number, y : Number, z : Number ):设置网格的位置。

MeshNormalMaterial

MeshNormalMaterialThree.js中的一个材质类,用于显示几何体的法线。

构造器

MeshNormalMaterial( parameters : Object )

参数类型描述
parametersObject材质的配置参数,可选。

常用参数:

  • wireframe:布尔值,是否以线框模式显示,默认为false
  • transparent:布尔值,是否透明,默认为false

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setPixelRatio(window.devicePixelRatio);myRenderer.setSize(window.innerWidth, window.innerHeight);$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();myScene.background = new THREE.Color('white');// 创建相机var myCamera = new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);myCamera.position.set(1.5599116746198947, 1.509078998195788, 5.593688956725154);myCamera.lookAt(new THREE.Vector3(0, 0, 0));myCamera.rotateX(-0.26350903631970135);myCamera.rotateY(0.2630069577395451);myCamera.rotateZ(0.07002478056650097);// 创建部分球体几何体var mySphereGeometry = new THREE.SphereGeometry(2, 8, 10, Math.PI / 6, Math.PI / 2);var mySphereMaterial = new THREE.MeshNormalMaterial({wireframe: true, transparent: true});var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);mySphereMesh.position.set(-2, -2, 0);myScene.add(mySphereMesh);// 渲染部分球体myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接


http://www.ppmy.cn/news/1557463.html

相关文章

基于Spring Boot的医院质控上报系统

一、系统背景与意义 医院质控上报系统旨在通过信息化手段&#xff0c;实现医院质量控制的标准化、流程化和自动化管理。该系统能够帮助医院实时监控医疗质量数据&#xff0c;及时发现和处理潜在的质量问题&#xff0c;从而确保医疗服务的安全性和有效性。同时&#xff0c;系统…

C# 23种设计模式(5)命令模式(Command Pattern)

一、命令模式介绍 命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c;它将一个请求封装为一个对象&#xff0c;从而允许用户用不同的请求、队列请求、记录请求日志&#xff0c;以及支持可撤销的操作等。命令模式的主要目的是将请求的执行者和请求…

深入了解Java在人工智能领域的最新应用

Java不仅是传统企业级开发的主要语言&#xff0c;在人工智能&#xff08;AI&#xff09;领域也表现出强大的适应能力。随着AI技术的飞速发展&#xff0c;Java在机器学习框架、大数据分析以及深度学习中发挥了重要作用。本文将重点介绍Java在AI领域的最新进展与实际应用场景。 …

在Excel中如果制作可以自动填充的序号,删除或者合并单元也可用

大家好&#xff0c;我是小鱼。在日常的办公中有时需要制作带序号的表格&#xff0c;这样可以通过序号来直观地看到有多少条信息&#xff0c;但是如果普通的批量添加序号的话&#xff0c;一旦我们删除或者合并某几行数据&#xff0c;前面的序号不会自动更新&#xff0c;序号显示…

如何解决微信小程序使用webview无法打开

问题&#xff1a; 微信小程序使用 webview 但是页面无法打卡 解决&#xff1a; 1、登录微信小程序后台&#xff0c;管理–>开发管理–>鼠标下滑到 -->业务域名 2、根据指示配置一下就可以了 记住&#xff01; 这里下载文件&#xff0c;要上传到您所要展示文件的域名…

学习ASP.NET Core的身份认证(基于JwtBearer的身份认证3)

根据参考文献1中JWT Token的组成及计算方式&#xff0c;对照参考文献2中的界面&#xff0c;实现简单的JWT Token解析及验证程序&#xff0c;主要功能包括&#xff1a;   1&#xff09;拆分Token字符串&#xff0c;将前两段使用Base64UrlEncoder类解码并转为UTF8字符串&#x…

Linux入门攻坚——42、Nginx及web站点架构模式

对于lvs集群&#xff0c;是一个四层路由的集群&#xff0c;Director无需启用对端口的监控&#xff0c;直接将报文转发给后端业务服务器RealServer。 使用Nginx也可以实现集群功能&#xff0c;Nginx实现反向代理&#xff0c;实现的是七层上的转发&#xff0c;要求Nginx本身就是…

java.util.ConcurrentModificationException异常出现的原因及解决方法

上一篇博客&#xff1a; 写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油…