Skip to content

Instantly share code, notes, and snippets.

@mayfer
Last active January 4, 2022 02:36
Show Gist options
  • Save mayfer/4d173f236ae3635db13439ad89dd56da to your computer and use it in GitHub Desktop.
Save mayfer/4d173f236ae3635db13439ad89dd56da to your computer and use it in GitHub Desktop.
example three.js text viewer with arbitrary coordinates, color & text size. for deepfates <3
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment