Vue3+ThreeJS实现3D机械臂控制和预览

vlambda
2022-03-21

Vue3+ThreeJS实现3D机械臂控制和预览

一、效果预览

注：视频演示请点击阅读原文

PC端

Vue3+ThreeJS实现3D机械臂控制和预览

移动端

Vue3+ThreeJS实现3D机械臂控制和预览

二、技术栈

web端使用Vue3+element-plus UI
3D显示使用three.js

三、过程

新建Vue3项目
清除无关的新手引导代码
安装vue-router 4
配置vue-router
安装three.js
新建src/views/home/index.vue 为主页
新建src/layout/index.vue layout主页
新建src/views/home/components/Menu组件
新建src/ views/home/components/Robot3d组件

三、核心代码

使用three.js构建3D机械臂
除去必要的3D场景元素外，initRobot方法是构建机械臂的核心

总共有活动关节5个分别是：D1~D5
总共有力臂4个分别是：B1~B4
根据结构从D1开始嵌套为子节点
最终渲染生成力臂

其中的setRobotRotation方法对外提供角度控制
其中的setControlsEnabled方法对外提供视角开关控制

// 文件路径：src/views/home/components/Robot3d/manager/BaseManager.js

import * as dat from "dat.gui";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default class baseManager {
    constructor(canvas) {
        //Gui
        this.gui = new dat.GUI();
        this.gui.hide();
        //Canvas
        this.canvas = canvas
        //Sizes
        this.sizes = {}
        //Camera
        this.camera = null
        //Renderer
        this.renderer = null
        // Scene
        this.scene = new THREE.Scene();

        //AnimateTick
        this.clock = new THREE.Clock();
        this.previousTime = 0;

        this.initWindowSizes()
        this.initcamera()
        this.inLights()
        this.initHelper()
        this.initControls()
        this.initRobot()
        this.initRenderer()
        this.initAnimateTick()
    }

    /**
     * Sizes
     */
    initWindowSizes() {
        /**
         * Sizes
         */
        const sizes = {
            width: this.canvas.parentNode.clientWidth,
            height: this.canvas.parentNode.clientHeight,
        };

        window.addEventListener("resize", () => {
            // Update sizes
            sizes.width = this.canvas.parentNode.clientWidth;
            sizes.height = this.canvas.parentNode.clientHeight;
            // Update camera
            this.camera.aspect = sizes.width / sizes.height;
            this.camera.updateProjectionMatrix();

            // Update renderer
            this.renderer.setSize(sizes.width, sizes.height);
            this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        });

        this.sizes = sizes;
    }

    /**
     * Camera
     */
    initcamera() {
        // Base camera
        const camera = new THREE.PerspectiveCamera(
            75,
            this.sizes.width / this.sizes.height,
            0.1,
            100
        );
        camera.position.set(0, 4, 10);
        this.scene.add(camera);
        this.camera = camera;
    }

    /**
     * inLights
     */
    inLights() {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
        this.scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.set(1024, 1024);
        directionalLight.shadow.camera.far = 25;
        directionalLight.shadow.camera.left = -7;
        directionalLight.shadow.camera.top = 7;
        directionalLight.shadow.camera.right = 7;
        directionalLight.shadow.camera.bottom = -7;
        directionalLight.position.set(5, 5, 5);
        this.scene.add(directionalLight);
    }

    /**
     * Helper
     */
    initHelper() {
        const axes = new THREE.AxesHelper(20);
        this.scene.add(axes);

        const gridHelper = new THREE.GridHelper(100, 100);
        this.scene.add(gridHelper);
    }

    /**
     * Controls
     */
    initControls() {
        const controls = new OrbitControls(this.camera, this.canvas);
        controls.target.set(0, 0.75, 0);
        controls.enableDamping = true;
        this.controls = controls;
    }

    setControlsEnabled(enabled) {
        this.controls.enabled = enabled
    }

    /**
     * Robot
     */
    initRobot() {
        const D1 = new THREE.Mesh(
            new THREE.CylinderGeometry(1, 1, 0.5, 32),
            new THREE.MeshStandardMaterial({
                color: "#E45826",
                metalness: 0,
                roughness: 0.5,
            })
        );
        this.gui.add(D1.rotation, "y").min(-Math.PI).max(Math.PI).step(0.01);

        const D2 = new THREE.Mesh(
            new THREE.SphereGeometry(0.5, 32, 16),
            new THREE.MeshStandardMaterial({
                color: "#1B1A17",
                metalness: 0,
                roughness: 0.5,
            })
        );
        D2.position.set(0, 0.75, 0);
        // D2.rotation.z = Math.PI / 4;
        D1.add(D2);
        this.gui.add(D2.rotation, "z").min(-Math.PI).max(Math.PI).step(0.01);

        const B1 = new THREE.Mesh(
            new THREE.BoxGeometry(0.5, 3, 0.5),
            new THREE.MeshStandardMaterial({
                color: "#E45826",
                metalness: 0,
                roughness: 0.5,
            })
        );
        B1.position.set(-1.5 * Math.sin(Math.PI / 4), 1, 0);
        B1.rotation.z = Math.PI / 4;
        D2.add(B1);

        const D3 = new THREE.Mesh(
            new THREE.SphereGeometry(0.5, 32, 16),
            new THREE.MeshStandardMaterial({
                color: "#1B1A17",
                metalness: 0,
                roughness: 0.5,
            })
        );
        D3.position.set(0, 1.5, 0);
        // D3.rotation.z = -Math.PI / 2;
        B1.add(D3);
        this.gui.add(D3.rotation, "z").min(-Math.PI).max(Math.PI).step(0.01);

        const B2 = new THREE.Mesh(
            new THREE.BoxGeometry(0.5, 3, 0.5),
            new THREE.MeshStandardMaterial({
                color: "#E45826",
                metalness: 0,
                roughness: 0.5,
            })
        );
        B2.position.set(1.5, 0, 0);
        B2.rotation.z = -Math.PI / 2;
        D3.add(B2);

        const D4 = new THREE.Mesh(
            new THREE.SphereGeometry(0.5, 32, 16),
            new THREE.MeshStandardMaterial({
                color: "#1B1A17",
                metalness: 0,
                roughness: 0.5,
            })
        );
        D4.position.set(0, 1.5, 0);
        // D4.rotation.z = -Math.PI / 4;
        B2.add(D4);
        this.gui.add(D4.rotation, "z").min(-Math.PI).max(Math.PI).step(0.01);

        const B3 = new THREE.Mesh(
            new THREE.BoxGeometry(0.5, 3, 0.5),
            new THREE.MeshStandardMaterial({
                color: "#E45826",
                metalness: 0,
                roughness: 0.5,
            })
        );
        // B3.position.set(0, 1.5, 0);
        B3.position.set(1.5 * Math.cos(Math.PI / 4), 1.5 * Math.sin(Math.PI / 4), 0);
        B3.rotation.z = -Math.PI / 4;
        D4.add(B3);

        const D5 = new THREE.Mesh(
            new THREE.SphereGeometry(0.5, 32, 16),
            new THREE.MeshStandardMaterial({
                color: "#1B1A17",
                metalness: 0,
                roughness: 0.5,
            })
        );
        D5.position.set(0, 1.5, 0);
        // D5.rotation.z = -Math.PI / 2;
        B3.add(D5);
        this.gui.add(D5.rotation, "z").min(-Math.PI).max(Math.PI).step(0.01);

        const B4 = new THREE.Mesh(
            new THREE.BoxGeometry(0.5, 1, 0.5),
            new THREE.MeshStandardMaterial({
                color: "#E45826",
                metalness: 0,
                roughness: 0.5,
            })
        );
        B4.position.set(0.5, 0, 0);
        B4.rotation.z = -Math.PI / 2;
        D5.add(B4);

        D1.castShadow = true;
        D2.castShadow = true;
        B1.castShadow = true;
        D3.castShadow = true;
        B2.castShadow = true;
        D4.castShadow = true;
        B3.castShadow = true;
        D5.castShadow = true;
        B4.castShadow = true;

        this.scene.add(D1);
        this.D1 = D1
        this.D2 = D2
        this.D3 = D3
        this.D4 = D4
        this.D5 = D5
    }
    setRobotRotation(rotation, name, direction) {
        this[name].rotation[direction] = rotation
    }

    /**
     * Renderer
     */
    initRenderer() {
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.canvas,
        });
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.setSize(this.sizes.width, this.sizes.height);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        // this.renderer.setClearColor("#fff");
    }

    /**
     * AnimateTick
     */
    initAnimateTick() {
        const elapsedTime = this.clock.getElapsedTime();
        const deltaTime = elapsedTime - this.previousTime;
        this.previousTime = elapsedTime;

        //Update controls
        this.controls.update();

        // Render
        this.renderer.render(this.scene, this.camera);

        // Call tick again on the next frame
        window.requestAnimationFrame(() => {
            this.initAnimateTick()
        });
    }
}

