10. Threejs案例-绘制网格状圆环

10. Threejs案例-绘制网格状圆环

实现效果

10. Threejs案例-绘制网格状圆环_第1张图片

知识点

TorusGeometry (圆环缓冲几何体)

一个用于生成圆环几何体的类。

构造器

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

参数 类型 描述
radius Float 圆形的半径,默认值为1
segments Integer 分段的数量,最小值为3,默认值为32。
thetaStart Float 第一个分段的起始角度,默认为0。
thetaLength Float 圆形扇区的中心角,默认值是2*Pi。

MeshBasicMaterial (基础网格材质)

一个以简单着色 (平面或线框) 方式来绘制几何体的材质。
这种材质不受光照的影响。

构造器

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

参数 类型 描述
radius Float 环面的半径,从环面的中心到管道横截面的中心。默认值是1。
tube Float 管道的半径,默认值为0.4。
radialSegments Integer 管道横截面的分段数,默认值为12。
tubularSegments Integer 管道的分段数,默认值为48。
arc Float 圆环的圆心角,单位是弧度。默认值为Math.PI * 2。

代码

DOCTYPE html>
<html lang="zh">
<head>
    <title>title>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js">script>
    <script src="ThreeJS/jquery.js">script>
head>
<body>
<div id="myContainer">div>
<script>
    //创建渲染器
    const myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor("white", 1);
    $("#myContainer").append(myRenderer.domElement);
    const myScene = new THREE.Scene();
    // 窗口宽度
    const myWidth = 480;
    // 窗口高度
    const myHeight = 320;
    // 窗口宽高比
    const k = myWidth / myHeight;
    const myCamera = new THREE.OrthographicCamera(-4 * k,
            4 * k, -3 * k, 3 * k, 1, 500);//创建相机
    myCamera.position.set(0, 0, 200);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));
    //创建甜甜圈
    //THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments)
    // 创建圆环
    const myGeometry = new THREE.TorusGeometry(3, 1, 5, 180);
    // 创建材质
    const myMaterial = new THREE.MeshBasicMaterial({color: 0xB18904, wireframe: true});
    // 根据圆环和材质创建网格
    const myMesh = new THREE.Mesh(myGeometry, myMaterial);
    // 在场景中添加网格
    myScene.add(myMesh);
    //渲染甜甜圈
    myRenderer.render(myScene, myCamera);
script>
body>
html>

演示链接

示例链接

你可能感兴趣的:(Threejs,threejs,网格,圆环,TorusGeometry,wireframe)