julapy/gist:e5c3df1f51ed23025e92f7be5ee0d0a5

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js ar - dragging</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
		<script type="importmap">
			{
				"imports": {
					"three": "https://unpkg.com/three@0.148.0/build/three.module.js",
					"three/addons/": "https://unpkg.com/three@0.148.0/examples/jsm/"
				}
			}
		</script>
		<script type="module">

			import * as THREE from 'three';
			import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
			import { ARButton } from 'three/addons/webxr/ARButton.js';
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';

			let container;
			let camera, scene, renderer;
			let group;
			let composer;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				camera.position.set( 0, 0, 3 );

				const controls = new OrbitControls( camera, container );
				controls.minDistance = 0;
				controls.maxDistance = 8;

				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );

				const light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 0, 6, 0 );
				scene.add( light );

				group = new THREE.Group();
				scene.add( group );

				const geometries = [
					new THREE.BoxGeometry( 0.2, 0.2, 0.2 ),
					new THREE.ConeGeometry( 0.2, 0.2, 64 ),
					new THREE.CylinderGeometry( 0.2, 0.2, 0.2, 64 ),
					new THREE.IcosahedronGeometry( 0.2, 8 ),
					new THREE.TorusGeometry( 0.2, 0.04, 64, 32 )
				];

				for ( let i = 0; i < 50; i ++ ) {

					const geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
					const material = new THREE.MeshStandardMaterial( {
						color: Math.random() * 0xffffff,
						roughness: 0.7,
						metalness: 0.0
					} );

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

					object.position.x = Math.random() * 4 - 2;
					object.position.y = Math.random() * 4 - 2;
					object.position.z = Math.random() * 4 - 2;

					object.rotation.x = Math.random() * 2 * Math.PI;
					object.rotation.y = Math.random() * 2 * Math.PI;
					object.rotation.z = Math.random() * 2 * Math.PI;

					object.scale.setScalar( Math.random() + 0.5 );

					group.add( object );

				}

				//

				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.xr.enabled = true;
				container.appendChild( renderer.domElement );

				document.body.appendChild( ARButton.createButton( renderer ) );

				// effects composer

				composer = new EffectComposer(renderer);
				const renderPass = new RenderPass(scene, camera);
				composer.addPass(renderPass);

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

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

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

				composer.setSize( window.innerWidth, window.innerHeight );
			}

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

			function render() {
				composer.render();
				// renderer.render( scene, camera );
			}

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js ar - dragging</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
	<!-- Import maps polyfill -->
	<!-- Remove this when import maps will be widely supported -->
	<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/three@0.148.0/build/three.module.js",
	"three/addons/": "https://unpkg.com/three@0.148.0/examples/jsm/"
	}
	}
	</script>
	<script type="module">

	import * as THREE from 'three';
	import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
	import { ARButton } from 'three/addons/webxr/ARButton.js';
	import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
	import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
	import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';

	let container;
	let camera, scene, renderer;
	let group;
	let composer;

	init();
	animate();

	function init() {

	container = document.createElement( 'div' );
	document.body.appendChild( container );

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
	camera.position.set( 0, 0, 3 );

	const controls = new OrbitControls( camera, container );
	controls.minDistance = 0;
	controls.maxDistance = 8;

	scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );

	const light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 6, 0 );
	scene.add( light );

	group = new THREE.Group();
	scene.add( group );

	const geometries = [
	new THREE.BoxGeometry( 0.2, 0.2, 0.2 ),
	new THREE.ConeGeometry( 0.2, 0.2, 64 ),
	new THREE.CylinderGeometry( 0.2, 0.2, 0.2, 64 ),
	new THREE.IcosahedronGeometry( 0.2, 8 ),
	new THREE.TorusGeometry( 0.2, 0.04, 64, 32 )
	];

	for ( let i = 0; i < 50; i ++ ) {

	const geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
	const material = new THREE.MeshStandardMaterial( {
	color: Math.random() * 0xffffff,
	roughness: 0.7,
	metalness: 0.0
	} );

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

	object.position.x = Math.random() * 4 - 2;
	object.position.y = Math.random() * 4 - 2;
	object.position.z = Math.random() * 4 - 2;

	object.rotation.x = Math.random() * 2 * Math.PI;
	object.rotation.y = Math.random() * 2 * Math.PI;
	object.rotation.z = Math.random() * 2 * Math.PI;

	object.scale.setScalar( Math.random() + 0.5 );

	group.add( object );

	}

	//

	renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.outputEncoding = THREE.sRGBEncoding;
	renderer.xr.enabled = true;
	container.appendChild( renderer.domElement );

	document.body.appendChild( ARButton.createButton( renderer ) );

	// effects composer

	composer = new EffectComposer(renderer);
	const renderPass = new RenderPass(scene, camera);
	composer.addPass(renderPass);

	window.addEventListener( 'resize', onWindowResize );

	}

	function onWindowResize() {

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

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

	composer.setSize( window.innerWidth, window.innerHeight );
	}

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

	function render() {
	composer.render();
	// renderer.render( scene, camera );
	}

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