Three.js实现波动热点的两种方法-开发者社区-阿里云

Threejs实现波动热点效果，波动标记，波动标签显示

2022-10-19 930

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Threejs实现波动热点效果，波动标记，波动标签显示

1，介绍

该示例使用Three.js库 r141版本。

主要实现功能：使用Three.js实现波动热点效果，两种方式。

方式一：Sprite精灵+缩放动画实现。

方式二：CSS2DRenderer，CSS 3D渲染器实现

效果图如下：

这里需要引入的js库

import * as THREE from 'three';
import {
  OrbitControls
} from './libs/jsm/OrbitControls.js';
import {
  CSS2DRenderer,
  CSS2DObject
} from './libs/jsm/CSS2DRenderer.js';
import {
  TWEEN
} from './libs/jsm/tween.module.min.js';

Sprite精灵+缩放动画实现，这里用到了Tween.js

const map = new THREE.TextureLoader().load("assets/textures/hotspot.png");
const material = new THREE.SpriteMaterial({
  map: map
});
const sprite = new THREE.Sprite(material);
sprite.scale.set(0.3, 0.3, 0.3);
sprite.position.set(1.5, 0.8, 0.2);
scene.add(sprite);
const spriteTween = new TWEEN.Tween({
  scale: 0.2
}).to({
  scale: 0.13
}, 1500).easing(TWEEN.Easing.Quadratic.Out);
spriteTween.onUpdate(function(that) {
  sprite.scale.set(that.scale, that.scale, that.scale);
});
spriteTween.yoyo(true);
spriteTween.repeat(Infinity);
spriteTween.start();

CSS2DRenderer方式实现

波动css样式代码

.status {
  width: 30px;
  height: 30px;
  position: relative;
}
.solid {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 100%;
}
.status .animate1,
.status .animate2 {
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
@keyframes circle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0.1;
  }
}
.status .animate1 {
  -webkit-animation: circle 2s 0s ease-out infinite running;
  animation: circle 2s 0s ease-out infinite running;
}
.status .animate2 {
  -webkit-animation: circle 2s 1s ease-out infinite running;
  animation: circle 2s 1s ease-out infinite running;
}

实现标签js代码

const waves = document.createElement('div');
waves.className = 'status';
const solid = document.createElement('div');
solid.className = 'solid';
const animate1 = document.createElement('div');
animate1.className = 'animate1';
const animate2 = document.createElement('div');
animate2.className = 'animate2';
waves.appendChild(solid);
waves.appendChild(animate1);
waves.appendChild(animate2);
const wavesLabel = new CSS2DObject(waves);
wavesLabel.position.set(1, 0.8, 0.2);
scene.add(wavesLabel);