master

分支 (1)

管理

管理

master

threejs-project
/
case-044.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Threejs实现波动热点效果，波动标记，波动标签显示</title>
		<meta charset="utf-8">
		<script type="text/javascript" src="libs/statistics.js"></script>
		<script type="text/javascript" src="libs/steak.js"></script>
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}

			.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;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="importmap">
			{
				"imports": {
					"three": "./libs/jsm/three.module.js"
				}
			}
		</script>
		<script type="module">
			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';

			let camera, scene, renderer, stats, gui;

			let labelRenderer;

			let grid;
			let controls;
			let carModel;

			const wheels = [];
			const doors = [];
			let bodyMaterial, detailsMaterial, glassMaterial;

			function init() {

				const container = document.getElementById('container');

				renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.setAnimationLoop(render);
				container.appendChild(renderer.domElement);

				labelRenderer = new CSS2DRenderer();
				labelRenderer.setSize(window.innerWidth, window.innerHeight);
				labelRenderer.domElement.style.position = 'absolute';
				labelRenderer.domElement.style.top = '0px';
				document.body.appendChild(labelRenderer.domElement);

				window.addEventListener('resize', onWindowResize);

				camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
				camera.position.set(4.25, 1.4, -4.5);

				controls = new OrbitControls(camera, labelRenderer.domElement);
				controls.enableDamping = true;
				controls.maxDistance = 29;
				controls.target.set(0, 0.5, 0);

				scene = new THREE.Scene();
				scene.background = new THREE.Color(0x333333);
				scene.fog = new THREE.Fog(0x333333, 10, 15);

				var ambientLight = new THREE.AmbientLight("#ffffff", 1);
				scene.add(ambientLight);

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

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

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);

				labelRenderer.setSize(window.innerWidth, window.innerHeight);

			}

			function render() {
				TWEEN.update();

				controls.update();

				renderer.render(scene, camera);
				labelRenderer.render(scene, camera);
			}

			init();
		</script>

	</body>
</html>