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);