JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
JavaScript
// Animate the drawing of a line using LineDashedMaterial hack
var mesh, scene, camera, geometry, hit, mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster(), plane, drag = false,
vectorZero = new THREE.Vector3(), text;
init();
function init() {
// info
text = document.createElement( 'span' );
text.style.position = 'absolute';
text.style.top = '30px';
text.style.width = '100%';
text.style.color = '#fff';
text.style.fontWeight = 'bold';
text.style.backgroundColor = 'transparent';
text.style.zIndex = '1';
text.style.fontFamily = 'Monospace';
text.innerHTML = 'Some random name';
document.body.appendChild( text );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 15;
geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
material = new THREE.MeshBasicMaterial( { color: 0xffff00, depthTest: false } );
mesh = new THREE.Mesh( geometry, material );
plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(100, 100), new THREE.MeshBasicMaterial({
color: 0xf00000,
alphaTest: 0,
visible: false
}));
// move mesh down
mesh.position.y = -3;
// removing this shows mesh but wont set texts inital position.
toScreenPosition(mesh.position.clone());
scene.add( mesh, plane);
}
function toScreenPosition(vector) {
camera.updateMatrixWorld();
vector.project(camera);
// vector.z = 0;
var x = Math.round((0.5 + vector.x / 2) * (renderer.domElement.width / window.devicePixelRatio));
var y = Math.round((0.5 - vector.y / 2) * (renderer.domElement.height / window.devicePixelRatio));
text.style.top = y + 'px';
text.style.left = x + 'px';
}
function mouseMove(event) {
mouse.x = ( event.clientX /...