Question

我对three.js很新，并尝试调整我在互联网上找到的一些脚本来解决我的问题。我已经有一个工作的3D视图与我的一个组件，但我需要一些新功能，可以在较新的版本中找到。我从r66开始想要升级到r71，但不知怎的，我得到了一些glDrawArray错误。我认为我的BufferGeometry有些不对（参见function：create_component）。以下是一些片段：

//main file
init();
animate();

function init() 
{
    if ( !Detector.webgl ) Detector.addGetWebGLMessage();

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0xFFFFFF, 1);

    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 2843.14990,  12217.65039);
    camera.position.x = 0.00000;
    camera.position.y = 0.00000;
    camera.position.z = 5897.56250;
    camera.up = new THREE.Vector3(0, 1, 0);
    var target = new THREE.Vector3(0.00000, 0.00000, 0.00000);
    camera.lookAt(target);

    controls = new THREE.TrackballControls(camera);
    controls.addEventListener('change', render);

    scene = new THREE.Scene();


    var light_ambient = new THREE.AmbientLight(0x000000);
    scene.add(light_ambient);

    light = new THREE.PointLight(0x999999);
    light.position.set(2843.14941, -3790.86621, 5686.29980);
    scene.add(light);
    light = new THREE.PointLight(0x4C4C4C);
    light.position.set(-3790.86621, -3790.86621, 2843.14990);
    scene.add(light);
    light = new THREE.PointLight(0x4C4C4C);
    light.position.set(0.00000, 3790.86646, 3790.86621);
    scene.add(light);

    create_component(scene);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() 
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

    controls.handleResize();
    render();
}

function animate()
{
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
}

function render()
{
    renderer.render(scene, camera);
}


//second file  
function create_component(scene)
{
    var mesh;
    var material;
    var geometry;
    //var parent;

    //parent = new THREE.Object3D();
    //parent.name = 'test';
    //scene.add(parent);

    geometry = new THREE.BufferGeometry();
    geometry.attributes = {
        position: {
            itemSize: 3,
            array: new Float32Array([
            439.22070, 1088.16528, 57.26282,
            14.22070, 1088.16528, 57.26282,
            439.22070, -351.82593, 57.26282,
            439.22070, -351.82593, 57.26282,
            14.22070, 1088.16528, 57.26282,
            14.22070, -351.82593, 57.26282,
            589.22070, -1126.83447, 57.26282,
            1014.22070, -1126.83447, 57.26282,
            589.22070, 1033.15649, 57.26282,
            589.22070, 1033.15649, 57.26282,
            1014.22070, -1126.83447, 57.26282,
            1014.22070, 1033.15649, 57.26282,
            515.72070, -1016.83447, 57.26282,
            515.72070, -391.83472, 57.26282,
            -1103.27100, -1016.83496, 57.26282,
            -1103.27100, -1016.83496, 57.26282,
            515.72070, -391.83472, 57.26282,
            -1103.27100, -391.83472, 57.26282,
            -1103.27979, -1166.83496, 57.26282,
            -1103.27979, -1791.83496, 57.26282,
            1056.71191, -1166.83447, 57.26282,
            1056.71191, -1166.83447, 57.26282,
            -1103.27979, -1791.83496, 57.26282,
            1056.71191, -1791.83447, 57.26282,
            466.76074, -1166.83447, 57.26282,
            466.76074, -1791.83447, 57.26282,
            1465.75195, -1166.83447, 57.26282,
            1465.75195, -1166.83447, 57.26282,
            466.76074, -1791.83447, 57.26282,
            1465.75195, -1791.83447, 57.26282
            ])
        },
        normal: {
            itemSize: 3,
            array: new Float32Array([
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000,
            0.00000, 0.00000, 1.00000
            ])
            }
        };

        material = new THREE.MeshPhongMaterial({
            color: 0x505050,
            shininess: 2.00000,
            ambient: 0x505050,
            side: THREE.DoubleSide,
            specular: 0x000000
        });

    mesh = new THREE.Mesh(geometry, material);
    //parent.add(mesh);
    scene.add(mesh);
}

当我用float32arrays排除文件时，一切都很好。我希望有人可以给我一个tipp如何解决这个问题，因为我对使用webGL进行编程没有太多经验。

谢谢！

Answer 1

以下是您创建BufferGeometry：

时可以遵循的模式

var positions = new Float32Array( [
        439.22070, 1088.16528, 57.26282,
        . . .
        1465.75195, -1791.83447, 57.26282
        ] );

var normals = new Float32Array( [
        0.00000, 0.00000, 1.00000,
        . . .
        0.00000, 0.00000, 1.00000
        ] );

geometry = new THREE.BufferGeometry();

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );

three.js r.71

在三个.js中迁移BufferGeometry的问题

1 个答案: