threeJs如何實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果

這篇“threeJs如何實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“threeJs如何實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果”文章吧。

版本介紹

threejs版本

"version": "0.142.0",

vue版本

"version": "^3.0.0"

node版本

"version": "14.18.2"

正文

思路主要是：

• 建立圓柱模型，記得把上下兩個(gè)面去除

• 建立立標(biāo)模型

• 模型放在public文件下的model文件夾中

• 在動(dòng)畫(huà)里面做一個(gè)position.x，y，z的操作

核心代碼

// 擴(kuò)散動(dòng)畫(huà)
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 > 10){
  this.group2.scale.x = 1
  this.group2.scale.y = 1
  this.group2.scale.z = 1
}

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

導(dǎo)入即用

1. 新建一個(gè)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; // 圓柱網(wǎng)格
  private scene: any; // 場(chǎng)景
  private camera: any; // 相機(jī)
  private renderer: any; // 渲染器
  private group: any; // 新的組對(duì)象，控制模型
  private group2: any; // 圓柱體模組
  private group3: any; // 圓柱體模組-普通點(diǎn)
  private group4: any; // 點(diǎn)位模型
  private controls: any; // 創(chuàng)建控件對(duì)象
  private path: any; // 路徑
  private objName: any; // 模型
  private mtlName: any; // 材質(zhì)
  private cameraX: Number; // 相機(jī)x
  private cameraY: Number; // 相機(jī)y
  private cameraZ: Number; // 相機(jī)z
  private objSize: Number; // 模型倍數(shù)
  private modelSpeed: Number; // 旋轉(zhuǎn)速度
  private screenWidth: Number; // 旋轉(zhuǎn)速度
  private screenHeight: Number; // 旋轉(zhuǎn)速度
  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) {
    // 場(chǎng)景寬高
    const width: any = instance && instance.clientWidth;
    const height: any = instance && instance.clientHeight;
    this.screenWidth = width;
    this.screenHeight = height;
    // 1. 創(chuàng)建場(chǎng)景對(duì)象Scene
    this.scene = new THREE.Scene();
    // 2. 創(chuàng)建相機(jī)對(duì)象fov 代表視角\aspect 寬高比\near 最近看到\far 最遠(yuǎn)看到
    this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 200000);
    // 設(shè)置相機(jī)位置(眼睛位置或者說(shuō)相機(jī)篇拍照位置x,y,z)
    this.camera.position.set(600, 300, 100);
    // 設(shè)置相機(jī)視角的角度
    this.camera.lookAt(0, 0, 0);
    // 3.創(chuàng)建組和模型
    this.group2 = new THREE.Group() // 組-總光圈
    this.group4 = new THREE.Group() // 組-光標(biāo)
    // 創(chuàng)建光圈-總的
    this.loadGlbCylinder('Cylinder2.glb', '0', true,10,0,0,0);
    // 標(biāo)注點(diǎn)
    this.loadGlbPoint('biaozhi.glb', '0', true,20);
    // 把group對(duì)象添加到場(chǎng)景中
    this.scene.add(this.group);
    this.scene.add(this.group2);
    this.scene.add(this.group3);
    this.scene.add(this.group4);
    // 4. 創(chuàng)建光源
    this.createPoint();
    // 5. 創(chuàng)建渲染器對(duì)象
    this.renderer = new THREE.WebGLRenderer();
    // 設(shè)置渲染器的大小
    this.renderer.setSize(Number(width), Number(height));
    // 增加背景顏色
    this.renderer.setClearColor(0xeeeeee, 0);
    // 將渲染器添加到div中
    instance && instance.append(this.renderer.domElement);
    // 7. 動(dòng)畫(huà)旋轉(zhuǎn)
    this.animate();
  }
  // 創(chuàng)建glb模型-圓柱體
  /**
   *
   * @param obj 文件名字
   * @param name 模型名字
   * @param showFlag 是否展示
   * @param scale 放大倍數(shù)
   * @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); // 模型坐標(biāo)偏移量xyz
        model.scale.set(scale, scale, scale);
        model.name = name;
        model.visible = showFlag;
        model.traverse((object:any) => {
          if (object.isMesh) { // 開(kāi)啟透明度
            object.material.transparent = true;//開(kāi)啟透明
            object.material.opacity = 0.3;//設(shè)置透明度
          }
        })
        this.group2.add(model);
      },
      undefined,
      function (e) {
        console.error(e);
      }
    );
  }
  /**
   *  創(chuàng)建glb模型-圓柱體-普通
   * @param obj 文件名字
   * @param name 模型名字
   * @param showFlag 是否展示
   * @param scale 放大倍數(shù)
   * @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); // 模型坐標(biāo)偏移量xyz
        model.scale.set(scale, scale, scale);
        model.name = name;
        model.visible = showFlag;
        model.traverse((object:any) => {
          if (object.isMesh) { // 開(kāi)啟透明度
            object.material.transparent = true;//開(kāi)啟透明
            object.material.opacity = 1;//設(shè)置透明度
          }
        })
        this.group4.add(model);
      },
      undefined,
      function (e) {
        console.error(e);
      }
    );
  }
  // 創(chuàng)建光源
  createPoint() {
    //環(huán)境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    // ambientLight.position.set(400, 200, 300);
    this.scene.add(ambientLight);
  }
  // 動(dòng)畫(huà)效果
  animate() {
    const clock = new THREE.Clock();
    // 渲染
    const renderEvent = () => {
      // const spt = clock.getDelta() * 1000; // 毫秒
      // console.log("一幀的時(shí)間:毫秒", spt);
      // console.log("幀率FPS", 1000 / spt);
      //循環(huán)調(diào)用函數(shù)，請(qǐng)求再次執(zhí)行渲染函數(shù)render，渲染下一幀
      requestAnimationFrame(renderEvent);
      // 將場(chǎng)景和攝像機(jī)傳入到渲染器中
      this.renderer.render(this.scene, this.camera);
      // 圍繞物體y軸自轉(zhuǎn)
      // this.group.rotation.y -= 0.002;
      // 圓柱體擴(kuò)散動(dòng)畫(huà)
      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
      }
      // 上下移動(dòng)
      const time = Date.now() * 0.005
      this.group4.position.y = Math.cos( time ) * 1.75 + 2.25
    };
    renderEvent();
  }
}

2. 在要用的頁(yè)面導(dǎo)入

• 在頁(yè)面建立dom

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

• 導(dǎo)入js

import ThreeD from "@/utils/threeD_fixed";

• 在onmounted中使用

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

以上就是關(guān)于“threeJs如何實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。