master

分支 (1)

管理

管理

master

threejs-project
/
case-055.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">
		<style>
			@font-face {
				font-family: "HYQuanTangShiJ";
				src: url("./font/HYQuanTangShiJ.809c75ed.ttf");
			}

			body {
				margin: 0;
				overflow: hidden;
			}
		</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 {
				TWEEN
			} from './libs/jsm/tween.module.min.js';

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

			var camera, scene, controls, renderer, renderer2;

			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 = true;
				//是否自动旋转
				controls.autoRotate = true;
				controls.autoRotateSpeed = 0;
				//是否开启右键拖拽
				controls.enablePan = false
				//是否开启旋转
				controls.enableRotate = false
				return controls
			}

			function init() {
				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(130, 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);
				mesh.rotation.y = Math.PI * 1.01;

				scene.add(mesh);

				window.addEventListener('resize', onWindowResize);


				setTimeout(function() {
					const cameraLook = new THREE.Vector3();
					camera.getWorldDirection(cameraLook);

					let tween = new TWEEN.Tween({
							fov: camera.fov,
							z: 0,
							cy: camera.position.y,
						})
						.to({
							fov: 70,
							z: -1200,
							cy: 0,
						}, 2300)
						.easing(TWEEN.Easing.Linear.None)
						.onComplete(function() {
							controls.enableRotate = true;
							controls.enableZoom = true;

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

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


			function onWindowResize() {

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

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

			}

			function animate() {

				TWEEN.update();

				renderer.render(scene, camera);

				requestAnimationFrame(animate);

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