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。

代码

html 复制代码

<!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>

演示链接

示例链接