master

分支 (1)

管理

管理

master

Graphics-Issue-1
/
进阶.html

<!DOCTYPE html>
<html>

<head>
	<title>three.js css3d - youtube</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
	<style>
		body {
			background-color: #ffffff;
		}

		#blocker {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
	</style>
</head>

<body>
	<div id="container"></div>
	<div id="blocker"></div>

	<!-- Import maps polyfill -->
	<!-- Remove this when import maps will be widely supported -->
	<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

	<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

	<script type="module">

		import * as THREE from 'three';

		import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
		import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';

		let camera, scene, renderer;
		let controls;

		function Element(id, x, y, z, ry) {

			const div = document.createElement('div');
			div.style.width = '480px';
			div.style.height = '360px';
			div.style.backgroundColor = '#000';

			const iframe = document.createElement('iframe');
			iframe.style.width = '480px';
			iframe.style.height = '360px';
			iframe.style.border = '0px';
			iframe.src = ['https://player.bilibili.com/player.html?aid=225381699', id, '?rel=0'].join('');
			div.appendChild(iframe);

			const object = new CSS3DObject(div);
			object.position.set(x, y, z);
			object.rotation.y = ry;

			return object;

		}

		init();
		animate();

		function init() {

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

			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
			camera.position.set(500, 350, 750);

			scene = new THREE.Scene();

			renderer = new CSS3DRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			container.appendChild(renderer.domElement);

			const group = new THREE.Group();
			group.add(new Element('56869892', 0, 0, 240, 0));
			group.add(new Element('225381699', 240, 0, 0, Math.PI / 2));
			group.add(new Element('915223158', 0, 0, - 240, Math.PI));
			group.add(new Element('909158462', - 240, 0, 0, - Math.PI / 2));
			scene.add(group);

			controls = new TrackballControls(camera, renderer.domElement);
			controls.rotateSpeed = 4;

			window.addEventListener('resize', onWindowResize);

			// Block iframe events when dragging camera

			const blocker = document.getElementById('blocker');
			blocker.style.display = 'none';

			controls.addEventListener('start', function () {

				blocker.style.display = '';

			});
			controls.addEventListener('end', function () {

				blocker.style.display = 'none';

			});

		}

		function onWindowResize() {

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

		}

		function animate() {

			requestAnimationFrame(animate);
			controls.update();
			renderer.render(scene, camera);

		}

	</script>
</body>

</html>