home/components/Robot3d/index.vue实现3D场景的呈现
调用BaseManager类完成渲染
并且定义控制角度和视角开关的方法

// 路径：src/views/home/components/Robot3d/index.vue
<template>
  <canvas class="webgl" ref="webgl"></canvas>
</template>

<script setup>
import { defineExpose, onMounted } from "vue";
import BaseManager from "./manager/BaseManager.js";

let base = null;

onMounted(() => {
  base = new BaseManager(document.querySelector("canvas.webgl"));
});

const setRobotRotation = (e, name, direction) => {
  base.setRobotRotation(e, name, direction);
};

const setControlsEnabled = (enabled) => {
  base.setControlsEnabled(enabled);
};

defineExpose({ setRobotRotation, setControlsEnabled });
</script>

<style scscope>
.webgl {
  width: 100%;
  height: 100%;
  outline: none;
}
</style>

home/components/Menu/index.vue实现控制界面

// 路径：src/views/home/components/Menu/index.vue
<template>
  <el-scrollbar height="100%">
    <div class="slider-block">
      <div class="slider-item">
        <span class="demonstration">鼠标视角控制器</span>
        <el-switch v-model="mouseValue" @change="switchChange" />
      </div>
      <div class="slider-item">
        <span class="demonstration">关节一（绕Y轴旋转）</span>
        <el-slider
          v-model="value1"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D1', 'y')"
        />
      </div>
      <div class="slider-item">
        <span class="demonstration">关节二（绕Z轴旋转）</span>
        <el-slider
          v-model="value2"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D2', 'z')"
        />
      </div>
      <div class="slider-item">
        <span class="demonstration">关节三（绕Z轴旋转）</span>
        <el-slider
          v-model="value3"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D3', 'z')"
        />
      </div>
      <div class="slider-item">
        <span class="demonstration">关节四（绕Z轴旋转）</span>
        <el-slider
          v-model="value4"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D4', 'z')"
        />
      </div>
      <div class="slider-item">
        <p class="demonstration">关节五</p>
        <span class="demonstration">绕x轴旋转</span>
        <el-slider
          v-model="value5_1"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D5', 'x')"
        />
        <span class="demonstration">绕y轴旋转</span>
        <el-slider
          v-model="value5_2"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D5', 'y')"
        />
        <span class="demonstration">绕Z轴旋转</span>
        <el-slider
          v-model="value5_3"
          show-input
          :min="min"
          :max="max"
          :step="0.01"
          @input="sliderInput($event, 'D5', 'z')"
        />
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref, defineEmits } from "vue";

