最後の2日間から、スムーズなホットスポットフォーカスを達成しようとしていますが、達成できません。パノラマで滑らかなホットスポットフォーカスを達成する方法
下のリンクをクリックしてパノラマアイコンをクリックすると、私が言っていることを知ることができます。 http://ggnome.com/samples/pano2vr_5/tower/
PS：私は希望の機能を達成するためにhttp://threejs.org/examples/webgl_panorama_equirectangular.htmlパノラマを使用しました。
、誰もがあなたがこのいずれかください...
で私を助けて、あなたのシーンに3Dオブジェクトを作成し、それをクリック可能にするか、二threejsレンダラを追加する必要がありますすることができ、この時間は、それはcss3drendererになり、基本的にあなたの3j世界でhtml要素を持つことができます。 HTML/CSSの要素によって作られた立方体の真ん中にカメラを置き：
http://mrdoob.com/lab/javascript/threejs/css3d/
やCSSで完全に行く、のようなもの：
$('body').on('click', function(e) {
\t
\t console.log('clicked on .cube. New transform: ');
\t var newTransform = "translateZ(800px) rotateX("+Math.round(Math.random() * 360)+"deg) rotateY("+Math.round(Math.random() * 360)+"deg) rotateZ("+0+"deg)";
\t console.log(newTransform)
\t $('.cube').css({
\t \t "transform": newTransform,
\t \t "-webkit-transform": newTransform,
\t })
});
$('video').on('ended', function() {
\t console.log('ended')
this.load();
this.play();
});
var mousedown = true;
/*$(document).on('mousedown', function() {
\t mousedown = true;
})
$(document).on('mouseup', function() {
\t mousedown = false;
})*/
$(document).on('mousemove', function(e) {
\t if (mousedown) {
\t \t var posx = e.clientX;
\t \t var posy = e.clientY;
\t \t var startposx = 0;
\t \t var startposy = 0;
\t \t
\t \t var newTransform = "translateZ(800px) rotateX("+ (startposx + posy * -1) +"deg) rotateY("+ (startposy + posx) +"deg) rotateZ("+0+"deg)";
\t \t $('.cube').css({
\t \t \t "transform": newTransform,
\t \t \t "-webkit-transform": newTransform,
\t \t })
\t \t /*
\t \t startposx = posx;
\t \t startposy = posy;
\t \t */
\t }
})/* scene wrapper */
.wrapper{
height: 300px;
margin-top:50px;
position:relative;
perspective: 800;
-webkit-perspective: 1600;
-moz-perspective: 800;
perspective-origin: 50% 1000px;
-webkit-perspective-origin: 50% 1000px;
-moz-perspective-origin: 50% 1000px;
}
/* cube wrapper */
.cube{
position: relative;
margin: 0 auto;
width: 2000px;
transform-style: preserve-3d;
transform: translateZ(1000px) rotateX(0deg) rotateY(10deg) rotateZ(0);
transform-origin: 1000px 1000px;
-webkit-transform-origin: 1000px 1000px;
-moz-transform-origin: 1000px 1000px;
/*transition: all 1000ms ease-in-out;*/
}
/* outer cube */
b{
position:absolute;
width:2000px;
height:2000px;
display:block;
background:rgba(255,255,255,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:2000px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
/*transition: all 1s linear;*/
}
b video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 2000px;
height: 2000px;
background: black;
}
b img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 2000px;
height: 2000px;
}
b.back{
transform: translateZ(-1000px) rotateY(180deg);
}
b.right{
transform:rotateY(90deg) translateX(1000px);
transform-origin: top right;
}
b.left{
transform:rotateY(270deg) translateX(-1000px);
transform-origin: center left;
}
b.top{
transform:rotateX(90deg) translateY(-1000px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(-90deg) translateY(1000px);
transform-origin: bottom center;
}
b.front{
transform: rotateX(0deg) translateZ(1000px);
}
b p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
z-index: 9;
font-size: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="cube">
<b class="front">
<video id="sourcevid" autoplay loop controls>
<source src="video/BigBuckBunny_640x360.mp4" type="video/mp4">
<source src="video/BigBuckBunny_640x360.ogv" type="video/ogg">
</video>
<p class="face">FRONT</p>
</b>
<b class="back">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">BACK</p>
</b>
<b class="top">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">TOP</p>
</b>
<b class="bottom">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">BOTTOM</p>
</b>
<b class="left">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">LEFT</p>
</b>
<b class="right">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">RIGHT</p>
</b>
</div>
</div>