averaging started
This commit is contained in:
		
							parent
							
								
									c9905db6d2
								
							
						
					
					
						commit
						dc2f826688
					
				
							
								
								
									
										161
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										161
									
								
								index.html
									
									
									
									
									
								
							| @ -19,122 +19,75 @@ | |||||||
|     </head> |     </head> | ||||||
|     <body> |     <body> | ||||||
|         <canvas></canvas> |         <canvas></canvas> | ||||||
|  | 
 | ||||||
| <script type="module"> | <script type="module"> | ||||||
| import * as T from            'http://esm.sh/three'; |     import { Scene, THREE } from './scene.js'; | ||||||
| import { OrbitControls } from 'http://esm.sh/three/examples/jsm/controls/OrbitControls.js'; |  | ||||||
| import { Region, Kernel } from "./region.js"; |  | ||||||
| 
 | 
 | ||||||
| const renderer = new T.WebGLRenderer({canvas:document.querySelector("canvas")}); |     let average = (inPoints, inCenter) => | ||||||
| const scene = new T.Scene(); |     { | ||||||
| const camera = new T.PerspectiveCamera(80, 2, 0.1, 10); |         let output = [0, 0, 0]; | ||||||
| const light = new T.DirectionalLight(0xFFFFFF, 1); |  | ||||||
| const geometry = new T.BoxGeometry(0.8, 0.8, 0.8); |  | ||||||
| const shader = new T.MeshPhongMaterial({color:0xFFCC00}); |  | ||||||
| const shaderBlue = new T.MeshPhongMaterial({color:0x0033FF}); |  | ||||||
| const object = new T.Mesh(geometry, shader); |  | ||||||
| 
 | 
 | ||||||
| const controls = new OrbitControls(camera, renderer.domElement); |         for(let i=0; i<inPoints.length; i+=3) | ||||||
| controls.update(); |         { | ||||||
|  |             output[0] += inPoints[i+0]; | ||||||
|  |             output[1] += inPoints[i+1]; | ||||||
|  |             output[2] += inPoints[i+2]; | ||||||
|  |         } | ||||||
|          |          | ||||||
| scene.add(light); |         let scalar = inPoints.length/3; | ||||||
| scene.add(object); |         output[0] /= scalar; | ||||||
| scene.add(new T.GridHelper(10, 10)); |         output[1] /= scalar; | ||||||
|  |         output[2] /= scalar; | ||||||
| 
 | 
 | ||||||
|  |         let limit = (inShifted) =>  | ||||||
|  |         { | ||||||
|  |             if(inShifted < -0.5) | ||||||
|  |             { | ||||||
|  |                 return -0.5; | ||||||
|  |             } | ||||||
|  |             if(inShifted > 0.5) | ||||||
|  |             { | ||||||
|  |                 return 0.5; | ||||||
|  |             } | ||||||
|  |             return inShifted; | ||||||
|  |         } | ||||||
|  |         output[0] = limit(output[0] - inCenter[0]); | ||||||
|  |         output[1] = limit(output[1] - inCenter[1]); | ||||||
|  |         output[2] = limit(output[2] - inCenter[2]); | ||||||
| 
 | 
 | ||||||
| const geoBuff = new T.BufferGeometry(); |         return output; | ||||||
| geoBuff.setAttribute("position", new T.BufferAttribute(new Float32Array( |     }; | ||||||
|  | 
 | ||||||
|  |     const points = | ||||||
|     [ |     [ | ||||||
|          0,  0,  0, |          0,  0,  0, | ||||||
|     1, 0, 0, |  | ||||||
|     1, 1, 0, |  | ||||||
|          0,  1,  0, |          0,  1,  0, | ||||||
|     2, 0, 1, |          1,  1,  0, | ||||||
|     2, 1, 1 |          2,  1,  0, | ||||||
| ] |          2,  0,  0, | ||||||
| ), 3)); |          3,  0,  0, | ||||||
|  |          4,  0,  0, | ||||||
|  |          4,  1,  0 | ||||||
|  |     ]; | ||||||
|  |     const geometry = new THREE.BufferGeometry(); | ||||||
|  |     geometry.setAttribute('position', new THREE.Float32BufferAttribute( points, 3 )); | ||||||
|  |     const material = new THREE.LineBasicMaterial( { color: 0x0000ff, linewidth: 3 } ); | ||||||
|  |     const line = new THREE.Line( geometry, material ); | ||||||
| 
 | 
 | ||||||
| geoBuff.setIndex( |     Scene( | ||||||
| [ |     { | ||||||
|     0, 1, 2, |         DOM:"canvas", | ||||||
|     2, 3, 0, |         Init(inScene) | ||||||
|     1, 4, 5, |         { | ||||||
|     5, 2, 1 |             inScene.add( line ); | ||||||
| ] |         }, | ||||||
|  |         Update(scene, delta) | ||||||
|  |         { | ||||||
|  | 
 | ||||||
|  |         } | ||||||
|  |     } | ||||||
|     ); |     ); | ||||||
| geoBuff.computeVertexNormals(); |  | ||||||
| const geoObj = new T.Mesh(geoBuff, shader); |  | ||||||
| shader.shading = T.FlatShading; |  | ||||||
| scene.add(geoObj); |  | ||||||
| 
 | 
 | ||||||
