master

分支 (1)

管理

管理

master

threejs-project
/
case-058.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>舒迈科技-VR眼镜</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 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';

			import {
				VRButton
			} from './libs/jsm/webxr/VRButton.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 = true;
				//是否自动旋转
				controls.autoRotate = true;
				controls.autoRotateSpeed = 0;
				//设置相机距离原点的最远距离
				controls.minDistance = 100;
				//设置相机距离原点的最远距离
				controls.maxDistance = 1200;
				//是否开启右键拖拽
				controls.enablePan = true
				//是否开启旋转
				controls.enableRotate = true
				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);

				renderer.xr.enabled = true;
				container.appendChild(VRButton.createButton(renderer));


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

				controls = initControls(camera, renderer);

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

			function onWindowResize() {

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

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

			}

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

			function render() {
				controls.update();

				renderer.render(scene, camera);

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