我正在尝试使用three.js创建一个简单的全景播放器,但是使用我的测试图块时,一些直线是波浪状的
http://gms.beektest.co:9081/resources/beek3/eg.html
我用这个作为例子
http://mrdoob.github.io/three.js/examples/canvas_geometry_panorama.html
然而我的瓷砖更大。
Here is the code:
function init() {
var container, mesh;
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
scene = new THREE.Scene();
texture_placeholder = document.createElement('canvas');
texture_placeholder.width = 512;
texture_placeholder.height = 512;
var context = texture_placeholder.getContext('2d');
context.fillStyle = 'rgb( 400, 400, 400 )';
context.fillRect(0, 0, texture_placeholder.width, texture_placeholder.height);
var materials = [
loadTexture('http://cdn.beek.co/scene_27_pano_4_r/9/0_0.jpg'), // right
loadTexture('http://cdn.beek.co/scene_27_pano_4_l/9/0_0.jpg'), // left
loadTexture('http://cdn.beek.co/scene_27_pano_4_u/9/0_0.jpg'), // top
loadTexture('http://cdn.beek.co/scene_27_pano_4_d/9/0_0.jpg'), // bottom
loadTexture('http://cdn.beek.co/scene_27_pano_4_f/9/0_0.jpg'), // back
loadTexture('http://cdn.beek.co/scene_27_pano_4_b/9/0_0.jpg') // front
];
mesh = new THREE.Mesh(new THREE.BoxGeometry(512, 512, 512, 7, 7, 7), new THREE.MeshFaceMaterial(materials));
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
// renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mousewheel', onDocumentMouseWheel, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
知道如何理顺吗?