threeJs实现波纹扩散及光标浮动效果详解

Elsa ·

更新时间:2024-09-20

· 788 次阅读

版本介绍

threejs版本

vue版本

node版本

正文

核心代码

导入即用

1. 新建一个ts文件

2. 在要用的页面导入

版本介绍 threejs版本

"version": "0.142.0",

vue版本

"version": "^3.0.0"

node版本

"version": "14.18.2"

正文

思路主要是：

建立圆柱模型，记得把上下两个面去除

建立立标模型

模型放在public文件下的model文件夹中

在动画里面做一个position.x，y，z的操作

效果如下

核心代码

// 扩散动画
this.group2.scale.x = this.group2.scale.x + 0.1
this.group2.scale.y = this.group2.scale.y - 0.01
this.group2.scale.z = this.group2.scale.z + 0.1
if(this.group2.scale.x &gt; 10){
  this.group2.scale.x = 1
  this.group2.scale.y = 1
  this.group2.scale.z = 1
}

// 上下抖动
const time = Date.now() * 0.005
this.group4.position.y = Math.cos( time ) * 1.75 + 2.25

导入即用 1. 新建一个ts文件

import * as THREE from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
export default class ThreeD {
  private cylinderRadius: any; // 圆柱体半径
  private cylinderOpacity: any; // 圆柱体透明度
  private cylinderMesh: any; // 圆柱网格
  private scene: any; // 场景
  private camera: any; // 相机
  private renderer: any; // 渲染器
  private group: any; // 新的组对象，控制模型
  private group2: any; // 圆柱体模组
  private group3: any; // 圆柱体模组-普通点
  private group4: any; // 点位模型
  private controls: any; // 创建控件对象
  private path: any; // 路径
  private objName: any; // 模型
  private mtlName: any; // 材质
  private cameraX: Number; // 相机x
  private cameraY: Number; // 相机y
  private cameraZ: Number; // 相机z
  private objSize: Number; // 模型倍数
  private modelSpeed: Number; // 旋转速度
  private screenWidth: Number; // 旋转速度
  private screenHeight: Number; // 旋转速度
  constructor(
    cameraX: Number,
    cameraY: Number,
    cameraZ: Number,
    objSize: Number,
    modelSpeed: number
  ) {
    // this.path = path;
    // this.objName = objName;
    // this.mtlName = mtlName || null;
    this.cameraX = cameraX;
    this.cameraY = cameraY;
    this.cameraZ = cameraZ;
    this.objSize = objSize;
    this.screenWidth = 0
    this.screenHeight = 0
  }
  /**
   * 初始化
   * @param instance 容器dom
   */
  initThree(instance: HTMLElement | null) {
    // 场景宽高
    const width: any = instance && instance.clientWidth;
    const height: any = instance && instance.clientHeight;
    this.screenWidth = width;
    this.screenHeight = height;
    // 1. 创建场景对象Scene
    this.scene = new THREE.Scene();
    // 2. 创建相机对象fov 代表视角\aspect 宽高比\near 最近看到\far 最远看到
    this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 200000);
    // 设置相机位置(眼睛位置或者说相机篇拍照位置x,y,z)
    this.camera.position.set(600, 300, 100);
    // 设置相机视角的角度
    this.camera.lookAt(0, 0, 0);
    // 3.创建组和模型
    this.group2 = new THREE.Group() // 组-总光圈
    this.group4 = new THREE.Group() // 组-光标
    // 创建光圈-总的
    this.loadGlbCylinder('Cylinder2.glb', '0', true,10,0,0,0);
    // 标注点
    this.loadGlbPoint('biaozhi.glb', '0', true,20);
    // 把group对象添加到场景中
    this.scene.add(this.group);
    this.scene.add(this.group2);
    this.scene.add(this.group3);
    this.scene.add(this.group4);
    // 4. 创建光源
    this.createPoint();
    // 5. 创建渲染器对象
    this.renderer = new THREE.WebGLRenderer();
    // 设置渲染器的大小
    this.renderer.setSize(Number(width), Number(height));
    // 增加背景颜色
    this.renderer.setClearColor(0xeeeeee, 0);
    // 将渲染器添加到div中
    instance && instance.append(this.renderer.domElement);
    // 7. 动画旋转
    this.animate();
  }
  // 创建glb模型-圆柱体
  /**
   *
   * @param obj 文件名字
   * @param name 模型名字
   * @param showFlag 是否展示
   * @param scale 放大倍数
   * @param x
   * @param y
   * @param z
   */
  loadGlbCylinder(obj:string,
                  name:string,
                  showFlag:any,
                  scale:number,
                  x:number,
                  y:number,
                  z:number) {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("three/js/libs/draco/gltf/");
    const loader = new GLTFLoader();
    loader.setDRACOLoader(dracoLoader);
    loader.load(
      `model/${obj}`,
      (gltf) => {
        const model = gltf.scene;
        model.position.set(x, y, z); // 模型坐标偏移量xyz
        model.scale.set(scale, scale, scale);
        model.name = name;
        model.visible = showFlag;
        model.traverse((object:any) => {
          if (object.isMesh) { // 开启透明度
            object.material.transparent = true;//开启透明
            object.material.opacity = 0.3;//设置透明度
          }
        })
        this.group2.add(model);
      },
      undefined,
      function (e) {
        console.error(e);
      }
    );
  }
  /**
   *  创建glb模型-圆柱体-普通
   * @param obj 文件名字
   * @param name 模型名字
   * @param showFlag 是否展示
   * @param scale 放大倍数
   * @param x
   * @param y
   * @param z
   */
  loadGlbPoint(obj:string,
               name:string,
               showFlag:any,
               scale:number) {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("three/js/libs/draco/gltf/");
    const loader = new GLTFLoader();
    loader.setDRACOLoader(dracoLoader);
    loader.load(
      `model/${obj}`,
      (gltf) => {
        const model = gltf.scene;
        model.position.set(0, 0, 0); // 模型坐标偏移量xyz
        model.scale.set(scale, scale, scale);
        model.name = name;
        model.visible = showFlag;
        model.traverse((object:any) => {
          if (object.isMesh) { // 开启透明度
            object.material.transparent = true;//开启透明
            object.material.opacity = 1;//设置透明度
          }
        })
        this.group4.add(model);
      },
      undefined,
      function (e) {
        console.error(e);
      }
    );
  }
  // 创建光源
  createPoint() {
    //环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    // ambientLight.position.set(400, 200, 300);
    this.scene.add(ambientLight);
  }
  // 动画效果
  animate() {
    const clock = new THREE.Clock();
    // 渲染
    const renderEvent = () => {
      // const spt = clock.getDelta() * 1000; // 毫秒
      // console.log("一帧的时间:毫秒", spt);
      // console.log("帧率FPS", 1000 / spt);
      //循环调用函数，请求再次执行渲染函数render，渲染下一帧
      requestAnimationFrame(renderEvent);
      // 将场景和摄像机传入到渲染器中
      this.renderer.render(this.scene, this.camera);
      // 围绕物体y轴自转
      // this.group.rotation.y -= 0.002;
      // 圆柱体扩散动画
      this.group2.scale.x = this.group2.scale.x + 0.5
      this.group2.scale.y = this.group2.scale.y - 0.01
      this.group2.scale.z = this.group2.scale.z + 0.5
      if(this.group2.scale.x > 50){
        this.group2.scale.x = 1
        this.group2.scale.y = 1
        this.group2.scale.z = 1
      }
      // 上下移动
      const time = Date.now() * 0.005
      this.group4.position.y = Math.cos( time ) * 1.75 + 2.25
    };
    renderEvent();
  }
}

