three.js实现扩散波效果

2024-01-09 11:46:46

three.js实现扩散波效果

图例

在这里插入图片描述

步骤

  1. 创建一个圆柱,不要顶与底面
  2. 材质允许透明,双面显示
  3. 动态修改缩放与透明度

代码

<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;
let s = 0; // 缩放
let p = 160; // 透明度
init();
render();
function init() {
  // 场景
  scene = new THREE.Scene();

  // 相机
  camera = new THREE.PerspectiveCamera(
    45,
    canvasWidth / canvasHeight,
    1,
    10000
  );
  camera.position.set(600, 600, 600);
  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.CylinderGeometry(50, 50, 20, 32, 1, true);
  const m = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
    side: THREE.DoubleSide,
    transparent: true,
  });
  mesh = new THREE.Mesh(g, m);
  mesh.position.set(0, 10, 0);
  scene.add(mesh);
  console.log(mesh);
}

function render() {
  if (s > 160) {
    s = 0;
    p = 160;
  }
  mesh.scale.set(1 + s / 60, 1, 1 + s / 60);
  mesh.material.opacity = p / 160;
  s++;
  p--;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
onMounted(() => {
  canvesRef.value.appendChild(renderer.domElement);
});
</script>

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

文章来源:https://blog.csdn.net/yunbabac/article/details/135474991
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。