three.js实现信号波效果

最新推荐文章于 2025-01-17 14:44:35 发布

是云呀！

最新推荐文章于 2025-01-17 14:44:35 发布

阅读量550

点赞数 10

分类专栏： three.js 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/yunbabac/article/details/135479666

版权

three.js实现信号波效果

图例

在这里插入图片描述

步骤

创建平面，添加贴图，平移几何体
缩放

代码

<template>
  <div class="app">
    <div ref="canvesRef" class="canvas-wrap"></div>
  </div>
</template>

<script setup>
import {
    ref, onMounted } from "vue";
import * as THREE from "three";
import {
    OrbitControls } from "three/addons/controls/OrbitControls.js";

const canvesRef = ref(null);
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
let scene;
let camera;
let renderer;
let axesHelper;
let ca