|
|
| Line 2: |
Line 2: |
|
| |
|
| =Update on May 6, 2013= | | =Update on May 6, 2013= |
| <html><HEAD>
| |
| <TITLE>SketchUp</TITLE>
| |
| <STYLE>
| |
|
| |
| BODY {margin-top: 0px;}
| |
|
| |
| #title {
| |
| text-align: center;
| |
| font: bold 14px arial;
| |
| margin-bottom: 0px;
| |
| }
| |
|
| |
| #date {
| |
| margin-top: 3px;
| |
| font: normal 10px arial;
| |
| }
| |
|
| |
| #sketchUpObj {
| |
| width: 0px;
| |
| }
| |
|
| |
| #sheet {
| |
| position: absolute;
| |
| width: 600px;
| |
| height: 600px;
| |
| z-index: 3;
| |
| background-color: #FF00FF;
| |
| cursor: w-resize;
| |
| border: solid 1px #676767;
| |
| }
| |
|
| |
| .sketchUpImage {
| |
| position: absolute;
| |
| width: 600px;
| |
| height: 600px;
| |
| z-index: 2;
| |
| border: solid 1px #676767;
| |
| }
| |
|
| |
|
| |
| </STYLE>
| |
|
| |
| <SCRIPT>
| |
| // list of image filenames
| |
| var imageFileNameArray = new Array(
| |
| 'PTTruck2_image0.jpg',
| |
| 'PTTruck2_image1.jpg',
| |
| 'PTTruck2_image2.jpg',
| |
| 'PTTruck2_image3.jpg',
| |
| 'PTTruck2_image4.jpg',
| |
| 'PTTruck2_image5.jpg',
| |
| 'PTTruck2_image6.jpg',
| |
| 'PTTruck2_image7.jpg',
| |
| 'PTTruck2_image8.jpg',
| |
| 'PTTruck2_image9.jpg',
| |
| 'PTTruck2_image10.jpg',
| |
| 'PTTruck2_image11.jpg',
| |
| 'PTTruck2_image12.jpg',
| |
| 'PTTruck2_image13.jpg',
| |
| 'PTTruck2_image14.jpg',
| |
| 'PTTruck2_image15.jpg',
| |
| 'PTTruck2_image16.jpg',
| |
| 'PTTruck2_image17.jpg',
| |
| 'PTTruck2_image18.jpg',
| |
| 'PTTruck2_image19.jpg',
| |
| 'PTTruck2_image20.jpg',
| |
| 'PTTruck2_image21.jpg',
| |
| 'PTTruck2_image22.jpg',
| |
| 'PTTruck2_image23.jpg',
| |
| 'PTTruck2_image24.jpg',
| |
| 'PTTruck2_image25.jpg',
| |
| 'PTTruck2_image26.jpg',
| |
| 'PTTruck2_image27.jpg',
| |
| 'PTTruck2_image28.jpg',
| |
| 'PTTruck2_image29.jpg',
| |
| 'PTTruck2_image30.jpg',
| |
| 'PTTruck2_image31.jpg',
| |
| 'PTTruck2_image32.jpg',
| |
| 'PTTruck2_image33.jpg',
| |
| 'PTTruck2_image34.jpg',
| |
| 'PTTruck2_image35.jpg',
| |
| 'PTTruck2_image35.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 init() {
| |
| title = document.getElementById('title');
| |
| sketchUpObj = document.getElementById('sketchUpObj');
| |
| imageCount = imageFileNameArray.length;
| |
|
| |
| // load up the imageArray with the sketchUp images
| |
| var left = sketchUpObj.offsetLeft - 600/2;
| |
| 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>
| |
| </HEAD>
| |
| <BODY onload=init()>
| |
| <CENTER><DIV id='sketchUpObj'></DIV></CENTER>
| |
| </BODY>
| |
| </html>
| |
|
| |
|
| [[Image:Trucktor.jpg|500px]] | | [[Image:Trucktor.jpg|500px]] |
| Line 283: |
Line 27: |
|
| |
|
| =3D Model= | | =3D Model= |
| [[File:Trucktor.KMZ]]
| |
