master

分支 (1)

管理

管理

master

threejs-project
/
case-056.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>舒迈科技-单场景-点击进入场景</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<script type="text/javascript" src="libs/jquery-1.11.2.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
		<style>
			@font-face {
				font-family: "HYQuanTangShiJ";
				src: url("./font/HYQuanTangShiJ.809c75ed.ttf");
			}

			body {
				margin: 0;
				overflow: hidden;
			}

			.lt_item {
				position: absolute;
				display: none;
			}

			.lti_top {
				display: flex;
				flex-direction: row;
				margin: 22px;
			}

			.lti_top .maobizi {
				width: 250px;
			}

			.lti_top .look {
				width: 20px;
				margin-right: 8px;
			}

			.lti_top div {
				color: white;
				display: flex;
				align-items: center;
			}

			.lti_down img {
				width: 80px;
				margin-left: 35px;
			}

			.element_title {
				width: 25px;
				padding: 15px 5px !important;
				background: rgba(43, 53, 78, .2);
				border-top: 2px solid #d39f51;
				border-bottom: 2px solid #d39f51;
				border-left: 1px solid rgba(213, 170, 104, .5);
				border-right: 1px solid rgba(213, 170, 104, .5);
				-webkit-box-shadow: 4px 3px 17px rgb(8 17 39 / 30%);
				box-shadow: 4px 3px 17px rgb(8 17 39 / 30%);
			}

			.title {
				font-size: 25px;
				color: #fff;
				letter-spacing: 3.6px;
				line-height: 30px;
				layout-flow: vertical-ideographic;
				text-align: center;
				font-family: HYQuanTangShiJ;
				cursor: pointer;
			}

			.title:hover {
				color: #fad194;
			}

			.welPage {
				position: absolute;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 100%;
				height: 100%;
				display: none;
			}

			.welPage #welPage_bg {
				width: 660px;
				height: 660px;
			}

			.welPage_top {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.welPage_top .title_img {
				position: absolute;
			}

			.welPage #btn_css {
				width: 10%;
				cursor: pointer;
				margin-top: -3%;
			}

			.title_img #welPage_text {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="lt_item animate__animated">
			<div class="lti_top">
				<img class="maobizi" src="assets/bgImage/shumai/chuangkedajie.png" />
				<div><img class="look" src="assets/datanglingjiang/look.png"><span>755686454</span></div>
			</div>
			<div class="lti_down">
				<img src="assets/datanglingjiang/map_icon.png">
			</div>
		</div>
		<div id="welPage" class="welPage animate__animated animate__fadeIn">
			<div class="welPage_top">
				<img id="welPage_bg" src="assets/bgImage/shumai/welPage-circle-background.png" alt="">
				<div class="title_img">
					<img id="welPage_text" src="assets/bgImage/shumai/title.png" alt="">
				</div>
			</div>
			<img id="btn_css" src="assets/bgImage/shumai/jinruquanjing.png" />
		</div>
		<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 {
				TWEEN
			} from './libs/jsm/tween.module.min.js';

			import {
				CSS2DRenderer,
				CSS2DObject
			} from './libs/jsm/CSS2DRenderer.js';

			var camera, scene, controls, renderer, renderer2;
			var bool = true;

			var isUserInteracting = false,
				onPointerDownMouseX = 0,
				onPointerDownMouseY = 0,
				lon = 0,
				onPointerDownLon = 0,
				lat = 0,
				onPointerDownLat = 0,
				phi = 0,
				theta = 0;

			init();
			animate();

			function initControls(camera, renderer) {
				let controls = new OrbitControls(camera, renderer.domElement)
				// 如果使用animate方法时，将此函数删除
				//controls.addEventListener( 'change', render );
				// 使动画循环使用时阻尼或自转 意思是否有惯性
				controls.enableDamping = true;
				//动态阻尼系数 就是鼠标拖拽旋转灵敏度
				controls.dampingFactor = 1.4;
				//是否可以缩放
				controls.enableZoom = false;
				//是否自动旋转
				controls.autoRotate = true;
				controls.autoRotateSpeed = 0;
				//是否开启右键拖拽
				controls.enablePan = false
				//是否开启旋转
				controls.enableRotate = false
				return controls
			}

			function init() {
				// alert("跳转")
				// location.href = "https://static-ca6a394f-62af-45cd-8d00-422c037417b3.bspapp.com/shumaikeji/index.html"
				const container = document.getElementById('container');
				scene = new THREE.Scene();

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				container.appendChild(renderer.domElement);

				camera = new THREE.PerspectiveCamera(170, window.innerWidth / window.innerHeight, 0.1, 10000);
				camera.position.set(0, 1200, 0);

				controls = initControls(camera, renderer);
				controls.update();

				const geometry = new THREE.SphereGeometry(1200, 1200, 1200);
				geometry.scale(-1, 1, 1);

				const texture = new THREE.TextureLoader().load('assets/bgImage/shumai/000.jpg');
				const material = new THREE.MeshBasicMaterial({
					map: texture
				});

				const mesh = new THREE.Mesh(geometry, material);

				scene.add(mesh);

				window.addEventListener('resize', onWindowResize);


				setTimeout(function() {
					let tween = new TWEEN.Tween({
							fov: 170,
							ars: 40,
							rot: 0,
						})
						.to({
							fov: 130,
							ars: 0,
							rot: Math.PI * 1.01,
						}, 2300)
						.easing(TWEEN.Easing.Quadratic.Out)
						.onComplete(function() {
							$(".welPage").css("display", "flex")

							TWEEN.remove(tween);
						})
						.onUpdate(function(t) {
							controls.object.fov = t.fov;
							controls.object.updateProjectionMatrix()
							mesh.rotation.y = t.rot;
						})
						.start();
				}, 1000)


				$("#btn_css").on("click", function() {
					$(".welPage").addClass("animate__fadeOut");
					setTimeout(function() {
						$(".welPage").css("display", "none")
					}, 1000)

					const cameraLook = new THREE.Vector3();
					camera.getWorldDirection(cameraLook);
					mesh.rotation.y = Math.PI * 1.01;

					let tween = new TWEEN.Tween({
							fov: camera.fov,
							z: 0,
							cy: camera.position.y,
						})
						.to({
							fov: 70,
							z: -1200,
							cy: 0,
						}, 4000)
						.easing(TWEEN.Easing.Linear.None)
						.onComplete(function() {
							controls.enableRotate = true;
							controls.enableZoom = true;
							$(".lt_item").addClass("animate__fadeInLeft");
							$(".lt_item").css("display", "block")

							TWEEN.remove(tween);
						})
						.onUpdate(function(t) {
							camera.position.y = t.cy;
							camera.fov = t.fov;
							camera.updateProjectionMatrix();
							mesh.rotation.y += 0.005;

							const target = new THREE.Vector3(0, 0, t.z);
							camera.lookAt(target);
						})
						.start();
				})

			}

			function onWindowResize() {

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

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

			}

			function animate() {
				renderer.setAnimationLoop(render);
			}

			function render() {

				TWEEN.update();

				renderer.render(scene, camera);

			}
		</script>
	</body>
</html>