は、ここで私はちょうど一緒に投げたjavascriptの一部だ助けhttps://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
希望。事前に構築されたライブラリの1つを選んで(ブラウザの互換性などのために)、実際に何が起きているのかを確かめることができます。構文と回転アニメーションが表示され、他のエラー
<!-- an empty div to hold your images/frames -->
<div id="view3d"></div>
...
<script>
(function() {
// setup
var viewer = document.getElementById("view3d");
var name = "3d Boat";
var frameUri = "/images/demo3d.#.jpg";
var frameStart = 1;
var frameEnd = 100;
// setup the html IMG's
for(var i=frameStart; i<=frameEnd; i++) {
var img = document.createElement("img");
img.src = frameUri.replace("#", i);
img.alt = name;
img.style.display = "none";
viewer.appendChild(img);
}
// persisted variables and events
var that = this;
this.rotateX = 0;
this.isRotating = false;
this.frames = viewer.getElementsByTagName("img");
this.frameIdx = 0;
this.pixelsPerFrame = viewer.offsetWidth/(frames.length/2);
function rotateMouseUp() { isRotating = false; };
function rotateMouseDown(event) {
mouseX = event.pageX;
isRotating = true;
};
function rotateMouseMove(event) {
if(!this.isRotating)
return;
var x = event.pageX;
var delta = this.rotateX - x;
if(delta >= this.pixelsPerFrame) {
this.rotateX = x;
this.frames[this.frameIdx].style.display = 'none';
this.frameIdx = (this.frameIdx + parseInt(delta/pixelsPerFrame)) % this.frames.length;
this.frames[this.frameIdx].style.display = '';
}
}
viewer.onmousedown = rotateMouseDown.bind(that);
viewer.onmouseup = rotateMouseUp.bind(that);
viewer.onmousemove = rotateMouseMove.bind(that);
// show the first image
this.frames[this.frameIdx].style.display = '';
})();
</script>
ではなく、3Dモデルの一連の写真から作成されたものがあるかもしれないので、ノートは私がフォームを送信する答えでこれを書いています。この場合、他の一連の画像を回転させるのと同じ方法を使用することができます。 –
実際に写真を使う以外の方法はありません。 3世紀のようなことを学んだり、キャンバス/ svgに3Dをマッピングするのに永遠にかかるように、今世紀にはそれを達成しても問題ないようにしようとしているのではないでしょうか。 – adeneo
Er。いいえ、それだけではない、私はおそらくこれや何かのように何かをすることができます(私はちょうど遅い)数週間の3つのjsを学んでいない。 3Dグラフィックスとレンダラーを正しく理解すれば難しくない – Deep