diff options
Diffstat (limited to 'site/assets/test/face.html')
| -rw-r--r-- | site/assets/test/face.html | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/site/assets/test/face.html b/site/assets/test/face.html new file mode 100644 index 00000000..241e7348 --- /dev/null +++ b/site/assets/test/face.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<title>face points</title> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> +<style> +</style> +</head> +<body> +<div id="container"></div> +<script src="../js/vendor/three.min.js"></script> +<script> +var daisy = [[54.0,88.0,-86.4166488647461],[61.0,117.0,-94.31047821044922],[67.0,139.0,-100.80580139160156],[74.0,158.0,-104.98035430908203],[80.0,183.0,-102.41091918945312],[86.0,206.0,-88.20156860351562],[93.0,225.0,-67.11590576171875],[105.0,247.0,-44.081058502197266],[131.0,256.0,-27.08724594116211],[159.0,247.0,-24.630205154418945],[188.0,228.0,-33.128997802734375],[207.0,209.0,-43.85726547241211],[223.0,183.0,-49.67991256713867],[232.0,158.0,-47.00068664550781],[236.0,136.0,-39.36989212036133],[239.0,113.0,-29.353200912475586],[239.0,88.0,-19.166582107543945],[45.0,94.0,9.0930757522583],[48.0,94.0,28.99441146850586],[61.0,94.0,43.41041564941406],[70.0,101.0,52.37288284301758],[80.0,104.0,56.78023910522461],[128.0,104.0,73.55677795410156],[137.0,98.0,77.24374389648438],[153.0,94.0,77.57779693603516],[172.0,94.0,73.60804748535156],[188.0,94.0,61.270816802978516],[105.0,132.0,54.630958557128906],[102.0,155.0,56.62538146972656],[99.0,171.0,60.56704330444336],[102.0,183.0,56.47877883911133],[96.0,180.0,22.875110626220703],[102.0,183.0,28.277494430541992],[112.0,187.0,32.87094497680664],[121.0,183.0,35.1693115234375],[128.0,180.0,34.83551025390625],[61.0,113.0,16.009923934936523],[64.0,113.0,29.9821834564209],[77.0,113.0,34.802860260009766],[89.0,120.0,32.677188873291016],[77.0,123.0,31.01885223388672],[67.0,123.0,24.31825828552246],[134.0,123.0,50.15107727050781],[143.0,117.0,60.02939987182617],[156.0,117.0,63.61414337158203],[169.0,120.0,55.770992279052734],[159.0,126.0,57.6904411315918],[147.0,126.0,55.69097900390625],[86.0,193.0,-17.841793060302734],[93.0,196.0,4.937897682189941],[105.0,196.0,22.647642135620117],[115.0,199.0,26.378101348876953],[121.0,196.0,29.354434967041016],[143.0,196.0,24.816020965576172],[166.0,193.0,10.712540626525879],[147.0,212.0,12.046388626098633],[134.0,221.0,11.838120460510254],[118.0,225.0,8.037301063537598],[105.0,221.0,2.2057247161865234],[96.0,212.0,-6.710599899291992],[89.0,193.0,-17.244544982910156],[105.0,202.0,12.899520874023438],[115.0,202.0,19.937997817993164],[131.0,202.0,22.065942764282227],[163.0,193.0,9.6935396194458],[131.0,212.0,14.528266906738281],[118.0,212.0,11.355504035949707],[105.0,212.0,5.307169437408447]] +var container +var camera, controls, scene, renderer +var mouse = new THREE.Vector2() +var offset = new THREE.Vector3( 10, 10, 10 ) +var colors = [ + 0xffffff, + 0x33ffff, + 0xff33ff, + 0xffff33, + 0x33ff33, + 0xff3333, + 0x3333ff, +] +init() +animate() + +function choice(a) { return a[Math.floor(Math.random()*a.length)]} +function init() { + container = document.getElementById( "container" ) + camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ) + scene = new THREE.Scene() + scene.background = new THREE.Color( 0x000000 ) + scene.add( new THREE.AmbientLight( 0x555555 ) ) + var light = new THREE.SpotLight( 0xffffff, 1.5 ) + light.position.set( 0, 500, 2000 ) + scene.add( light ) + var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ) + var geometriesDrawn = [] + var matrix = new THREE.Matrix4() + var quaternion = new THREE.Quaternion() + var color = new THREE.Color() + var bounds = daisy.reduce((a,p) => { + return [ + Math.min(a[0], p[0]), + Math.max(a[1], p[0]), + Math.min(a[2], p[1]), + Math.max(a[3], p[1]), + Math.min(a[4], p[2]), + Math.max(a[5], p[2]), + ] + }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity]) + console.log(bounds) + camera.position.x = (bounds[0] + bounds[1]) / 2 + camera.position.y = (bounds[2] + bounds[3]) / -2 + camera.position.z = 200 // bounds[4] + 1000 + console.log(camera.position) + daisy.forEach(point => { + var geometry = new THREE.BoxBufferGeometry() + var position = new THREE.Vector3() + position.x = point[0] + position.y = -point[1] + position.z = point[2] + var rotation = new THREE.Euler() + rotation.x = 0 + rotation.y = 0 + rotation.z = 0 + var scale = new THREE.Vector3() + var SCALE = 2 + scale.x = SCALE + scale.y = SCALE + scale.z = SCALE + quaternion.setFromEuler( rotation, false ) + matrix.compose( position, quaternion, scale ) + geometry.applyMatrix( matrix ) + geometriesDrawn.push( geometry ) + material = new THREE.MeshBasicMaterial( {color: color.setHex( choice(colors) )} ) + sphere = new THREE.Mesh( geometry, material ) + scene.add( sphere ) + }) + renderer = new THREE.WebGLRenderer( { antialias: true } ) + renderer.setPixelRatio( window.devicePixelRatio ) + renderer.setSize( window.innerWidth, window.innerHeight ) + container.appendChild( renderer.domElement ) + renderer.domElement.addEventListener( 'mousemove', onMouseMove ) +} +// +function onMouseMove( e ) { + mouse.x = e.clientX + mouse.y = e.clientY +} +function animate() { + requestAnimationFrame( animate ) + render() + scene.rotation.y += 0.0001 * Math.PI/2 +} +function render() { + renderer.render( scene, camera ) +} +</script> + +</body> +</html>
\ No newline at end of file |