|
30 | 30 | <script type="text/javascript" src="js/controls/TrackballControls.js"></script> |
31 | 31 | </head> |
32 | 32 | <body> |
33 | | - <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffer geometry constructed from geometry - (<a target="_blank" href="http://callum.com">author</a>)</div> |
| 33 | + <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffer geometry constructed from geometry - by <a target="_blank" href="http://callum.com">Callum Prentice</a></div> |
| 34 | + |
34 | 35 | <script> |
35 | 36 |
|
36 | 37 | if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); |
|
42 | 43 |
|
43 | 44 | function init() { |
44 | 45 |
|
45 | | - renderer = new THREE.WebGLRenderer( { |
46 | | - antialias: true |
47 | | - } ); |
| 46 | + renderer = new THREE.WebGLRenderer( { antialias: true } ); |
48 | 47 | renderer.setPixelRatio( window.devicePixelRatio ); |
49 | 48 | renderer.setSize( window.innerWidth, window.innerHeight ); |
50 | | - |
51 | 49 | document.body.appendChild( renderer.domElement ); |
52 | 50 |
|
53 | 51 | scene = new THREE.Scene(); |
54 | 52 |
|
55 | 53 | camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 ); |
56 | 54 | camera.position.z = 480.0; |
57 | | - |
58 | | - scene.add( new THREE.AmbientLight( 0x444444 ) ); |
59 | | - |
60 | | - var light1 = new THREE.DirectionalLight( 0x999999, 0.1 ); |
61 | | - light1.position.set( 1, 1, 1 ); |
62 | | - scene.add( light1 ); |
63 | | - |
64 | | - var light2 = new THREE.DirectionalLight( 0x999999, 1.5 ); |
65 | | - light2.position.set( 0, -1, 0 ); |
66 | | - scene.add( light2 ); |
| 55 | + scene.add( camera ); |
67 | 56 |
|
68 | 57 | controls = new THREE.TrackballControls( camera, renderer.domElement ); |
69 | 58 | controls.minDistance = 100.0; |
70 | 59 | controls.maxDistance = 800.0; |
71 | 60 | controls.dynamicDampingFactor = 0.1; |
72 | 61 |
|
| 62 | + scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) ); |
| 63 | + |
| 64 | + var light = new THREE.PointLight( 0xffffff, 0.7 ); |
| 65 | + camera.add( light ); |
| 66 | + |
| 67 | + createScene(); |
| 68 | + |
73 | 69 | stats = new Stats(); |
74 | 70 | document.body.appendChild( stats.dom ); |
75 | 71 |
|
76 | 72 | window.addEventListener( 'resize', onWindowResize, false ); |
77 | 73 |
|
78 | | - createScene(); |
79 | | - |
80 | 74 | } |
81 | 75 |
|
82 | 76 | function createGeometry() { |
|
123 | 117 | var spherical = new THREE.Spherical(); |
124 | 118 | var vector = new THREE.Vector3(); |
125 | 119 |
|
| 120 | + var color = new THREE.Color( 0xffffff ); |
| 121 | + var heartGeometry = createGeometry(); |
| 122 | + var geometry = new THREE.Geometry(); |
| 123 | + |
126 | 124 | for ( var i = 1, l = count; i <= l; i ++ ) { |
127 | 125 |
|
128 | | - var phi = Math.acos( -1 + ( 2 * i ) / l ); |
| 126 | + var phi = Math.acos( - 1 + ( 2 * i ) / l ); |
129 | 127 | var theta = Math.sqrt( l * Math.PI ) * phi; |
130 | 128 |
|
131 | 129 | spherical.set( radius, phi, theta ); |
132 | 130 | vector.setFromSpherical( spherical ); |
133 | 131 |
|
134 | | - var geometry = createGeometry(); |
135 | | - |
| 132 | + geometry.copy( heartGeometry ); |
136 | 133 | geometry.lookAt( vector ); |
137 | 134 | geometry.translate( vector.x, vector.y, vector.z ); |
138 | 135 |
|
139 | | - var color = new THREE.Color( 0xffffff ); |
140 | 136 | color.setHSL( ( i / l ), 1.0, 0.7 ); |
141 | 137 |
|
142 | | - geometry.faces.forEach( function ( face, index ) { |
| 138 | + geometry.faces.forEach( function ( face ) { |
143 | 139 |
|
144 | 140 | positions.push( geometry.vertices[ face.a ].x ); |
145 | 141 | positions.push( geometry.vertices[ face.a ].y ); |
|
179 | 175 | bufferGeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) ); |
180 | 176 | bufferGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); |
181 | 177 |
|
182 | | - var material = new THREE.MeshPhongMaterial( { |
183 | | - shininess: 80, |
184 | | - vertexColors: THREE.VertexColors |
185 | | - } ); |
| 178 | + var material = new THREE.MeshPhongMaterial( { shininess: 80, vertexColors: THREE.VertexColors } ); |
186 | 179 |
|
187 | 180 | var mesh = new THREE.Mesh( bufferGeometry, material ); |
188 | 181 | scene.add( mesh ); |
|
203 | 196 |
|
204 | 197 | controls.update(); |
205 | 198 | stats.update(); |
| 199 | + |
206 | 200 | renderer.render( scene, camera ); |
207 | 201 |
|
208 | 202 | } |
| 203 | + |
209 | 204 | </script> |
210 | 205 | </body> |
211 | 206 | </html> |
0 commit comments