「らせんタワー 直線坂」の編集履歴(バックアップ)一覧はこちら
らせんタワー 直線坂 - (2010/01/25 (月) 22:36:02) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
#javascript(){{{
<SCRIPT type=text/javascript>
// list of image filenames
var imageFileNameArray = new Array(
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image0.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image1.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image2.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image3.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image4.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image5.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image6.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image7.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image8.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image9.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image10.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image11.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&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=138&file=model_image3.jpg)
[[sketchupでプラレール>http://mas.txt-nifty.com/3d/]]で公開されているデータを勝手に使って、らせんタワーを作成してみました。
現物で作ろうとすると、とってもブロックが足りないので重宝します。
定価で集めたら、1万円ちょっとかかりそうです。
作り方
曲線4つとミニブロックを図のように並べます
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=137&file=01.jpg)
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=137&file=01-1.jpg)
ミニブロックの上に曲線を並べます
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=137&file=02.jpg)
2倍直線と曲線を使って、レールの上に層を積み重ねます。
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=137&file=03.jpg)
4層目まで重ねます。
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=137&file=04.jpg)
5層目の真ん中を渡して完成です。
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=137&file=05.jpg)
#javascript(){{{
<SCRIPT type=text/javascript>
// list of image filenames
var imageFileNameArray = new Array(
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image0.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image1.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image2.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image3.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image4.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image5.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image6.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image7.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image8.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image9.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image10.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=model_image11.jpg',
'http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&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;
var top = sketchUpObj.offsetTop;
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=138&file=model_image3.jpg)
[[sketchupでプラレール>http://mas.txt-nifty.com/3d/]]で公開されているデータを勝手に使って、らせんタワーを作成してみました。
現物で作ろうとすると、とってもブロックが足りないので重宝します。
定価で集めたら、1万円ちょっとかかりそうです。
上下のS字カーブの曲線と坂レールの間がすこし狭くなっているので、列車に干渉されるおそれがあります。
作り方
曲線レールを図のように並べます
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=05.jpg)
ニュー坂レールで2層目にあがります
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=04.jpg)
レールの上に層を積み重ねます。
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=03.jpg)
4層目まで重ねます。
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=02.jpg)
5層目を渡して完成です。
#image(http://www9.atwiki.jp/plalayout?cmd=upload&act=open&pageid=138&file=01.jpg)