这篇“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如何实现波纹扩散及光标浮动效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
