29:null 2a:["$","title",null,{"children":"3D spiral prototype | Caleb Diehl | Observable"}] 2f:T694,curve = {// Convert positions to THREE.Vector3 points for the curve // Create the Catmull-Rom spline curve const curve = new THREE.CatmullRomCurve3(positions); curve.curveType = 'catmullrom'; curve.closed = false; // Keep the curve open // Generate points along the curve and create a geometry const curvePoints = curve.getPoints(500); // More points for a smoother curve // Create a tube geometry along the curve const tubeRadius = 0.1; // Adjust the radius for thickness const tubularSegments = 250; // Number of segments around the tube const radialSegments = 36; // Number of segments along the tube const tubeGeometry = new THREE.TubeGeometry(curve, tubularSegments, tubeRadius, radialSegments, false); // Define color array and assign colors per vertex const colors = []; const color1 = new THREE.Color(0x7ae7c7); const color2 = new THREE.Color(0xEEB868); const color3 = new THREE.Color(0xEF767A) for (let i = 0; i < tubeGeometry.attributes.position.count; i++) { const t = i / tubeGeometry.attributes.position.count; // Value from 0 to 1 along the tube length // color1.clone().lerp(color2, t); // Interpolate between color1 and color2 const color = t <= .25 ? color1 : t <= .5 ? color2 : color3 // Push color values for each vertex colors.push(color.r, color.g, color.b); } // Add color attribute to the geometry tubeGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); // Create a material that uses vertex colors const tubeMaterial = new THREE.MeshStandardMaterial({ vertexColors: true, side: THREE.DoubleSide, transparent: true, opacity: .5 }); return new THREE.Mesh(tubeGeometry, tubeMaterial); }30:T105d,( function () { class CSS2DObject extends THREE.Object3D { constructor( element ) { super(); this.element = element || document.createElement( 'div' ); this.element.style.position = 'absolute'; this.addEventListener( 'removed', function () { this.traverse( function ( object ) { if ( object.element instanceof Element && object.element.parentNode !== null ) { object.element.parentNode.removeChild( object.element ); } } ); } ); } copy( source, recursive ) { super.copy( source, recursive ); this.element = source.element.cloneNode( true ); return this; } } CSS2DObject.prototype.isCSS2DObject = true; // const _vector = new THREE.Vector3(); const _viewMatrix = new THREE.Matrix4(); const _viewProjectionMatrix = new THREE.Matrix4(); const _a = new THREE.Vector3(); const _b = new THREE.Vector3(); class CSS2DRenderer { constructor() { const _this = this; let _width, _height; let _widthHalf, _heightHalf; const cache = { objects: new WeakMap() }; const domElement = document.createElement( 'div' ); domElement.style.overflow = 'hidden'; this.domElement = domElement; this.getSize = function () { return { width: _width, height: _height }; }; this.render = function ( scene, camera ) { if ( scene.autoUpdate === true ) scene.updateMatrixWorld(); if ( camera.parent === null ) camera.updateMatrixWorld(); _viewMatrix.copy( camera.matrixWorldInverse ); _viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix ); renderObject( scene, scene, camera ); zOrder( scene ); }; this.setSize = function ( width, height ) { _width = width; _height = height; _widthHalf = _width / 2; _heightHalf = _height / 2; domElement.style.width = width + 'px'; domElement.style.height = height + 'px'; }; function renderObject( object, scene, camera ) { if ( object.isCSS2DObject ) { object.onBeforeRender( _this, scene, camera ); _vector.setFromMatrixPosition( object.matrixWorld ); _vector.applyMatrix4( _viewProjectionMatrix ); const element = object.element; if ( /apple/i.test( navigator.vendor ) ) { // https://github.com/mrdoob/three.js/issues/21415 element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)'; } else { element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)'; } element.style.display = object.visible && _vector.z >= - 1 && _vector.z <= 1 ? '' : 'none'; const objectData = { distanceToCameraSquared: getDistanceToSquared( camera, object ) }; cache.objects.set( object, objectData ); if ( element.parentNode !== domElement ) { domElement.appendChild( element ); } object.onAfterRender( _this, scene, camera ); } for ( let i = 0, l = object.children.length; i < l; i ++ ) { renderObject( object.children[ i ], scene, camera ); } } function getDistanceToSquared( object1, object2 ) { _a.setFromMatrixPosition( object1.matrixWorld ); _b.setFromMatrixPosition( object2.matrixWorld ); return _a.distanceToSquared( _b ); } function filterAndFlatten( scene ) { const result = []; scene.traverse( function ( object ) { if ( object.isCSS2DObject ) result.push( object ); } ); return result; } function zOrder( scene ) { const sorted = filterAndFlatten( scene ).sort( function ( a, b ) { const distanceA = cache.objects.get( a ).distanceToCameraSquared; const distanceB = cache.objects.get( b ).distanceToCameraSquared; return distanceA - distanceB; } ); const zMax = sorted.length; for ( let i = 0, l = sorted.length; i < l; i ++ ) { sorted[ i ].element.style.zIndex = zMax - i; } } } } THREE.CSS2DObject = CSS2DObject; THREE.CSS2DRenderer = CSS2DRenderer; } )();31:[{"id":"4c3f2ebc7cb9aa8cae92ab9c9040635c563bf9e694290760e494f945c9da9f67327ec73029efa6044a56d34bbc286b2f38abe7ddd44618807025f5feb55ac84f","href":"https://static.observableusercontent.com/files/4c3f2ebc7cb9aa8cae92ab9c9040635c563bf9e694290760e494f945c9da9f67327ec73029efa6044a56d34bbc286b2f38abe7ddd44618807025f5feb55ac84f","name":"Water.js","type":"application/javascript","lastModified":1729895398947.146,"size":11216}] 2d:{"id":"5bf2f2a286605863","slug":null,"title":"3D spiral prototype","thumbnail":"a46aa025f9a169cd143c44b2a5b8f0a8779ec8b097ea7e0a70a529386e429c5c","access_level":"public","create_time":"$D2024-10-25T15:51:01.319Z","update_time":"$D2024-10-28T17:29:52.760Z","view_time":null,"first_public_time":"$D2024-10-25T15:51:01.319Z","fork":{"id":"b53937d3137ea268","slug":"hello-three-js","title":"Hello, Three.js!","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":1,"starred":false,"owner":{"type":"team","id":"1de4cf74b6ea9ae6","login":"csdiehl","name":"Caleb Diehl","avatar_url":"https://avatars-next.observableusercontent.com/293a554321e19cf294ee39a87c4cad5dd8da63632c4b532bce0ea095a3f77fc5","tier":"starter_2024"},"version":493,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"225c40c7f05c4e1e","login":"csdiehl","name":"Caleb Diehl","avatar_url":"https://avatars-next.observableusercontent.com/293a554321e19cf294ee39a87c4cad5dd8da63632c4b532bce0ea095a3f77fc5","tier":null}],"members":[{"type":"individual","id":"225c40c7f05c4e1e","login":"csdiehl","name":"Caleb Diehl","avatar_url":"https://avatars-next.observableusercontent.com/293a554321e19cf294ee39a87c4cad5dd8da63632c4b532bce0ea095a3f77fc5","tier":null,"role":"editor"},{"type":"team","id":"1de4cf74b6ea9ae6","login":"csdiehl","name":"Caleb Diehl","avatar_url":"https://avatars-next.observableusercontent.com/293a554321e19cf294ee39a87c4cad5dd8da63632c4b532bce0ea095a3f77fc5","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"3D spiral prototype","cells":[{"id":0,"value":"md`# 3D spiral prototype\n\nprototype of moving a point along a parameterized curve. For any time point (t) we can render the x,y, and z position. \n\nForked from Bostock demo of [Three.js](https://threejs.org).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof time = Inputs.range([0, 799], {label: \"Time\", step: 1, width: width})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n const renderer = new THREE.WebGLRenderer({antialias: true});\n invalidation.then(() => renderer.dispose());\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n\n const labelRender = new THREE.CSS2DRenderer()\n\n \n renderer.render(scene, camera);\n // set sphere position based on index\n\n const labelRenderer = new THREE.CSS2DRenderer();\n\n const html_render = html`

\n ${renderer.domElement}\n

\n ${labelRenderer.domElement}\n

`\n \n \n \n \n yield html_render;\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x214B5F);\n scene.add(ground);\n scene.add(curve);\n scene.add(sphere);\n scene.add(sphereOutline);\n scene.add(heightLine);\n\n // lighting\n const ambientLight = new THREE.AmbientLight(0xffffff, .7); // Soft white ambient light\n scene.add(ambientLight);\n\n \n const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1); // orange directional light\n directionalLight.position.set(5, 10, 7.5); // Position it appropriately\n directionalLight.castShadow = true; // Enable shadow casting\n scene.add(directionalLight);\n\n \n\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"sphere = {\n const geometry = new THREE.SphereGeometry(.5, 32, 32);\n const material = new THREE.MeshStandardMaterial({ color: 0xFFFFFF }); // Red color\n\n const sphere = new THREE.Mesh(geometry, material);\n sphere.position.copy(positions[time]);\n return sphere\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"sphereOutline = {\n const geometry = new THREE.SphereGeometry(3, 32, 32);\n const material = new THREE.MeshStandardMaterial({ color: 0xFFFFFF, transparent: true, opacity: .2 }); \n\n const sphere = new THREE.Mesh(geometry, material);\n sphere.position.copy(positions[time]);\n\n // label\n const moonDiv = document.createElement( 'div' );\n moonDiv.className = 'threejs-label';\n moonDiv.textContent = 'Moon';\n moonDiv.style.backgroundColor = 'transparent';\n moonDiv.style.color = '#FFF';\n\n const birdLabel = new THREE.CSS2DObject( moonDiv );\n\tbirdLabel.position.set( 1, 0, 0 );\n\t// birdLabel.center.set( 0, 1 );\n\tsphere.add( birdLabel );\n\tbirdLabel.layers.set( 0 );\n \n return sphere\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"heightLine = {\n const material = new THREE.LineDashedMaterial({\n\tcolor: 0xFFFFFF,\n dashSize: .3,\n gapSize: .3,\n scale: 1,\n});\n\n const p2 = positions[time]\n const p1 = new THREE.Vector3(positions[time].x, 0, positions[time].z)\n\n const points = [p1,p2];\n\nconst geometry = new THREE.BufferGeometry().setFromPoints( points );\n\n const line = new THREE.Line( geometry, material );\n line.computeLineDistances();\n\nreturn line;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"ground = {\n // Create a plane geometry for the ground\nconst planeGeometry = new THREE.PlaneGeometry(200, 100); // Width and height of the plane\nconst planeMaterial = new THREE.MeshPhongMaterial({ \n color: 0xFFFFFF,\n side: THREE.DoubleSide, // Make the plane visible from both sides\n transparent: true,\n opacity: .1\n});\n\n// Create the plane mesh\nconst ground = new THREE.Mesh(planeGeometry, planeMaterial);\n\n// Rotate the plane to be horizontal (the default is vertical)\nground.rotation.x = -Math.PI / 2; // Rotate 90 degrees around the x-axis\n\n// Position the plane at y = 0\nground.position.set(0, 0, 0); // Center it in the scene\n\n return ground\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"data - x,y, and altitude (z) of bird in flight","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"numPoints = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"spiralRadius = 40; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"heightPerTurn = 0.05;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"turns = 8; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"positions = {\n\n// Generate spiral points\nconst pointsArray = [];\n\nfor (let i = 0; i < numPoints; i++) {\n const [x,y,z] = positionFromIndex(i);\n\n pointsArray.push(new THREE.Vector3(x, y, z));\n}\n return pointsArray\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"function positionFromIndex(i) {\n const angle = i * (2 * Math.PI) / (numPoints / turns); // angle per point\n const radius = spiralRadius * (i / numPoints); // radius grows with i\n const x = radius * Math.cos(angle);\n const y = heightPerTurn * i; // gradually increase y\n const z = radius * Math.sin(angle);\n\n return [x, y, z]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`The camera is a basic perspective with initial position ${tex`\\langle0,0,3\\rangle`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const fov = 70;\n const aspect = width / height;\n const near = .1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(0, 30, 65); // Move back and slightly above to see the full spiral\n camera.lookAt(0, 25, 0); // Point towards the center of the spiral\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`The height of the rendered scene is fixed. We’re using the built-in \\`width\\` so that the scene is automatically responsive.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`Lastly, we load Three.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = require(\"three@0.130.0/build/three.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"https://coolors.co/214b5f-7ae7c7-ef767a-eeb868-710627","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"https://www.liquid.fish/current/threejs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"