three.js实现雷达扫描效果(纹理贴图)

three.js实现雷达扫描效果(纹理贴图)

图例

步骤

  1. 创建两个平面,分别纹理贴图,底图模型.add(光波模型)
  2. 关闭材质的深度测试
  3. 光波旋转

代码

javascript 复制代码
<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 cameraControls;
let mesh;
init();
render();
function init() {
  // 场景
  scene = new THREE.Scene();

  // 相机
  camera = new THREE.PerspectiveCamera(
    45,
    canvasWidth / canvasHeight,
    1,
    10000
  );
  camera.position.set(300, 300, 300);
  camera.lookAt(0, 0, 0);
  // 模型
  addModel();
  // 坐标辅助对象
  axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper);

  // 渲染器
  //antialias - 是否执行抗锯齿。默认为false.
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(canvasWidth, canvasHeight);
  // 相机轨道控制器
  cameraControls = new OrbitControls(camera, renderer.domElement);
}

function addModel() {
  // 底图
  const g = new THREE.PlaneGeometry(50, 50);
  const texture = new THREE.TextureLoader().load(
    "../src/assets/img/雷达扫描-底图.png"
  );
  const m = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide,
    color: 0x00ffff,
    transparent: true,
    opacity: 0.6,
    depthTest: false, //是否在渲染此材质时启用深度测试
  });
  const baseMesh = new THREE.Mesh(g, m);
  baseMesh.rotateX(-Math.PI / 2);
  scene.add(baseMesh);

  // 光
  const texture2 = new THREE.TextureLoader().load(
    "../src/assets/img/雷达扫描-光波.png"
  );
  const m2 = new THREE.MeshBasicMaterial({
    map: texture2,
    side: THREE.DoubleSide,
    color: 0x00ffff,
    transparent: true,
    opacity: 0.6,
    depthTest: false,
  });
  mesh = new THREE.Mesh(g, m2);
  // mesh.position.set(0, 10, 0);
  baseMesh.add(mesh);
}

function render() {
  renderer.render(scene, camera);
  mesh.rotateZ(0.02);
  requestAnimationFrame(render);
}
onMounted(() => {
  canvesRef.value.appendChild(renderer.domElement);
});
</script>

<style lang="scss" scoped>
.app {
  position: relative;
}
</style>

图片(透明的)


相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休5 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪5 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do5 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选6 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——6 小时前
前端登录鉴权详解
前端·javascript
李姆斯6 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理