3f:null 40:["$","title",null,{"children":"THREEJS | zq | Observable"}] 46:T739,function generateTexture( data, width, height ) { let context, image, imageData, shade; const vector3 = new THREE.Vector3( 0, 0, 0 ); const sun = new THREE.Vector3( 1, 1, 1 ); sun.normalize(); const canvas = document.createElement( 'canvas' ); canvas.width = width; canvas.height = height; context = canvas.getContext( '2d' ); context.fillStyle = '#000'; context.fillRect( 0, 0, width, height ); image = context.getImageData( 0, 0, canvas.width, canvas.height ); imageData = image.data; for ( let i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) { vector3.x = data[ j - 2 ] - data[ j + 2 ]; vector3.y = 2; vector3.z = data[ j - width * 2 ] - data[ j + width * 2 ]; vector3.normalize(); shade = vector3.dot( sun ); imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 ); imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 ); imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 ); } context.putImageData( image, 0, 0 ); // Scaled 4x const canvasScaled = document.createElement( 'canvas' ); canvasScaled.width = width * 4; canvasScaled.height = height * 4; context = canvasScaled.getContext( '2d' ); context.scale( 4, 4 ); context.drawImage( canvas, 0, 0 ); image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height ); imageData = image.data; for ( let i = 0, l = imageData.length; i < l; i += 4 ) { const v = ~ ~ ( Math.random() * 5 ); imageData[ i ] += v; imageData[ i + 1 ] += v; imageData[ i + 2 ] += v; } context.putImageData( image, 0, 0 ); return canvasScaled; }47:[] 44:{"id":"3065742789136818","slug":"threejs","title":"THREEJS","thumbnail":"921ea3515773841cd6503ab89e8d8c1efe004a165e09ca717907f051cc607c6f","access_level":"public","create_time":"$D2021-04-30T02:31:14.549Z","update_time":"$D2021-04-30T04:03:48.909Z","view_time":null,"first_public_time":"$D2021-04-30T03:53:29.152Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":192,"publish_version":192,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"THREEJS","cells":[{"id":0,"value":"md`# THREEJS`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"container = html`

${stats.dom}

\n${renderer.domElement}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"stats=new Stats()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"camera = {\n const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 )\n camera.position.set( 100, 800, - 800 );\n camera.lookAt( - 100, 810, - 800 );\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"controls = {\n const controls = new FirstPersonControls( camera, renderer.domElement );\n controls.movementSpeed = 150;\n controls.lookSpeed = 0.1;\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"scene={\n const scene = new THREE.Scene();\n scene.background = new THREE.Color( 0xefd1b5 );\n scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );\n scene.add( mesh )\n return scene\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"renderer={\n \n const renderer = new THREE.WebGLRenderer();\n renderer.setPixelRatio( window.devicePixelRatio );\n renderer.setSize( window.innerWidth, window.innerHeight );\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"mesh={\n const geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );\n geometry.rotateX( - Math.PI / 2 );\n\n const vertices = geometry.attributes.position.array;\n\n for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {\n\n vertices[ j + 1 ] = data[ i ] * 10;\n\n }\n\n const texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );\n texture.wrapS = THREE.ClampToEdgeWrapping;\n texture.wrapT = THREE.ClampToEdgeWrapping;\n\n return new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"texture=null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"worldWidth = 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"worldDepth = 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"data = generateHeight( worldWidth, worldDepth )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"clock = new THREE.Clock()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"\n\n function onWindowResize() {\n\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n\n renderer.setSize( window.innerWidth, window.innerHeight );\n\n controls.handleResize();\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"\n\n function generateHeight( width, height ) {\n\n let seed = Math.PI / 4;\n window.Math.random = function () {\n\n const x = Math.sin( seed ++ ) * 10000;\n return x - Math.floor( x );\n\n };\n\n const size = width * height, data = new Uint8Array( size );\n const perlin = new ImprovedNoise(), z = Math.random() * 100;\n\n let quality = 1;\n\n for ( let j = 0; j < 4; j ++ ) {\n\n for ( let i = 0; i < size; i ++ ) {\n\n const x = i % width, y = ~ ~ ( i / width );\n data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );\n\n }\n\n quality *= 5;\n\n }\n\n return data;\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"renderState = true;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"function animate() {\n if(!renderState){return}\n requestAnimationFrame( animate );\n render();\n stats.update();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"{\n animate()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function render() {\n controls.update( clock.getDelta() );\n renderer.render( scene, camera );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"FirstPersonControls = (await import('three/examples/jsm/controls/FirstPersonControls.js')).FirstPersonControls;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"\nImprovedNoise = (await import('three/examples/jsm/math/ImprovedNoise.js')).ImprovedNoise;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Stats = (await import(\"three/examples/jsm/libs/stats.module.js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"THREE = require(\"three@0.128.0/build/three.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"