2. 在要用的页面导入

在页面建立dom

<div class="zong-model" ref="dom"></div>

导入js

import ThreeD from "@/utils/threeD_fixed";

在onmounted中使用

threeObj = new ThreeD(8, 50, 60, 1, 2);
dom.value && threeObj.initThree(dom.value);

以上就是threeJs实现波纹扩散及光标浮动效果详解的详细内容，更多关于threeJs波纹扩散光标浮动的资料请关注软件开发网其它相关文章！

threejs 动效

1024 个赞

需要登录后方可回复, 如果你还没有账号请注册新账号

使用html2canvas对有百度地图的Dom元素处理成图片的解决

Harmony 2020-05-26

613

The application has failed...(应用程序配置不正确)

Kate 2020-10-21

997

详解Flutter如何绘制曲线,折线图及波浪动效

Thadea 2022-10-24

1495

Android仿高德首页三段式滑动效果的示例代码

Celandine 2022-10-24

1319

vue3中如何用threejs画一些简单的几何体

Nafisa 2022-10-25

858

threejs后期处理的基本使用方法之加特效

Laurie 2022-10-25

285

vue实现左右点击滚动效果

Viveka 2022-10-25

Android Flutter实现有趣的页面滚动效果

Rhea 2022-10-26

1111

DS-SDK封装ThreeJS的三维场景核心库Viewer

Jayne 2022-11-05

1824

微信小程序实现顶部固定底部分页滚动效果

Carly 2022-11-06

vue+threejs写物体动画之物体缩放动画效果

Xylona 2022-11-06

1226

vue2.x引入threejs的实例代码

Oralie 2022-11-06

1081

ThreeJS从创建场景到使用功能实例详解

Tertia 2022-11-06

1748

微信小程序实现商品数据联动效果

Tulla 2022-11-09

1630

微信小程序纯CSS实现无限弹幕滚动效果

Miette 2022-11-18

990

JS实战例子之实现自动打字机动效

Kathy 2023-01-29

1789

Jetpack Compose实现对角线滚动效果

Peony 2023-02-26

1712

JavaScript+Canvas实现带跳动效果的粒子动画

Viveka 2023-03-15

1364

threeJs实现波纹扩散及光标浮动效果详解

Elsa 2023-03-17

788

一文带你彻底搞懂Behavior实现复杂的视觉联动效果原理

Gretel 2023-05-12

1537

我要提问

致谢

帮助他人，成就自己。

人生最大成功就是伸出热情而温暖的双手，尽自己所能去帮助身边的每一个人，只要无私的奉献，就会收获到美好的生活。

1024问感谢每一位朋友的帮助和支持。

软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识，也提供大量的软件开发在线实例、从入门到精通就在1024问。

育儿网微养生全球行美食街育儿菜谱大全海南旅游女性养狗百科星座