全景漫游（已经备份）

three.js panorama

via Three.js

1. WebGL + HTML5 + THREE.js

WebGL & HTML5

Three.js

Pros：

• 简化
• 强大
• 微信
• 开源

Cons：

• 文档
• API 变动
• 前端工具

2. Three.js 流程

camera, {objects(mesh = geometry + material)} => scene
=> renderer => container(html-elment)

01YYrMaASOzm.small未知大小

3. Demo (panorama / equirectangular)

demo

source img

source code

var camera, scene, renderer;
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
var material = new THREE.MeshBasicMaterial( {
    map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

图片的另一种方式：
p{x,y,z}, n{x,y,z}: positive direction, negative direction of {X,Y,Z}-axis
X-axis
&
Y-axis
&
Z-axis
&

载入其他数据：3ds Max，Maya，Blender，CAD，点云、octree，etc => JSON

4. 江苏大学 StreetView

有的 & 没有的

数据：src/data/scenes.json

[{
  "title": "校大门",
  "location": [119.525273, 32.199919],
  "type": "sphere",
  "src": "data/ujs/2f8bc20ba2395ad2c03f7d9576fb4cdc24936b34.jpg",
  "thumbs": "data/ujs/2f8bc20ba2395ad2c03f7d9576fb4cdc24936b34.thumb.jpg"
},
...
]

5. 怎么改，讨论可行性

• JSON: title, location, img + height(level) + 航偏角
• 漫游按钮（距离，渐变，etc）
• 全景图（广角镜头，maybe）
• 地图联动？鱼眼？
• 自己的坐标系统？（室内）

6. Frontend

• 工具（NodeJS，NPM，BootStrap，etc）
• 工作流 （人，自动）
• 规范相关（JS，HTML，Restful，CDN）

》完《

log: $1. Sat Jan 10 18:50:18 CST 2015; $2. Sat Jan 31 16:18:34 CST 2015;