如何在全景中实现平滑的热点焦点

Question

自从过去2天以来，我一直在努力实现平稳的热点焦点，但我无法实现它。

请点击下面的链接并点击全景图标，你会明白我在说什么。  http://ggnome.com/samples/pano2vr_5/tower/

PS：我使用了http://threejs.org/examples/webgl_panorama_equirectangular.html全景图来实现所需的功能。

任何人都可以帮助我...

Answer 1

您必须在场景中创建一个3d对象并使其可点击或添加第二个三个渲染器，这次它将是一个css3drenderer，基本上它允许在你的threejs世界中拥有html元素。将相机放在由html / css元素制作的立方体中间：

http://mrdoob.com/lab/javascript/threejs/css3d/

或完全使用css，例如：

＆＃13;

＆＃13;

$('body').on('click', function(e) {
	
	console.log('clicked on .cube. New transform: ');
	var newTransform = "translateZ(800px) rotateX("+Math.round(Math.random() * 360)+"deg) rotateY("+Math.round(Math.random() * 360)+"deg) rotateZ("+0+"deg)";
	console.log(newTransform)

	$('.cube').css({
		"transform": newTransform,
		"-webkit-transform": newTransform,
	})
});

$('video').on('ended', function () {
	console.log('ended')
  this.load();
  this.play();
});

var mousedown = true;

/*$(document).on('mousedown', function() {
	mousedown = true;
})

$(document).on('mouseup', function() {
	mousedown = false;
})*/

$(document).on('mousemove', function(e) {
	if (mousedown) {
		var posx = e.clientX;
		var posy = e.clientY;
		var startposx = 0;
		var startposy = 0;
		
		var newTransform = "translateZ(800px) rotateX("+ (startposx + posy * -1) +"deg) rotateY("+ (startposy + posx) +"deg) rotateZ("+0+"deg)";
		$('.cube').css({
			"transform": newTransform,
			"-webkit-transform": newTransform,
		})
		/*
		startposx = posx;
		startposy = posy;
		*/
	}
})

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;