使用three.js写全景图，使用sprite类canvas，结合射线，点击跳转指定全景图【转】
https://blog.csdn.net/WDCCSDN/article/details/81214804
话不多说上代码：
1、html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="js/three.js"></script>
<script src="js/panorama.js"></script>
</html>
2、js
var key=4;
var renderer;
var camera;
var scene;
var light;
var stats;
var isUserInteracting = false,lon = 90,lat = 0,phi = 0, theta = 0,target = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(); //鼠标位置
var mesh,texture=[],go_room=[];
texture[0] = THREE.ImageUtils.loadTexture("images/1.jpg",null,function(t){});
texture[1] = THREE.ImageUtils.loadTexture("images/2.jpg",null,function(t){});
texture[2] = THREE.ImageUtils.loadTexture("images/3.jpg",null,function(t){});
texture[3] = THREE.ImageUtils.loadTexture("images/4.jpg",null,function(t){});
texture[4] = THREE.ImageUtils.loadTexture("images/5.jpg",null,function(t){});
texture[5] = THREE.ImageUtils.loadTexture("images/6.jpg",null,function(t){});
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 11000);
camera.target = new THREE.Vector3( 0, 0, 0 );
}
function initScene() {
scene = new THREE.Scene();
}
function initLight() {
}
function initModel() {
//声明一个球体
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
// 反转X轴上的几何图形，使所有的面点向内。
geometry.scale( -1, 1, 1 );
//声明球体纹理
if(texture[key-1]==undefined){
texture[key-1]=THREE.ImageUtils.loadTexture("images/"+key+".jpg",null,function(t){});
}
var material = new THREE.MeshBasicMaterial({map:texture[key-1]});
mesh = new THREE.Mesh( geometry,material );
scene.add( mesh );
initpos();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting === true ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseUp( event ) {
isUserInteracting = false;
}
function onDocumentMouseDown( event ) {
//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera( mouse, camera );
// 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects(go_room);
console.log(intersects);
if(intersects.length ==1){
switch (intersects[0].object.name){
case "room1":
changeScene(1);
break;
case "room2":
changeScene(2);
break;
case "room3":
changeScene(3);
break;
case "room4":
changeScene(4);
break;
case "room5":
changeScene(5);
break;
case "room6":
changeScene(6);
break;
}
}else{
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
}
function onDocumentMouseWheel( event ) {
var fov = camera.fov + event.deltaY * 0.05;
camera.fov = THREE.Math.clamp( fov, 10, 75 );
camera.updateProjectionMatrix();
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
onPointerDownPointerX = event.touches[ 0 ].pageX;
onPointerDownPointerY = event.touches[ 0 ].pageY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function animate() {
update();
requestAnimationFrame( animate );
}
function update() {
if ( isUserInteracting === false ) {
lon += 0.1;
}
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
target.x = 500 * Math.sin( phi ) * Math.cos( theta );
target.y = 500 * Math.cos( phi );
target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( target );
renderer.render( scene, camera );
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
animate();
}
function changeScene(index){
key=index;
var material = mesh.material;
if(texture[key-1]==undefined){
texture[key-1]=THREE.ImageUtils.loadTexture("images/"+key+".jpg",null,function(t){});
}
material.map = texture[key-1];
material.map.needsUpdate = true;
throwDir(key);
}
function throwDir(key){
switch (key){
case 1:
for(var i=0;i<6;i++){
if(i==3){
go_room[i].position.set(3.5,0,-0.3);
}else{
go_room[i].position.set(100,100,100);
}
scene.add(go_room[i]);
}
break;
case 2:
for(var i=0;i<6;i++){
if(i==3){
go_room[i].position.set(3.5,0,-0.5);
}else{
go_room[i].position.set(100,100,100);
}
scene.add(go_room[i]);
}
break;
case 3:
for(var i=0;i<6;i++){
if(i==3){
go_room[i].position.set(3,0,1);
}else{
go_room[i].position.set(100,100,100);
}
scene.add(go_room[i]);
}
break;
case 4:
go_room[0].position.set(-2.5,-0.2,-0.6);
scene.add(go_room[0]);
go_room[1].position.set(-3.8,0.3,-0.3);
scene.add(go_room[1]);
go_room[2].position.set(-3.8,0.3,0.3);
scene.add(go_room[2]);
go_room[3].position.set(-3,100,-0.6);
scene.add(go_room[3]);
go_room[4].position.set(-2.5,-0.2,0.6);
scene.add(go_room[4]);
go_room[5].position.set(-1.7,0,3);
scene.add(go_room[5]);
break;
case 5:
for(var i=0;i<6;i++){
if(i==3){
go_room[i].position.set(0.5,0,-2);
}else{
go_room[i].position.set(100,100,100);
}
scene.add(go_room[i]);
}
break;
case 6:
for(var i=0;i<6;i++){
if(i==3){
go_room[i].position.set(-0.3,0,2);
}else{
go_room[i].position.set(100,100,100);
}
scene.add(go_room[i]);
}
break;
}
}
function initpos(){
go_room[0] = makeTextSprite( " ","☝卧室1",{
"fontsize":20
});
go_room[0].name="room1";
go_room[0].position.set(-2.5,-0.2,-0.6);
scene.add(go_room[0]);
go_room[1] = makeTextSprite( " ","☝卧室2",{
"fontsize":20
});
go_room[1].name="room2";
go_room[1].position.set(-3.8,0.3,-0.3);
scene.add(go_room[1]);
go_room[2] = makeTextSprite( " ","☝卧室3",{
"fontsize":20
});
go_room[2].name="room3";
go_room[2].position.set(-3.8,0.3,0.3);
scene.add(go_room[2]);
go_room[3] = makeTextSprite( " ","☝客厅",{
"fontsize":20
});
go_room[3].name="room4";
go_room[3].position.set(-3,100,-0.6);
scene.add(go_room[3]);
go_room[4] = makeTextSprite( " ","☝卫生间",{
"fontsize":20
});
go_room[4].name="room5";
go_room[4].position.set(-2.5,-0.2,0.6);
scene.add(go_room[4]);
go_room[5] = makeTextSprite( " ","☝厨房",{
"fontsize":12
});
go_room[5].name="room6";
go_room[5].position.set(-1.7,0,3);
scene.add(go_room[5]);
}
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'touchend', onDocumentMouseDown, false );
function makeTextSprite( message,message_zw, parameters){
if ( parameters === undefined ) parameters = {};
var fontface = parameters.hasOwnProperty("fontface") ?
parameters["fontface"] : "Arial";
var fontsize = parameters.hasOwnProperty("fontsize") ?
parameters["fontsize"] : 30;
var borderThickness = parameters.hasOwnProperty("borderThickness") ?
parameters["borderThickness"] : 4;
var borderColor = parameters.hasOwnProperty("borderColor") ?
parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?
parameters["backgroundColor"] : { r:0, g:0, b:0, a:1.0 };
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = "Bold " + fontsize + "px " + fontface;
var metrics = context.measureText( message );
var textWidth = metrics.width;
context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
+ backgroundColor.b + "," + backgroundColor.a + ")";
context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
+ borderColor.b + "," + borderColor.a + ")";
context.lineWidth = borderThickness;
context.fillStyle = "#ff0000";
context.fillText( message, borderThickness, fontsize + borderThickness);
context.font = 40 + "px " + fontface;
context.fillText( message_zw, borderThickness, fontsize + borderThickness+40);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial(
{ map: texture, useScreenCoordinates: false} );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(0.5,0.5,0.5);
return sprite;
}
个人服务器，一兆带宽，全景图比较大，下载慢，需要等一会
查看地址：http://47.104.152.68/panorama/changeqjt.html
或者访问：http://www.lianjiakeji.com/
各位有没有啥处理图片的好方式尽量压缩图片，因为我的全景图平均每张有一兆大小，访问比较慢
使用three.js写全景图，使用sprite类canvas，结合射线，点击跳转指定全景图【转】的更多相关文章
- Make Things Move -- Javascript html5版（二）实现最基本的Sprite类和stage管理对象
现在这几篇写的都是比较基础的东西,有过相应开发经验的朋友可直接忽略啦. 计算机模拟的动画都是由很多静态的一连串影像(sprite)在一定帧率(fps)内逐帧播放出来的. 对于js来说,我们可以用提供的 ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- js深入研究之Person类案例
<script type="text/javascript"> /* 定义一个Person类 */ function Person(name, age) { this. ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- js写插件教程深入
原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name){ t ...
- js面向对象设计之class类
class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 使用JS写一个计算器
先上效果图: 简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能. 根据预期效果,可以确定页面中的布局要用到table tr td. 所以先放上页面布局,table的边框宽度border,c ...
- Node.js写文件的三种方法
Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...
随机推荐
- OCM_第八天课程：Section4 —》数据管理
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- Coursera台大机器学习技法课程笔记07-Blending and Bagging
这一节讲如何将得到的feature或hypothesis组合起来用于预测. 1. 林老师给出了几种方法 在选择g时,需要选择一个很强的g来确保Eval最小,但如果每个g都很弱该怎么办呢 这个时候可以选 ...
- Redis五大数据类型以及操作
目录: 一.redis的两种链接方式 二.redis的字符串操作(string) 三.redis的列表操作(list) 四.redis的散列表操作(类似于字典里面嵌套字典) 五.redis的集合操作( ...
- 【splunk】用正则表达式提取字段
设input输入数据为 http://192.168.23.121/xxx 想提取出里面的ip,可以用rex source="xxx.csv" |rex field=input ...
- poj2019 二维RMQ模板题
和hdu2888基本上一样的,也是求一个矩阵内的极值 #include<iostream> #include<cstring> #include<cstdio> # ...
- python 全栈开发，Day30(纸牌游戏,异常和错误,异常处理)
一.纸牌游戏 ...
- python 全栈开发，Day18(对象之间的交互,类命名空间与对象,实例的命名空间,类的组合用法)
一.对象之间的交互 现在我们已经有一个人类了,通过给人类一些具体的属性我们就可以拿到一个实实在在的人.现在我们要再创建一个狗类,狗就不能打人了,只能咬人,所以我们给狗一个bite方法.有了狗类,我们还 ...
- 判断iframe加载完成、用于当ifame加载完成时执行一些操作
window.frames["iframec"].addEventListener( "load", function(){ window.frames[&qu ...
- 《剑指offer》-数据流中的中位数
如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值. 最开始的思路 ...
- day17--JQuery
JQuery(中文社区:http://jquery.cuishifeng.cn/) 模块 类库 在不同语言叫法不一样而已 DOM/BOM/JavaScript的类库 一.查找元素 JQue ...