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);
    },

ConeGeometry(圆锥几何体)用于创建圆锥形状的三维几何体。

ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

  • radius:圆锥底面半径,决定圆锥底部的大小。默认值为 1。
  • height:圆锥的高度,从底面到顶点的距离。默认值为 1。
  • radialSegments:圆锥侧面圆周方向的分段数,决定圆锥侧面的平滑程度。默认值为 8。
  • heightSegments:圆锥高度方向的分段数,影响圆锥在高度上的平滑度。默认值为 1。
  • openEnded :一个布尔值,决定圆锥的底面是否开放。如果为true,则圆锥底面没有面,只有侧面;如果为false,则圆锥是封闭的,既有侧面也有底面。默认值为false
  • thetaStart:圆锥侧面起始角度,以弧度表示。默认值为 0。
  • thetaLength:圆锥侧面的角度范围,以弧度表示。默认值为 2π,即完整的圆周。、

代码如下:

 //创建圆锥体
initConeGeometry(){ 
      const geometry = new THREE.ConeGeometry(1, 2, 32);
      const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC'} ); //创建材质,颜色为白色#CCCCCC
      const cone = new THREE.Mesh( geometry, material ); //通过geometry和材质创建网格模型
      this.scene.add( cone ); //将网格模型添加到场景中
    },

效果如下:

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

      const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC',wireframe:true} ); //创建材质,颜色为白色#CCCCCC
相关推荐
gis分享者1 天前
学习threejs,导入FBX格式骨骼绑定模型
threejs·骨骼动画·fbx
gis分享者2 天前
学习threejs,对模型多个动画切换展示
threejs·动画切换
allenjiao2 天前
webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
webgl·云渲染·threejs·服务器渲染·后端渲染·云流化·三维云渲染
gis分享者7 天前
学习threejs,使用TWEEN插件实现动画
threejs·tween·补间动画
优雅永不过时·7 天前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
gis分享者9 天前
学习threejs,使用第一视角控制器FirstPersonControls控制相机
threejs·第一人称视角
gis分享者10 天前
学习threejs,使用导入的模型生成粒子
threejs·模型粒子化
gis分享者17 天前
学习threejs,将多个网格合并成一个网格
threejs·网格合并
优雅永不过时·18 天前
three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合
前端·javascript·css3·threejs·three
优雅永不过时·19 天前
使用three.js 实现 自定义绘制平面的效果
前端·javascript·平面·github·threejs·着色器