three.js场景中的波浪线

时间:2014-08-07 22:50:41

标签: javascript three.js

我正在尝试使用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);



}

知道如何理顺吗?

0 个答案:

没有答案