Threejs创建胶囊体

上一章节实现了圆环结的绘制,这节来绘制胶囊体,胶囊体就是胶囊的形状,上下是一个半球,中间是一个圆柱体,如上文一样,先要创建出基础的组件,包括场景,相机,灯光,渲染器。代码如下:

复制代码
 initScene() {
      this.scene = new THREE.Scene();//创建一个Scene场景
    },
    initLight(){
      const light = new THREE.DirectionalLight(0xffffff, 1);//创建一个灯光
      this.scene.add(light)
    },
    initCamera(){
      //创建一个透视相机,视角为45度,宽高比为window窗口的宽高比,0.1为近面,10000为远面
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(50,50,50);//设置相机位置
      this.camera.lookAt(0,0,0);//设置相机位置
    },
 initRenderer(){//初始化渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container");//获取容器
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);//设置渲染器的大小
      this.container.appendChild(this.renderer.domElement);//将渲染器添加到容器中
      this.renderer.setClearColor('#FFFFFF', 1.0);//设置背景颜色
    },
    initOrbitControls(){ //创建鼠标控制工具
      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);//创建控制器
    },
    initAnimate() { //循环渲染
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(this.scene, this.camera);
    },

胶囊形状由一个圆柱体和两个半球组成。它在三维空间中呈现出一种流畅且具有一定实用性的形状。

  • 圆柱体部分提供了主体的长度和粗细,可以通过参数调整其高度和半径。
  • 两端的半球使得整体形状更加平滑,减少了尖锐的边角。

**CapsuleGeometry**的构造函数参数如下:

  1. radius:胶囊圆柱体部分的半径。决定了胶囊的粗细程度。
  2. height:胶囊的总高度,包括圆柱体部分的高度和两个半球的直径之和。这个参数可以控制胶囊的整体长度。

代码如下:

复制代码
 //胶囊模型
initCapsuleGeometry(){ 
    const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );
    const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    const capsule = new THREE.Mesh( geometry, material );
    this.scene.add( capsule );
},

但是因为颜色会纯色,看不出立体效果,我们将材质修改为只显示框架,只需要将材质修改为:

复制代码
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00, wireframe:true} );
相关推荐
爱看书的小沐18 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
郝学胜-神的一滴1 天前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
linweidong2 天前
让低端机也能飞:Canvas/WebGL/Viz 分层、降级渲染与数据抽样策略
前端框架·webgl·canvas·前端动画·前端面经·css渲染·动画优化
gis分享者3 天前
学习threejs,打造交互式花卉生成器
交互·threejs·生成·shadermaterial·花卉·planegeometry
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js
王维志6 天前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
Zuckjet_6 天前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
xhload3d6 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