37. Three.js案例-绘制部分球体
实现效果
知识点
WebGLRenderer
WebGLRenderer 是Three.js中的一个渲染器类，用于将3D场景渲染到网页上。
构造器
WebGLRenderer( parameters : Object )
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 渲染器的配置参数，可选。 |
常用参数：
antialias：布尔值，是否开启抗锯齿，默认为false。alpha：布尔值，是否透明，默认为false。premultipliedAlpha：布尔值，是否使用预乘 alpha，默认为true。preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为false。depth：布尔值，是否启用深度测试，默认为true。stencil：布尔值，是否启用模板测试，默认为true。failIfMajorPerformanceCaveat：布尔值，如果性能不佳则失败，默认为false。powerPreference：字符串，GPU性能偏好，默认为default，可选值有default、high-performance、low-power。
方法
setPixelRatio( value : Number )：设置设备像素比。setSize( width : Number, height : Number, updateStyle : Boolean )：设置渲染器的尺寸。
Scene
Scene 是Three.js中的一个场景类，用于存储和管理3D对象。
构造器
Scene()
无参数。
属性
background：场景的背景颜色或纹理。
PerspectiveCamera
PerspectiveCamera 是Three.js中的一个透视相机类，用于模拟人眼的透视效果。
构造器
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Number | 视野角度，单位为度。 |
| aspect | Number | 相机的宽高比。 |
| near | Number | 近裁剪面距离。 |
| far | Number | 远裁剪面距离。 |
方法
position.set( x : Number, y : Number, z : Number )：设置相机的位置。lookAt( vector : Vector3 )：设置相机的朝向。rotateX( angle : Number )：绕X轴旋转。rotateY( angle : Number )：绕Y轴旋转。rotateZ( angle : Number )：绕Z轴旋转。
SphereGeometry
SphereGeometry 是Three.js中的一个球体几何体类，用于创建球体。
构造器
SphereGeometry( radius : Number, widthSegments : Integer, heightSegments : Integer, phiStart : Number, phiLength : Number, thetaStart : Number, thetaLength : Number )
| 参数 | 类型 | 描述 |
|---|---|---|
| radius | Number | 球体的半径，默认为50。 |
| widthSegments | Integer | 经度方向上的分段数，默认为8。 |
| heightSegments | Integer | 纬度方向上的分段数，默认为6。 |
| phiStart | Number | 经度起始角度，默认为0。 |
| phiLength | Number | 经度范围角度，默认为Math.PI * 2。 |
| thetaStart | Number | 纬度起始角度，默认为0。 |
| thetaLength | Number | 纬度范围角度，默认为Math.PI。 |
Mesh
Mesh 是Three.js中的一个网格类，用于将几何体和材质组合成一个3D对象。
构造器
Mesh( geometry : Geometry, material : Material )
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体。 |
| material | Material | 材质。 |
方法
position.set( x : Number, y : Number, z : Number )：设置网格的位置。
MeshNormalMaterial
MeshNormalMaterial 是Three.js中的一个材质类，用于显示几何体的法线。
构造器
MeshNormalMaterial( parameters : Object )
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 材质的配置参数，可选。 |
常用参数：
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>
演示链接
示例链接
