04-threejs创建胶囊体

一、新建项目

1、我这里的项目名字是drawcapsule

vue create drawcapsule

2、下载three.js

npm install three --force

二、在项目中使用

1、新建base.js文件，设置挂载点

export class Text {
  dom = null
  constructor(dom){
  this.dom = dom
  }
}

2、使用

组件中引入，并使用

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

<script>
import { Text } from './js/base';
export default {
  name: 'HelloWorld',
  data() {
    return {
      Text: null,
    };
  },
  mounted() {
    this.Text = new Text(this.$refs.text);
  },
};
</script>

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

3、引入相机，场景和渲染器

1、在base,js文件中引入

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

2、创建渲染器

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

3、创建相机

  // 创建相机
    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)

3、创建场景

  // 创建场景
  const scene = new Scene()
  this.scene = scene
  renderer.render(scene,camera)

4、创建一个添加模块的方法

 addModal(...modal){
    modal.forEach(elem => {

      this.scene.add(elem)  // 场景添加模型
    })
  }

4、创建胶囊体

1、新建js文件，我这里是capaule.js,引入网格，材质和胶囊几何体

import {CapsuleGeometry,MeshStandardMaterial,Mesh} from 'three'

2、创建胶囊体对象

export const capules = []

3、创建胶囊几何体

const geometry = new CapsuleGeometry(10,10,10,18)

CapsuleGeometry(radius : Float, length : Float, capSubdivisions : Integer, radialSegments : Integer)
radius — 胶囊半径。可选的; 默认值为1。
length — 中间区域的长度。可选的; 默认值为1。
capSegments — 构造盖子的曲线部分的个数。可选的; 默认值为4。
radialSegments — 覆盖胶囊圆周的分离的面的个数。可选的; 默认值为8。

4、添加材质

const material = new MeshStandardMaterial({color:0xffffff,wireframe:true,emissive:0xffffff})
capules.push(capsule)

color:颜色
wireframe：将几何体渲染为线框。默认值为false（即渲染为平面多边形）
emissive：材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

5、创建光线

1、引入

import { AmbientLight,PointLight   } from "three"

2、创建

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)

3、添加

allLights.push(ambientLight,pointLight)

6、组件中添加光线和胶囊体

1、引入

import { capules } from './js/capaule';
import { allLights } from './js/light';

2、使用

   this.Capule.addModal(...capules);
    this.Capule.addModal(...allLights);

7、添加轨道控制器

1、引入
在base.js文件中引入

 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

2、使用，记得添加MOUSE类

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

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

8、让几何体自己动起来

1、在base.js中引入胶囊几何体

 import {capules} from './capaule.js'

2、添加逐帧渲染页面方法

let animate = ()=>{
    capules.forEach(item=>{
      item.rotation.x += 0.01
      item.rotation.y += 0.01
    })
    renderer.render(scene,camera)

    requestAnimationFrame(animate)
  }
    animate()

三、总体代码

1、base.js

// 引入场景,相机,渲染器
import { Scene,PerspectiveCamera,WebGL1Renderer,Vector3,MOUSE
 } from "three";
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import {capules} from './capaule.js'
export class Capule {
  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)

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

    // 创建场景
  const scene = new Scene()
  renderer.render(scene,camera)
  let animate = ()=>{
    capules.forEach(item=>{
      item.rotation.x += 0.01
      item.rotation.y += 0.01
    })
    renderer.render(scene,camera)

    requestAnimationFrame(animate)
  }

    this.scene = scene
    this.dom = dom
    animate()
  }

  addModal(...modal){
    modal.forEach(elem => {

      this.scene.add(elem)  // 场景添加模型
    })
  }

}

2、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)
// 两个参数第一个为光线的颜色，第二个为光线的强度

3、capaule.js

import {CapsuleGeometry,MeshStandardMaterial,Mesh} from 'three'
export const capules = []
const geometry = new CapsuleGeometry(10,10,10,18)
const material = new MeshStandardMaterial({color:0xffffff,wireframe:true,emissive:0xffffff})
const capsule = new Mesh(geometry,material)

capules.push(capsule)

4、组件

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

<script>
import { Capule } from './js/base';
import { capules } from './js/capaule';
import { allLights } from './js/light';
export default {
  name: 'HelloWorld',
  data() {
    return {
      Capule: null,
    };
  },
  mounted() {
    this.Capule = new Capule(this.$refs.capule);
    this.Capule.addModal(...capules);
    this.Capule.addModal(...allLights);
  },
};
</script>

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

四、效果