threeJs如何实现波纹扩散及光标浮动效果

这篇“threeJs如何实现波纹扩散及光标浮动效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“threeJs如何实现波纹扩散及光标浮动效果”文章吧。

版本介绍

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.1this.group2.scale.y = this.group2.scale.y - 0.01this.group2.scale.z = this.group2.scale.z + 0.1if(this.group2.scale.x > 10){  this.group2.scale.x = 1  this.group2.scale.y = 1  this.group2.scale.z = 1}

// 上下抖动const time = Date.now() * 0.005this.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  }    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模型-圆柱体    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);      }    );  }    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如何实现波纹扩散及光标浮动效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。