Question

我在我的网站上可视化生物数据（神经元）。我绘制了由相当数量的球体和圆柱体组成的神经元。问题是场景非常慢（用鼠标自动旋转和控制场景）。在桌面应用程序中，我曾经在OpenGL中使用DisplayList，它以很好的方式提高了性能。 THREE.js是否具有与displaylist相当的东西？或者它有什么提高它的表现？

这是我的代码：

<script>
    var container, stats;
    var camera, scene, renderer;
    var neuron, neuron_center;

    var sphere_material_soma = new THREE.MeshPhongMaterial({
    wireframe: false,
    color: 0x0000ff,
    specular: 0x555555,
    shininess: 30});

    var sphere_material_bif = new THREE.MeshPhongMaterial({
    wireframe: false,
    color: 0x00ff00,
    specular: 0x555555,
    shininess: 30});

    var sphere_material_tip = new THREE.MeshPhongMaterial({
    wireframe: false,
    color: 0xffff00,
    specular: 0x555555,
    shininess: 30});

    var sphere_material_normal = new THREE.MeshPhongMaterial({color: 0xff0000, specular: 0x555555, shininess: 30});     


    init();
    animate();

    function init() {

        container = document.getElementById('visualization');

        neuron_center = new THREE.Vector3({{ neuron.center.x }}, {{ neuron.center.y }}, {{ neuron.center.z }});

        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100000);
        camera.position.z = neuron_center.z + 200;

        scene = new THREE.Scene();
        neuron = new THREE.Group();


        draw_neuron();

        scene.add(neuron);

        var dirLight = new THREE.DirectionalLight(0xffffff, 1);
        dirLight.position.set(camera.position.x, camera.position.y, camera.position.z);
        scene.add(dirLight);

        renderer = new THREE.CanvasRenderer();
        renderer.setClearColor(0xbbbbbb);
        renderer.setPixelRatio(960 / 720);
        renderer.setSize(960, 720);

        stats = new Stats();

        container.appendChild(renderer.domElement);
        container.appendChild(stats.dom);    

    } 

    function animate() {
        requestAnimationFrame(animate);
        stats.begin();
        render();
        stats.end();
    }

    function render() { 

        renderer.render(scene, camera);
    }      


    function draw_neuron() {

        {% for link in links %}

            var n_position = new THREE.Vector3({{ link.0.position.x }}-neuron_center.x,
                    {{ link.0.position.y }}-neuron_center.y, {{ link.0.position.z }}-neuron_center.z);
            var p_position = new THREE.Vector3({{ link.1.position.x }}-neuron_center.x,
                    {{ link.1.position.y }}-neuron_center.y, {{ link.1.position.z }}-neuron_center.z);                      

            var spheregeometry = new THREE.SphereGeometry({{ link.0.radius }}, 10, 10);
            var sphere = new THREE.Mesh(spheregeometry, sphere_material_soma);
            sphere.position.set(n_position.x, n_position.y, n_position.z);
            neuron.add(sphere);

           {%  if link.0.type.id == 5 %}
            sphere = new THREE.Mesh(spheregeometry, sphere_material_soma);
           {% elif link.0.type.id == 6 %}
            sphere = new THREE.Mesh(spheregeometry, sphere_material_bif);
           {% elif link.0.type.id == 7 %}
            sphere = new THREE.Mesh(spheregeometry, sphere_material_tip);
           {% else %}
            sphere = new THREE.Mesh(spheregeometry, sphere_material_normal);
           {% endif %}

            neuron.add(c);

        {% endfor %}

    }

    function draw_cylinder(start, end, radius_start, radius_end, material) {
        var direction = new THREE.Vector3();
        direction.subVectors(end, start);

        var mid_x = start.x + end.x;
        var mid_y = start.y + end.y;
        var mid_z = start.z + end.z;
        var mid_vector = new THREE.Vector3(mid_x, mid_y, mid_z);


        var geometry = new THREE.CylinderGeometry(radius_start, radius_end, direction.length(), 10, 10);
        var mesh = new THREE.Mesh(geometry, material);
        var axis = new THREE.Vector3(0, 1, 0);
        mesh.quaternion.setFromUnitVectors(axis, direction.clone().normalize());
        var temp = mesh.position;

        mesh.position.copy(mid_vector.clone().multiplyScalar(0.5));

        return mesh;
    }

</script>

我还没有包含完整的代码，因为它很大，所以我排除了变量和事件处理程序，因为它们只处理鼠标和一些绘图选项。

非常感谢你。

改善three.js表现

0 个答案: