1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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>
|
