three.js shape to line
shape to line seems to be missing a segment
by wilt
HTML
<script src="http://threejs.org/build/three.min.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// three.js info box follows shape
var renderer, scene, camera;
var angle = 0;
init();
animate();
function init() {
// info
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#fff';
info.style.fontWeight = 'bold';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = "three.js - info box follows shape";
document.body.appendChild(info);
// info
box = document.createElement('div');
box.style.position = 'absolute';
box.style.left = '30px';
box.style.width = '80px';
box.style.top = '30px';
box.style.textAlign = 'center';
box.style.color = 'Black';
box.style.fontWeight = 'bold';
box.style.backgroundColor = 'White';
box.style.zIndex = '1';
box.style.fontFamily = 'Monospace';
box.innerHTML = "info box";
document.body.appendChild(box);
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
// geometry
var geometry = new THREE.SphereGeometry(60);
// material
var material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
// mesh
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(50, 50, 0);
scene.add(mesh);
}
function getScreenPosition(position, camera) {
var canvas = renderer.domElement;
var width = canvas.width;
var height = canvas.height;
// project position
var vector = position.clone().project(camera);
// find x,y position on screen
vector.setX(Math.round((vector.x + 1) * width / 2));
vector.setY(Math.round((-vector.y + 1) *...