「折り返しらせんタワー　直線坂」の編集履歴（バックアップ）一覧に戻る

折り返しらせんタワー　直線坂 - (2010/01/28 (木) 21:41:19) のソース

#javascript(){{{
<SCRIPT type=text/javascript>
// list of image filenames
var imageFileNameArray = new Array(
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image0.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image1.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image2.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image3.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image4.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image5.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image6.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image7.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image8.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image9.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image10.jpg',
 'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image11.jpg',
  'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image11.jpg');



// list of html image elements
var sketchUpImageArray = new Array();
var currentPos = 0;
var addToPos = 0;
var imageCount = 0;

var sketchUpObj = null;

var mouseXOrig;
var mouseX = 0;
var mouseY = 0;
var mouseIsDown = false;

var title = null;

function init3141592() {
  title = document.getElementById('title');
  sketchUpObj = document.getElementById('sketchUpObj');
  imageCount = imageFileNameArray.length;

  // load up the imageArray with the sketchUp images
  var left = sketchUpObj.offsetLeft+180;
  var top =  sketchUpObj.offsetTop+112;
  for (i = 0; i < imageCount; i++) {
    sketchUpImageArray[i] = new Image();
    sketchUpImageArray[i].src = imageFileNameArray[i];
    sketchUpImageArray[i].className = 'sketchUpImage';
    sketchUpImageArray[i].style.left = left + "px";
    sketchUpImageArray[i].style.top = top + "px";
    hide(sketchUpImageArray[i]);
    document.body.appendChild(sketchUpImageArray[i]);
  }

  // create a transparent sheet over the images so that the mouse
  // events go it it
  var sheet = document.createElement("DIV");
  document.body.appendChild(sheet);
  sheet.id = "sheet";
  sheet.style.left = left + "px";
  sheet.style.top = top + "px";
  sheet.onmousemove = handleRotate;
  sheet.onmousedown = handleMouseDown;
  sheet.onmouseup = handleMouseUp;
  sheet.onmouseout = handleMouseUp;
  setOpacity(sheet, 0.0);

  currentPos = imageCount-1
  show(sketchUpImageArray[currentPos]);
}


/**
 * When the mouse goes down, start rotating the image
 *
 * @param {Event} mousedown event
 */
function handleMouseDown(e) {
  if (!e) { e = window.event; }
  getMouseXY(e);
  mouseXOrig = mouseX;
  addToPos = 0;
  mouseIsDown = true;
}

/**
 * When the mouse goes up, stop rotating the image
 *
 * @param {Event} mouseup event
 */
function handleMouseUp(e) {
  mouseIsDown = false;
  currentPos += addToPos;
}


/**
 * Divide the width of the html object by the number of images.
 * As the mouse moves over the html object, show the appropriate image
 * giving the illusion that the user is spinning the object.
 *
 * @param {Event} mousemove event
 */
function handleRotate(e) {
  if (!e) { e = window.event; }

  if (!mouseIsDown) {
    return;
  }

  getMouseXY(e);

  // STEP is how many pixels equals an image swap
  var STEP = 10; 
  var width = sketchUpObj.offsetWidth;
  var delta = mouseX - mouseXOrig;

  addToPos = Math.floor(delta/STEP);

  //handle wrap around
  var wrap = (currentPos + addToPos) % imageCount;
  var newPos = (wrap < 0) ? imageCount + wrap : Math.abs(wrap);

  //hide everyone except the image we are over
  for (var i = 0; i < imageCount; i++) {
    hide(sketchUpImageArray[i]);
  }

  show(sketchUpImageArray[newPos]);

  return false;
}

/**
 * Get the mouse position from the event e
 * @param {Event} e mouse move event
 */
function getMouseXY(e) {
  if (e.pageX) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  } else {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
  }  

  if (mouseX < 0){mouseX = 0;}
  if (mouseY < 0){mouseY = 0;} 
}

/**
 * Get the left coordinate of the element
 */
function getLeft(element) {
  var x = 0;
  while (element) {
    x += element.offsetLeft;
    element = element.offsetParent;
  }

  return x;
};


function setOpacity(element, opacity) {
  element.style.filter = "alpha(opacity=" + Math.round(opacity*100) + ")";
  element.style.opacity = opacity;
}

/**
 * Hides the HTML element.
 * @param element HTMLElement the element we hide
 */
function hide(element) {
  element.style.display = 'none';
}


/**
 * show the HTML element.
 * @param element HTMLElement the element we want to see.
 */
function show(element) {
  element.style.display = 'block';
}


</SCRIPT>
}}}
#html2(){{{{{{
<DIV id=sketchUpObj></DIV>
}}}}}}
#javascript(){{{
<script>window.onload = function(){ init3141592();}</script>
}}}
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=model_image1.jpg)

[[sketchupでプラレール>http://mas.txt-nifty.com/3d/]]で公開されているデータを勝手に使って、らせんタワーを作成してみました。 
現物で作ろうとすると、とってもブロックが足りないので重宝します。 
定価で集めたら、1万円ちょっとかかりそうです。 
上下のS字カーブの曲線と坂レールの間がすこし狭くなっているので、列車に干渉されるおそれがあります。

1/4レールを使った折り返しを作ります。
#ref(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=01-1.png)
#ref(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=01.png)
ニュー坂レールで上ります。
#ref(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=02.png)
２層目を積みます。
#ref(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=03.png)
４層目まで。
#ref(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=04.png)
５層目を乗せて完成です。一部接続を凹凹にしています。
#ref(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=136&file=05.png)