15. Three.js案例-绘制空心圆与实心圆_threejs 绘制圆形构建需要球形-CSDN博客

本文链接：https://blog.csdn.net/m0_51180924/article/details/144243018

15. Three.js案例-绘制空心圆与实心圆

实现效果

知识点

WebGLRenderer

WebGLRenderer 是 Three.js 中用于渲染 WebGL 场景的主要类。

构造器

WebGLRenderer(parameters : object)

参数	类型	描述
parameters	object	渲染器的配置参数。

常用参数：

antialias：布尔值，表示是否开启抗锯齿。默认为 false。
alpha：布尔值，表示是否允许透明背景。默认为 false。
preserveDrawingBuffer：布尔值，表示是否保留绘图缓冲区。默认为 false。

方法

setSize(width : Integer, height : Integer): 设置渲染器的尺寸。
render(scene : Scene, camera : Camera): 渲染指定的场景和相机。

Scene

Scene 是 Three.js 中用于存储场景对象的容器。

构造器

Scene()

方法

add(object : Object3D): 将对象添加到场景中。
remove(object : Object3D): 从场景中移除对象。

PerspectiveCamera

PerspectiveCamera 是 Three.js 中用于创建透视相机的类。

构造器

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

参数	类型	描述
fov	Float	视野角度（以度为单位）。
aspect	Float	相机的宽高比。
near	Float	近裁剪面距离。
far	Float	远裁剪面距离。

方法

position.set(x : Float, y : Float, z : Float): 设置相机的位置。
lookAt(vector : Vector3): 设置相机的朝向。

CircleGeometry

CircleGeometry 是 Three.js 中用于创建圆形几何体的类。

构造器

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

参数	类型	描述
radius	Float	圆的半径。
segments	Integer	圆的分段数，决定了圆的平滑度。
thetaStart	Float	开始角度（以弧度为单位）。
thetaLength	Float	弧度长度（以弧度为单位）。

方法

vertices.shift(): 移除第一个顶点，用于创建空心圆。

MeshBasicMaterial

MeshBasicMaterial 是 Three.js 中用于创建基本材质的类。

构造器

MeshBasicMaterial(parameters : object)

参数	类型	描述
color	Color	材质的颜色。
wireframe	Boolean	是否显示线框。
side	Integer	渲染哪一面，默认为 `FrontSide`。

Line

Line 是 Three.js 中用于创建线条对象的类。

构造器

Line(geometry : Geometry, material : Material)

参数	类型	描述
geometry	Geometry	线条的几何体。
material	Material	线条的材质。

Mesh

Mesh 是 Three.js 中用于创建网格对象的类。

构造器

Mesh(geometry : Geometry, material : Material)

参数	类型	描述
geometry	Geometry	网格的几何体。
material	Material	网格的材质。

jQuery

jQuery 是一个快速、小巧、功能丰富的库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 更加简单。

方法

$(selector).click(function() { ... }): 绑定点击事件处理器。
$(selector).append(element): 将元素添加到指定的选择器中。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<p>
    <button id="myButton1">绘制空心圆</button>
    <button id="myButton2">绘制实心圆</button>
</p>
<center id="myContainer"></center>
<script>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerHeight, window.innerHeight);
    $("#myContainer").append(myRenderer.domElement);

    // 创建场景
    var myScene = new THREE.Scene();
    myScene.background = new THREE.Color('white');

    // 创建相机
    var myCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
    myCamera.position.set(0, 0, 160);
    myCamera.lookAt(myScene.position);

    var myCircle;

    // 渲染循环
    function animate() {
        myRenderer.render(myScene, myCamera);
        requestAnimationFrame(animate);
    }

    // 绘制空心圆
    $("#myButton1").click(function () {
        if (myCircle) myScene.remove(myCircle);
        var myMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
        var myGeometry = new THREE.CircleGeometry(50, 1000);
        myGeometry.vertices.shift(); // 移除第一个顶点，创建空心圆
        myCircle = new THREE.Line(myGeometry, myMaterial);
        myScene.add(myCircle);
    });

    // 绘制实心圆
    $("#myButton2").click(function () {
        if (myCircle) myScene.remove(myCircle);
        var myMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
        var myGeometry = new THREE.CircleGeometry(50, 1000);
        myCircle = new THREE.Mesh(myGeometry, myMaterial);
        myScene.add(myCircle);
    });

    // 开始渲染
    animate();
</script>
</body>
</html>