threejs 实现3d全景，场景转动方向与鼠标移动方向相反
描述如标题，本人是新手，求大神指点迷津
这是预览地址 http://fishwx.duapp.com/pano
以下为源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全景图开发测试</title>
<style>
*{overflow: hidden;margin:0;padding:0;}
canvas {
width: 100%;
height: 100%;
}
.fixtitle {
width: 190px;
height: 50px;
line-height: 50px;
text-indent: 10px;
color: red;
z-index: 1000;
position: fixed;
background: rgba(20, 89, 255, 0.5);
}
.fixtitle:after {
font-size: 24px;
font-weight: bold;
content: '测试fisher';
}
</style>
</head>
<body>
<div class="fixtitle"></div>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
;
(function () {
var index = (function () {
var scene, camera, renderer, controls,
renderCount = 0;
return {
init: function () {
index.initScene();
//添加事件
index.addEvent();
//执行
index.render();
index.animate();
},
initScene: function () {
scene = new THREE.Scene();
var ext = '.png'
, textureCube = new THREE.CubeTextureLoader()
.setPath('img/')
.load([
'0001' + ext,
'0003' + ext,
'0006' + ext,
'0005' + ext,
'0002' + ext,
'0004' + ext
]);
scene.background = textureCube;
//加入环境光,浅灰色
scene.add(new THREE.AmbientLight(0xffffff));
index.initCamera();
index.initRenderer();
index.initControls();
},
initCamera: function () {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);
scene.add(camera);
},
initRenderer: function () {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
},
initControls:function(){
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', index.render);
controls.autoRotate = false;//自动旋转开关
controls.autoRotateSpeed = 2;
},
addEvent:function(){
window.addEventListener('resize', index.windowResize, false);
function onBorderMouseUp(ev) {
window.addEventListener("drag", function(){alert('drag')});
}
onBorderMouseUp();
},
render: function () {
renderer.render(scene, camera);
},
animate: function () {
if (renderCount === 0) {
index.render();
}
requestAnimationFrame(index.animate);
controls.update();
},
windowResize:function(){
console.log(new Date());
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
controls.reset();
index.render();
}
};
})();
index.init();
})();
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
厉害了！遇到同样问题完美解决
谢谢大神,解决了
OrbitControls旋转的是相机，当你相机往左转的时候，当然相对的，看起来物体就是右移的了。
可以直接修改源码，把rotateLeft方法和rotateUp方法里的-=改为+=就行了