| /* |  | ||||||
| let r = Region.Create(); |  | ||||||
| let filler = (x, y, z) =>  |  | ||||||
| { |  | ||||||
|     r.Voxels[Region.CoordsToIndex(x, y, z)] = true; |  | ||||||
| }; |  | ||||||
| filler(1, 1, 1); |  | ||||||
| Kernel.Loop(Kernel.Corners, [1, 1, 1], filler); |  | ||||||
| Kernel.Loop(Kernel.Cardinal, [1, 1, 1], filler); |  | ||||||
| Region.Update(r); |  | ||||||
| 
 |  | ||||||
| r.Filled.forEach((inIndexMap) => |  | ||||||
| { |  | ||||||
|     let coords = Region.IndexToCoords(inIndexMap); |  | ||||||
|     let cube = new T.Mesh(geometry, shader); |  | ||||||
|     cube.position.set(...coords); |  | ||||||
|     scene.add(cube); |  | ||||||
| }); |  | ||||||
| 
 |  | ||||||
| r.Surface.forEach((inIndexMap) => |  | ||||||
| { |  | ||||||
|     let coords = Region.IndexToCoords(inIndexMap); |  | ||||||
|     let cube = new T.Mesh(geometry, shaderBlue); |  | ||||||
|     cube.position.set(...coords); |  | ||||||
|     scene.add(cube); |  | ||||||
| }); |  | ||||||
| */ |  | ||||||
| 
 |  | ||||||
| light.position.set(-1, 2, 4); |  | ||||||
| camera.position.set(0, 0, 2); |  | ||||||
| 
 |  | ||||||
| let dirty = false; |  | ||||||
| const update = inTime => |  | ||||||
| { |  | ||||||
|     let timeNew = new Date(); |  | ||||||
|     let timeDelta = timeNew - inTime; |  | ||||||
| 
 |  | ||||||
|     let delta = timeDelta * 0.001; |  | ||||||
|     object.rotation.x += delta; |  | ||||||
| 
 |  | ||||||
|     controls.update(); |  | ||||||
| 
 |  | ||||||
|     dirty = true; |  | ||||||
| 
 |  | ||||||
|     setTimeout(()=>update(timeNew), 100); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| const render = inTime => |  | ||||||
| { |  | ||||||
|     if(dirty) |  | ||||||
|     { |  | ||||||
|         renderer.render(scene, camera); |  | ||||||
|         dirty = false; |  | ||||||
|     } |  | ||||||
|     requestAnimationFrame(render); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| const resize = () => |  | ||||||
| { |  | ||||||
|     let canvas = renderer.domElement; |  | ||||||
|     camera.aspect = canvas.clientWidth / canvas.clientHeight; |  | ||||||
|     camera.updateProjectionMatrix(); |  | ||||||
|     renderer.setSize(canvas.clientWidth, canvas.clientHeight, false); |  | ||||||
| }; |  | ||||||
| 
 |  | ||||||
| window.addEventListener("resize", resize); |  | ||||||
| resize(); |  | ||||||
| render(0); |  | ||||||
| update(new Date()); |  | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|     </body> |     </body> | ||||||
|  | |||||||
							
								
								
									
										57
									
								
								scene.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										57
									
								
								scene.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,57 @@ | |||||||
|  | import * as T from            'http://esm.sh/three'; | ||||||
|  | import { OrbitControls } from 'http://esm.sh/three/examples/jsm/controls/OrbitControls.js'; | ||||||
|  | 
 | ||||||
|  | export { T as THREE }; | ||||||
|  | export function Scene(inSettings) | ||||||
|  | { | ||||||
|  |     const renderer = new T.WebGLRenderer({canvas:document.querySelector(inSettings.DOM)}); | ||||||
|  |     const scene = new T.Scene(); | ||||||
|  |     const camera = new T.PerspectiveCamera(80, 2, 0.1, 10); | ||||||
|  |     const light = new T.DirectionalLight(0xFFFFFF, 1); | ||||||
|  |     const controls = new OrbitControls(camera, renderer.domElement); | ||||||
|  |     let dirty = false; | ||||||
|  | 
 | ||||||
|  |     const update = inTime => | ||||||
|  |     { | ||||||
|  |         let timeNew = new Date(); | ||||||
|  |         let timeDelta = timeNew - inTime; | ||||||
|  |         let delta = timeDelta * 0.001; | ||||||
|  |          | ||||||
|  |         inSettings.Update(scene, delta); | ||||||
|  | 
 | ||||||
|  |         controls.update(); | ||||||
|  |         dirty = true; | ||||||
|  |         setTimeout(()=>update(timeNew), 50); | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     const render = inTime => | ||||||
|  |     { | ||||||
|  |         if(dirty) | ||||||
|  |         { | ||||||
|  |             renderer.render(scene, camera); | ||||||
|  |             dirty = false; | ||||||
|  |         } | ||||||
|  |         requestAnimationFrame(render); | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     const resize = () => | ||||||
|  |     { | ||||||
|  |         let canvas = renderer.domElement; | ||||||
|  |         camera.aspect = canvas.clientWidth / canvas.clientHeight; | ||||||
|  |         camera.updateProjectionMatrix(); | ||||||
|  |         renderer.setSize(canvas.clientWidth, canvas.clientHeight, false); | ||||||
|  |     }; | ||||||
|  |      | ||||||
|  |     scene.add(light); | ||||||
|  |     scene.add(new T.GridHelper(10, 10)); | ||||||
|  |     light.position.set(-1, 2, 4); | ||||||
|  |     camera.position.set(0, 0, 2); | ||||||
|  |     controls.update(); | ||||||
|  | 
 | ||||||
|  |     inSettings.Init(scene); | ||||||
|  | 
 | ||||||
|  |     window.addEventListener("resize", resize); | ||||||
|  |     resize(); | ||||||
|  |     render(0); | ||||||
|  |     update(new Date()); | ||||||
|  | }; | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user