These is a place to save random notes like code snippets, links to assets, and other references. This doc might not be useful to anyone else :)
localhost:3333#managed-street-json:{"id":"aaaaaaaa-0123-4678-9000-000000000000","name":"Kieran's Awesome Street","width":40,"length":100,"justifyWidth":"center","justifyLength":"start","segments":[{"id":"aaaaaaaa-0123-4678-9000-000000000001","name":"Sidewalk for walking","type":"sidewalk","surface":"sidewalk","color":"#ffffff","level":1,"width":3,"direction":"none","generated":{"pedestrians":[{"density":"normal"}]}},{"id":"aaaaaaaa-0123-4678-9000-000000000002","name":"Sidewalk for trees and stuff","type":"sidewalk","surface":"sidewalk","color":"#ffffff","level":1,"width":1,"direction":"none","generated":{"clones":[{"mode":"fixed","model":"tree3","spacing":15}]}},{"id":"aaaaaaaa-0123-4678-9000-000000000003","name":"Parking for cars","type":"parking-lane","surface":"concrete","color":"#dddddd","level":0,"width":3,"direction":"inbound","generated":{"clones":[{"mode":"random","modelsArray":"sedan-rig, self-driving-waymo-car, suv-rig","spacing":6,"count":6}],"stencil":[{"model":"parking-t","cycleOffset":1,"spacing":6}]}},{"id":"aaaaaaaa-0123-4678-9000-000000000004","name":"Drive Lane for cars and stuff","type":"drive-lane","color":"#ffffff","surface":"asphalt","level":0,"width":3,"direction":"inbound","generated":{"clones":[{"mode":"random","modelsArray":"sedan-rig, box-truck-rig, self-driving-waymo-car, suv-rig, motorbike","spacing":7.3,"count":4}]}},{"id":"aaaaaaaa-0123-4678-9000-000000000005","name":"A beautiful median","type":"divider","surface":"sidewalk","color":"#ffffff","level":1,"width":0.5}]}
var entity = document.querySelector('.playme');
entity.components.sound.playSound();
https://glb-packer.glitch.me/ (combining gltf, glb, and textures) gltf pack (optimizing meshes): https://github.com/zeux/meshoptimizer/tree/master/gltf
https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html https://forum.substance3d.com/index.php?topic=3243.0 https://cgaxis.com/
https://www.flickr.com/photos/sitoo/48130422838/ https://www.flickr.com/photos/kanalu/40842804183/ https://www.flickr.com/photos/simonwaldherr/43292801800/ https://www.flickr.com/photos/sitoo/46891684951/ https://www.flickr.com/photos/165401243@N04/45103062855/ https://www.flickr.com/photos/170458314@N04/48375643091/in/pool-equirectangular/ https://www.hdri-skies-360.com/ http://www.philohome.com/skycollec/skycollec.htm https://cdn.eso.org/images/large/eso0932a.jpg
https://sketchfab.com/3d-models/residential-pack-part-1-4be6c94086bd476796e5568df6ca9ee7 <<-- this looks good https://sketchfab.com/3d-models/residential-pack-part-2-0d8f8bf7b49046aeb54426dd70213bc2 https://sketchfab.com/3d-models/residential-pack-part-3-c5a2c6ed161447dab81d34c09fb2dc7a https://sketchfab.com/3d-models/suburb-house-1-fbdd97651fff4a42b7d193f1b53bb8dd - low poly suburban https://poly.google.com/view/75V_MLvKMqM - cartoon style https://poly.google.com/view/cH1j7_BN9wx - bungalow rural https://poly.google.com/view/6FQ_iKCIQd7 - apartment style, photogrammetry low poly https://poly.google.com/view/2b2pH3CD9ad - photogrammetry low poly https://poly.google.com/view/bQpvnFgH5wr - cartoon style
https://poly.google.com/view/cINomH54DAx - low poly photogrammetry suburban commercial https://poly.google.com/view/2M7mM1xmEp1 - low poly photogrammetry urban PDR
Animate this https://twitter.com/metrolosangeles/status/1153807208229957632 Animate this https://twitter.com/FouadUrbanist/status/1176890584935653380 Animate this https://twitter.com/NACTO/status/1189926384233259008 Or something like this! https://github.com/nagix/mini-tokyo-3d Make this type of image interactive https://nacto.org/publication/urban-bikeway-design-guide/intersection-treatments/combined-bike-laneturn-lane/
https://www.instructables.com/id/Capture-3D-Models-From-Google-Maps-or-Earth/ https://www.autodesk.com/products/recap/overview
https://github.com/w3reality/three-geo A-Frame three-geo adapter from @bluepenguinvr https://glitch.com/edit/#!/threegeo-aframe?path=index.html:86:11 https://threegeo-aframe.glitch.me/
https://webkid.io/blog/3d-map-library-roundup/ cool example https://demo.f4map.com/#lat=55.7425832&lon=37.6501812&zoom=15&camera.theta=0.9 works but complicated code https://github.com/OSMBuildings/OSMBuildings interesting but not quite suited for this project https://github.com/peterqliu/threebox https://cesium.com/content/ Car driving reference code 1 https://github.com/spacejack/carphysics2d/blob/master/public/js/Car.js Car driving reference code 2 https://github.com/chipbell4/car-physics/blob/master/app.js
CA MUTCD 2014 Ch 3b Page 79-80, 88 https://dot.ca.gov/-/media/dot-media/programs/traffic-operations/documents/ca-mutcd/camutcd2014-chap3b-rev3-a11y.pdf CA MUTCD 2014 Ch 9c 9C-3 Page 11 - https://dot.ca.gov/-/media/dot-media/programs/traffic-operations/documents/ca-mutcd/camutcd2014-chap9c-rev3-a11y.pdf City of Lodi PWD https://www.lodi.gov/DocumentCenter/View/2519/710-Pavement-Marking-Details-PDF
Default segment widths:
- bike-lane 1.8m
- drive-lane 3m
- divider 0.3m
- parking-lane 2.4m
15 sidewalk1 8 parking 5 bike lane 10'6" drive lane1 10 drive lane 2 11 drive lane 3 5 bike lane 2 8 parking2 10 sidewalk2
Sources: https://striping.sfmta.com/drawings/H_Streets/Harrison%20St/Harrison%20st_str-8160.2%20(20th%20st%20to%2015th%20st).pdf https://www.sfmta.com/reports/striping-drawings
https://glitch.com/edit/#!/orbit-to-cam-position?path=POSITION-ROTATION.md:46:0
https://stackoverflow.com/questions/29586422/three-js-ignore-parents-rotation https://stackoverflow.com/questions/15181351/keep-object-rotation-based-on-parent-other-object-coordinate-system-in-three-js
orbit-to-cam-position
Show POSITION-ROTATION.md Connected aframe.scene.camera.getposition,zoom,rotation camEl = scene. AFRAME.scenes[0].camera.position AFRAME.scenes[0].camera.quaternion
AFRAME.scenes[0].camera.zoom remove attribute orbit-controls manually set camera position and rotation change rotation to euler convenience copy pasta for set 1 json with both
then animate the container around the camera broadcast component
var helperQuaternionSend = new THREE.Quaternion(); helperQuaternionSend.copy(el.object3D.quaternion);
document.getElementById("camera").getAttribute("orbit-controls", "enabled") document.getElementById("camera").setAttribute("orbit-controls", "enabled", "false") document.getElementById("camera").setAttribute("orbit-controls", "enabled", "true")
var jsonfun = {"position": AFRAME.scenes[0].camera.position, "quaternion": AFRAME.scenes[0].camera.quaternion}
AFRAME.scenes[0].camera.position = jsonfun["position"] // doesn't seem to work brah
AFRAME.scenes[0].camera.el. AFRAME.scenes[0].camera.position.copy(jsonfun2["position"])
AFRAME.scenes[0].camera.el.getObject3D('camera').position.set(0, 0, 0); //works!
AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: object3D.position.y; from: 1; to: 3")
AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: object3D.position.y; from: 0; to: 1")
AFRAME.scenes[0].camera.el.getObject3D('camera').position.set(0, 10, -4); //works! AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: object3D.position.x; from: 100; to: 0; easing: easeOutSine; dur: 2000;")
AFRAME.scenes[0].camera.el.getObject3D('camera').position.set(0, 10, -4); //works! AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: object3D.position; from: 100 10 -4; to: 0 10 -4; easing: easeOutSine; dur: 2000;")
AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: position; from: 0 10 -2; to: 0 1 5; easing: easeOutSine; dur: 2000;")
AFRAME.scenes[0].camera.rotation // returns euler in radians To convert: rotation in RAD / (Math.PI/180)
To get camera ROTATION as string in degrees: var rotationString = AFRAME.scenes[0].camera.rotation.x / (Math.PI/180) + " " + AFRAME.scenes[0].camera.rotation.y / (Math.PI/180) + " " + AFRAME.scenes[0].camera.rotation.z / (Math.PI/180)
var jsonfun2 = {"position": AFRAME.scenes[0].camera.position.x + " " + AFRAME.scenes[0].camera.position.y + " " + AFRAME.scenes[0].camera.position.z, "rotation": AFRAME.scenes[0].camera.rotation.x / (Math.PI/180) + " " + AFRAME.scenes[0].camera.rotation.y / (Math.PI/180) + " " + AFRAME.scenes[0].camera.rotation.z / (Math.PI/180) }
Neighborhood Welcome
- sky view, looking north - 2d map large: Mission District small: San Francisco, CA AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: position; from: 0 400 -2; to: 0.5 250 1; easing: easeOutSine; dur: 5000;")
fade in 3d model and 3d road or voxel road?
large: Harrison St small: 15th to Alameda St AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: position; from: 0.5 250 1; to: -42.634 12.735 -13.256; easing: easeInOutSine; dur: 5000;")
// RETURN AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: position; to: 0.5 250 1; from: -42.634 12.735 -13.256; easing: easeInOutSine; dur: 5000;")
large: Current Conditions small: September 2019 AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: position; to: -0.1 43 -7; from: -42.634 12.735 -13.256; easing: easeInOutSine; dur: 5000;")
fade out 3d model AFRAME.scenes[0].camera.el.setAttribute("animation__1", "property: position; from: -0.1 43 -7; to: -0.1 23 -7; easing: easeInOutSine; dur: 5000;")
small: Transit First Score large: 40% (red color)
Top Down (outbound) view Labels (voxel view) Width Overall Width for each segment 2d overlay of streetmix2d
Transit Score: 40% (red) score = width of transit segments / total width of street transit = anything but drive lane and parking
//FADE TO BLACK
Alt1 Parking Protected Inbound Alt2 Parking Protected Outbound
Transit Score: 50% (yellow)
alternate2
alt2 primary feature