mayfer/threejs.html

## threejs.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>thing for deepfates</title>
    <style>
        .label {
            color: #FFF;
            font-family: sans-serif;
            padding: 2px;
            background: rgba(0, 0, 0, .6);
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        }
    </style>
</head>

<body>
    <script type="module">

        import * as THREE from 'https://cdn.skypack.dev/three';
        import { OrbitControls } from 'https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js';
        import { CSS2DRenderer, CSS2DObject } from 'https://cdn.skypack.dev/three/examples/jsm/renderers/CSS2DRenderer';

        let camera, scene, renderer, labelRenderer;

        const clock = new THREE.Clock();
        const textureLoader = new THREE.TextureLoader();

        init();
        animate();

        function init() {

            const EARTH_RADIUS = 1;
            const MOON_RADIUS = 0.27;

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
            camera.position.set(10, 5, 20);

            scene = new THREE.Scene();

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

            const axesHelper = new THREE.AxesHelper(5);
            scene.add(axesHelper);


            const createText = (text, color, size, x, y, z) => {

                const div = document.createElement('div');
                div.classList.add('label')
                div.className = 'label';
                div.textContent = text;
                div.style.fontSize = `${size}px`;
                div.style.color = color;

                const label = new CSS2DObject(div);
                label.position.set(x, y, x);
                scene.add(label);
            }

            for (var i = 0; i < 20; i++) {
                const x = Math.random() * 10 - 5;
                const y = Math.random() * 10 - 5;
                const z = Math.random() * 10 - 5;
                const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
                const size = parseInt(10 + Math.random() * 10);
                const text = 'Testing ' + Math.random();
                createText(text, color, size, x, y, z);
            }

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            labelRenderer = new CSS2DRenderer();
            labelRenderer.setSize(window.innerWidth, window.innerHeight);
            labelRenderer.domElement.style.position = 'absolute';
            labelRenderer.domElement.style.top = '0px';
            document.body.appendChild(labelRenderer.domElement);

            const controls = new OrbitControls(camera, labelRenderer.domElement);
            controls.minDistance = 5;
            controls.maxDistance = 100;

            //

            window.addEventListener('resize', onWindowResize);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

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

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

        }


        function animate() {

            requestAnimationFrame(animate);

            const elapsed = clock.getElapsedTime();

            renderer.render(scene, camera);
            labelRenderer.render(scene, camera);

        }

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>thing for deepfates</title>
	<style>
	.label {
	color: #FFF;
	font-family: sans-serif;
	padding: 2px;
	background: rgba(0, 0, 0, .6);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
	}
	</style>
	</head>

	<body>
	<script type="module">

	import * as THREE from 'https://cdn.skypack.dev/three';
	import { OrbitControls } from 'https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js';
	import { CSS2DRenderer, CSS2DObject } from 'https://cdn.skypack.dev/three/examples/jsm/renderers/CSS2DRenderer';

	let camera, scene, renderer, labelRenderer;

	const clock = new THREE.Clock();
	const textureLoader = new THREE.TextureLoader();

	init();
	animate();

	function init() {

	const EARTH_RADIUS = 1;
	const MOON_RADIUS = 0.27;

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
	camera.position.set(10, 5, 20);

	scene = new THREE.Scene();

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

	const axesHelper = new THREE.AxesHelper(5);
	scene.add(axesHelper);


	const createText = (text, color, size, x, y, z) => {

	const div = document.createElement('div');
	div.classList.add('label')
	div.className = 'label';
	div.textContent = text;
	div.style.fontSize = `${size}px`;
	div.style.color = color;

	const label = new CSS2DObject(div);
	label.position.set(x, y, x);
	scene.add(label);
	}

	for (var i = 0; i < 20; i++) {
	const x = Math.random() * 10 - 5;
	const y = Math.random() * 10 - 5;
	const z = Math.random() * 10 - 5;
	const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
	const size = parseInt(10 + Math.random() * 10);
	const text = 'Testing ' + Math.random();
	createText(text, color, size, x, y, z);
	}

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	labelRenderer = new CSS2DRenderer();
	labelRenderer.setSize(window.innerWidth, window.innerHeight);
	labelRenderer.domElement.style.position = 'absolute';
	labelRenderer.domElement.style.top = '0px';
	document.body.appendChild(labelRenderer.domElement);

	const controls = new OrbitControls(camera, labelRenderer.domElement);
	controls.minDistance = 5;
	controls.maxDistance = 100;

	//

	window.addEventListener('resize', onWindowResize);

	}

	function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;

	camera.updateProjectionMatrix();

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

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

	}


	function animate() {

	requestAnimationFrame(animate);

	const elapsed = clock.getElapsedTime();

	renderer.render(scene, camera);
	labelRenderer.render(scene, camera);

	}

	</script>
	</body>

	</html>