05-threejs画车削缓冲几何体

，主要用于渲染具体旋转特性的物体，比如花瓶、球体等

一、前言

关于如何创建项目和如何下载three在之前的文章中都有很详细的介绍，如果找不到文章的地址，请点击这里https://blog.csdn.net/jiuliangliang/article/details/135356970?spm=1001.2014.3001.5501

二、项目中使用

1、新建base.js文件

1、引入相机，渲染器，场景

import { Scene,WebGL1Renderer,PerspectiveCamera } from "three";

2、创建相机，渲染器，场景

 // 创建渲染器
    const renderer = new WebGL1Renderer({antialias:true})
    renderer.setSize(dom.offsetWidth,dom.offsetHeight,true)
    dom.appendChild(renderer.domElement)

     // 创建相机
     const camera = new PerspectiveCamera(45,dom.offsetWidth/dom.offsetHeight,1,1000)
     // 设置相机自身的位置
     camera.position.set(50,50,50)
     // 设置相机看向的位置
     camera.lookAt(new Vector3(0,0,0))
     // 设置相机自身位置
     camera.up = new Vector3(0,1,0)

    const scene = new Scene()
    renderer.render(scene,camera)
    this.scene = scene

3、创建逐帧渲染动画

    let animate = ()=>{
      renderer.render(scene,camera)
      requestAnimationFrame(animate)
    }
    animate()

2、新建lathe.js文件

1、引入网格，材质，几何体，二维向量数学库

import {Vector2,LatheGeometry,MeshBasicMaterial,Mesh} from 'three'

2、创建几何体

export const points = []
const point = []
for ( let i = 0; i < 10; i ++ ) {
	point.push( new Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
const geometry = new LatheGeometry( point,55 );
const material = new MeshBasicMaterial( { color: 0xffffff,wireframe:true} );
export const lathe = new Mesh( geometry, material );
points.push(lathe)

3、创建light.js文件

1、创建光线

import { AmbientLight,PointLight   } from "three"
export const allLights = []
export const ambientLight = new AmbientLight('rgb(255,255,255)', 0.8)
export const pointLight = new PointLight(
  'rgb(0,0,0)',
  0.5,
  600,
  0.2
)
pointLight.position.set(0, 100, 200)
// 同时添加到光线数组中去
allLights.push(ambientLight,pointLight)
// 两个参数第一个为光线的颜色，第二个为光线的强度

4、组件中引入和使用

1、引入

import { points } from './js/lathe';
import { allLights } from './js/light';

2、使用

  this.Lathe.addModal(...points);
  this.Lathe.addModal(...allLights);

三、总体代码

1、组件

<template>
  <div class="hello">
    <div id="lathe" ref="lathe"></div>
  </div>
</template>

<script>
import { Lathe } from './js/base';
import { points } from './js/lathe';
import { allLights } from './js/light';
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      Lathe: null,
    };
  },
  mounted() {
    this.Lathe = new Lathe(this.$refs.lathe);
    this.Lathe.addModal(...points);
    this.Lathe.addModal(...allLights);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#lathe {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  margin: 0 auto;
}
</style>

2、base.js

import { Scene,WebGL1Renderer,PerspectiveCamera,Vector3,MOUSE } from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import {lathe} from './lathe'
export class Lathe {
  dom = null;

  constructor(dom){
    // 创建渲染器
    const renderer = new WebGL1Renderer({antialias:true})
    renderer.setSize(dom.offsetWidth,dom.offsetHeight,true)
    dom.appendChild(renderer.domElement)

     // 创建相机
     const camera = new PerspectiveCamera(45,dom.offsetWidth/dom.offsetHeight,1,1000)
     // 设置相机自身的位置
     camera.position.set(50,50,50)
     // 设置相机看向的位置
     camera.lookAt(new Vector3(0,0,0))
     // 设置相机自身位置
     camera.up = new Vector3(0,1,0)

    const scene = new Scene()
    renderer.render(scene,camera)
    this.scene = scene
    let orbitControls = new OrbitControls(camera, renderer.domElement)
    orbitControls.mouseButtons = {  // 设置鼠标功能键（轨道控制器）
      LEFT: MOUSE.ROTATE,  // 左键旋转
      MIDDLE: MOUSE.DOLLY,  // 中键缩放
      RIGHT: MOUSE.ROTATE   // 右键旋转
    }

    let animate = ()=>{
      renderer.render(scene,camera)
      lathe.rotation.x += 0.01
      lathe.rotation.y += 0.01
      requestAnimationFrame(animate)
    }
    animate()
    this.dom = dom
  }
  addModal(...modal){
    modal.forEach(elm=>{
      this.scene.add(elm)
    })
  }
}

3、light.js

import { AmbientLight,PointLight   } from "three"
export const allLights = []
export const ambientLight = new AmbientLight('rgb(255,255,255)', 0.8)
export const pointLight = new PointLight(
  'rgb(0,0,0)',
  0.5,
  600,
  0.2
)
pointLight.position.set(0, 100, 200)
// 同时添加到光线数组中去
allLights.push(ambientLight,pointLight)
// 两个参数第一个为光线的颜色，第二个为光线的强度

四、效果