julapy · February 7, 2023 11:32
diff --git a/gistfile1.txt b/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/[email protected]/dist/es-module-shims.js"></script>
 		<script type="importmap">
 			{
 				"imports": {
 					"three": "https://unpkg.com/[email protected]/build/three.module.js",
 					"three/addons/": "https://unpkg.com/[email protected]/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/[email protected]/dist/es-module-shims.js"></script>
	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/[email protected]/build/three.module.js",
	"three/addons/": "https://unpkg.com/[email protected]/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>