2c:["$","title",null,{"children":"3D Graphs with THREE.js | Lao | Observable"}] 31:T1834,graph = { // SET UP ------------------------------------ // scene const aspect = 0.7; //const width = 600 const height = width * aspect; const scene = new THREE.Scene(); const pi = Math.PI; // MATERIALS --------------------------------- const matsurface = options.surface; const matSolidLine = options.line; // GRAPH ------------------------------------ //const axesHelper = new THREE.AxesHelper( 5 ); //scene.add( axesHelper ) var centerHelper = new THREE.Group() var gridHelper = new THREE.Group() let xScale = d3.scaleLinear([0, 1], domain.x); let yScale = d3.scaleLinear([0, 1], domain.y); let xRes = 10*10+1 let yRes = 10*10+1 let surfaceGeo = new THREE.Geometry() for(let i=0; icenterPoint[0] && yScale((j+1)/yRes)>centerPoint[1])) // circular vs radial if(diagonal){ surfaceGeo.faces.push( new THREE.Face3( i+j*xRes, i+1+j*xRes, i+(j+1)*xRes ), new THREE.Face3( i+1+j*xRes, i+1+(j+1)*xRes, i+(j+1)*xRes ) )}else{ surfaceGeo.faces.push( new THREE.Face3( i+j*xRes, i+1+j*xRes, i+1+(j+1)*xRes), new THREE.Face3( i+j*xRes, i+1+(j+1)*xRes, i+(j+1)*xRes ) )} }} surfaceGeo.computeFaceNormals() let surfaceMesh = new THREE.Mesh(surfaceGeo,matsurface) //wireframe let gridList = []; let ticks = domain.ticks for (let i = 0; i < ticks; i++) { let xVerts = []; let yVerts = []; const xGeo = new THREE.Geometry(); const yGeo = new THREE.Geometry(); for (let j = 0; j < yRes; j++){ xGeo.vertices.push( new THREE.Vector3( yScale(j/(yRes-1)), 0, xScale(i/(ticks-1))));} for (let j = 0; j < xRes; j++){ yGeo.vertices.push( new THREE.Vector3( yScale(i/(ticks-1)), 0, xScale(j/(xRes-1))));} const xLine = new THREE.Line(xGeo, matSolidLine); const yLine = new THREE.Line(yGeo, matSolidLine); gridList.push(xLine, yLine); gridHelper.add(xLine, yLine); } gridHelper.position.set(0,.0005*Math.abs((domain.z[0]-domain.z[1])),0) centerHelper.add(surfaceMesh) centerHelper.add(gridHelper) scene.add(centerHelper) centerHelper.scale.set(2/Math.abs(domain.y[0]-domain.y[1]),2/Math.abs(domain.z[0]-domain.z[1]),2/Math.abs(domain.x[0]-domain.x[1])) let xMove = -(domain.x[0]+domain.x[1])/Math.abs((domain.x[0]-domain.x[1])) let yMove = -(domain.y[0]+domain.y[1])/Math.abs((domain.y[0]-domain.y[1])) let zMove = -(domain.z[0]+domain.z[1])/Math.abs((domain.z[0]-domain.z[1])) centerHelper.position.set(yMove,zMove,xMove) // camera const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); // field of view, aspect ratio, near, far plane camera.position.set(-1.75,1.25,1.75); camera.lookAt(0, 0, 0); // renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); // most powerful all purpose renderer, with smooth edges renderer.setClearColor("#ffffff"); // background color #f6f6f6 renderer.setSize(width, height); // set window size // camera controls const controls = new THREE.OrbitControls(camera, renderer.domElement); // allows mouse to move camera controls.enableZoom = false; // disables zoom controls.enablePan = false; // disables pan controls.enableRotate = true; // determines if camera can rotate // Light --------------------------------------- const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.75); hemiLight.color.setHSL(0.6, 0.6, 0.5); hemiLight.groundColor.setHSL(0.095, 0.5, 0.75); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); const dirLight1 = new THREE.DirectionalLight(0xffffff, 0.65); dirLight1.color.setHSL(0.8 / 6, 0.7, 0.5); dirLight1.position.set(Math.sin((1.5 / 3) * pi), 2, Math.cos((2 / 3) * pi)); dirLight1.position.multiplyScalar(50); scene.add(dirLight1); const dirLight2 = new THREE.DirectionalLight(0xffffff, 0.5); dirLight2.color.setHSL(3 / 6, 0.2, 0.5); dirLight2.position.set(Math.sin((3.5 / 3) * pi), 1, Math.cos((4 / 3) * pi)); dirLight2.position.multiplyScalar(50); scene.add(dirLight2); const dirLight3 = new THREE.DirectionalLight(0xffffff, 0.5); dirLight3.color.setHSL(5 / 6, 0.4, 0.5); dirLight3.position.set(Math.sin((5.5 / 3) * pi), 1, Math.cos((0 / 3) * pi)); dirLight3.position.multiplyScalar(50); scene.add(dirLight3); ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// let t = 0; let xpos, ypos, zpos, transformList, savedPoints function savePoints(mesh){ mesh.savedPoints = mesh.geometry.clone() } savePoints(surfaceMesh) for (let i = 0; i < gridList.length; i++) { savePoints(gridList[i]); } function updateSurface(mesh) { const count = mesh.geometry.vertices.length; for (let i = 0; i < count; i++) { xpos = mesh.savedPoints.vertices[i].x; ypos = mesh.savedPoints.vertices[i].z; zpos = f(xpos, ypos, t); transformList = transform(xpos, ypos, zpos,t) mesh.geometry.vertices[i].x = transformList[0]; mesh.geometry.vertices[i].z = transformList[1]; mesh.geometry.vertices[i].y = transformList[2]; } mesh.geometry.computeVertexNormals(); mesh.geometry.verticesNeedUpdate = true; } renderer.domElement.update = function render() { t = new Date().getTime() / 1000; // time in seconds updateSurface(surfaceMesh); for (let i = 0; i < gridList.length; i++) { updateSurface(gridList[i]); } renderer.render( scene, camera ); // renders scene return "update render externally"; }; // Input ------------------------- return renderer.domElement; }32:[] 2f:{"id":"effa8756f96f189a","slug":"3d-graphs-with-three-js","title":"3D Graphs with THREE.js","thumbnail":"077f2332d1c801bef70db5f6f0e020a9e0d813188a19edaa418bfba846dbc766","access_level":"public","create_time":"$D2021-11-19T23:37:04.720Z","update_time":"$D2026-08-13T06:04:37.721Z","view_time":null,"first_public_time":"$D2021-11-25T17:55:43.640Z","has_unpublished_edits":null,"fork":false,"stars":27,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":2468,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Graphs with THREE.js","cells":[{"id":0,"value":"md`# 3D Graphs with THREE.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2312,"value":"{ \n let fullscreen_button = (element, label='Full Screen') => {\n const button = html`