const mouseValue = ref(true);
const value1 = ref(0);
const value2 = ref(0);
const value3 = ref(0);
const value4 = ref(0);

const value5_1 = ref(0);
const value5_2 = ref(0);
const value5_3 = ref(0);

const min = ref(Number(-Math.PI.toFixed(2)));
const max = ref(Number(Math.PI.toFixed(2)));

const emit = defineEmits(["sliderInput", "switchChange"]);

const sliderInput = (e, name, direction) => {
  emit("sliderInput", e, name, direction);
};

const switchChange = (e) => {
  emit("switchChange", e);
};
</script>

<style scope>
.slider-block {
  padding: 20px 10px;
}
.slider-item {
  margin: 20px 0;
}
.demonstration {
  margin: 0 10px 10px 0;
}
</style>

引入home页的两个自定义组件

// 路径：src/views/home/index.vue
<template>
  <el-container>
    <el-drawer v-model="drawer" direction="ltr" size="100%">
      <el-aside>
        <Menu @sliderInput="sliderInput" @switchChange="switchChange" />
      </el-aside>
    </el-drawer>
    <el-main>
      <div class="btn" v-show="!drawer">
        <el-button
          type="primary"
          :icon="Operation"
          circle
          size="large"
          @click="drawerSwitch"
        />
      </div>
      <Robot3d ref="Robot3dRef" />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import Menu from "./components/Menu/index.vue";
import Robot3d from "./components/Robot3d/index.vue";
import { Operation } from "@element-plus/icons-vue";
const Robot3dRef = ref();
const sliderInput = (e, name, direction) => {
  Robot3dRef.value.setRobotRotation(e, name, direction);
};
const switchChange = (e) => {
  Robot3dRef.value.setControlsEnabled(e);
};

const drawer = ref(false);
const drawerSwitch = () => {
  drawer.value = !drawer.value;
};
</script>

<style scscope>
.el-aside {
  width: 100%;
  background-color: #304156;
  color: #eee;
}
.el-overlay {
  max-width: 450px;
}
.el-drawer__header {
  margin: 0;
  background-color: #304156;
  color: #eee;
}
.el-drawer__body {
  background-color: #304156;
  padding: 0;
}
.el-container {
  height: 100%;
}
.el-main {
  padding: 0;
  margin: 0;
  overflow: hidden;
  outline: none;
}
.btn {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
</style>

通过上述核心代码就能构建机械臂控制和预览

四、源码地址

https://github.com/jiangzetian/vue3-robot

五、视频预览

1. 点击阅读原文即可预览

vlambda博客
学习文章列表

Vue3+ThreeJS实现3D机械臂控制和预览

一、效果预览

二、技术栈

三、过程

三、核心代码

四、源码地址

五、视频预览

标签:

推荐阅读

相关文章

threejs引用的模型究竟是选择C4D还是Blender

采用threejs加载geojson案例

threejs:如何在场景中创建立体文字，认识精灵模型

vlambda博客 学习文章列表

Vue3+ThreeJS实现3D机械臂控制和预览

一、效果预览

二、技术栈

三、过程

三、核心代码

四、源码地址

五、视频预览

标签:

推荐阅读

相关文章

threejs引用的模型究竟是选择C4D还是Blender

采用threejs加载geojson案例

threejs:如何在场景中创建立体文字，认识精灵模型

vlambda博客
学习文章列表