Не отображаются объекты

0

1

Здравствуйте. Решил я начать изучать three.js. Нашел в интернете не плохую книгу (как мне показалось) «3D-моделирование на WebGL с помощью библиотеки Three.js». В книге есть пример с построением молекулы.

Я этот код написал, но кроме черного экрана у меня нечего не отображается. Ошибок нет (просматриваю в консоле браузера). WebGL работает. Не пойму в чем проблема. Помогите решить. Спасибо.

<!DOCTYPEhtml>
<html>
<head>
<title>Фигуры WebGL</title>
<meta charset="utf-8">
<style>
 body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="libs/three.js"></script>
 
<script type="text/javascript" src="libs/TrackballControls.js"></script>
<script type="text/javascript" src="libs/leap.js"></script>
</head>
<body>
 
<canvas id="canvas"></canvas>
<script type="text/javascript" src="libs/index.js"></script>
</body>
</html>

var canvas = document.getElementById("canvas");
    var renderer = new THREE.WebGLRenderer({canvas: canvas});
        renderer.setSize(window.innerWidth,window.innerHeight);
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000 );
     
    var light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0, 100, 100 );
        scene.add( light );
        renderer.setClearColor( 0x000000 );
     
    var molecule, phi = 0;
        molecule = new THREE.Object3D(); k = 0.4;
                 
    var atoms = [], materials = [], geometries = [];
        atoms['H'] = [0,0x2a52be,0.53];
        atoms['O'] = [1,0xff0000,0.6];
        atoms['C'] = [2,0x00ff12,0.91];
                 
    for (var Name in atoms)
    {
        var material = new THREE.MeshPhongMaterial(
            {color:atoms[Name][1], specular:0x00b2fc, shininess:50,
            blending: THREE.NormalBlending, depthTest:true});
            materials.push(material);
                     
            var geometry = new THREE.SphereGeometry(atoms[Name][2]*k,64,64);
                geometries.push(geometry);
    }
                 
    var info=[];
        info.push(' 1 C -0.231579 -0.350841 -0.037475 1 2 4 5 6');
        info.push(' 2 C 0.229441 0.373160 1.224850 1 1 3 7 8');
        info.push(' 3 O 0.868228 -0.551628 2.114423 6 2 9');
        info.push(' 4 H 0.619613 -0.833754 -0.565710 5 1');
        info.push(' 5 H -0.709445 0.352087 -0.754607 5 1');
        info.push(' 6 H -0.976393 -1.144198 0.191635 5 1');
        info.push(' 7 H -0.628785 0.860022 1.736350 5 2');
        info.push(' 8 H 0.952253 1.174538 0.962081 5 2');
        info.push(' 9 H 0.204846 -1.119563 2.483509 21 3');
                 
    var arr=[];
     
    for (var i=0; i<info.length; i++)
    {
        arr[i] = info[i].match(/\S+/g);
    }
                 
    for (var i=0; i< arr.length; i++)
    {
        var Name = arr[i][1]; // номер элемента
        var Punct = new THREE.Mesh(geometries[ atoms[Name][0] ], materials[ atoms[Name][0] ] );
            Punct.position.set(arr[i][2], arr[i][3], arr[i][4]);
            molecule.add( Punct ); 
    }
                 
    function cylinderMesh( pointX, pointY )
    {
        var direction = new THREE.Vector3().subVectors( pointY, pointX );
        var arrow = new THREE.ArrowHelper(
                        direction.clone().normalize(), pointX, direction.length() );
        var edgeGeometry = new THREE.CylinderGeometry( 0.1, 0.1, direction.length(), 36, 4 );
        var edgeMesh = new THREE.Mesh( edgeGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff } ) );
            edgeMesh.position = new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) );
            edgeMesh.setRotationFromEuler( arrow.rotation );
        return edgeMesh;
        alert('f');
    }
                 
    for(i=0; i<arr.length; i++)
    {
        var num = arr[i][0]-1;
        var x1 = parseFloat(arr[num][2]);
        var y1 = parseFloat(arr[num][3]);
        var z1 = parseFloat(arr[num][4]);
                 
                 
        for(j=6; j<arr[i].length; j++)
        {
            var num = arr[i][j]-1;     
            var x2 = (parseFloat(arr[num][2]) + x1)/2;
            var y2 = (parseFloat(arr[num][3]) + y1)/2;
            var z2 = (parseFloat(arr[num][4]) + z1)/2;     
            var fingerLength = cylinderMesh(new THREE.Vector3(x1,y1,z1), new THREE.Vector3(x2,y2,z2)); 
                fingerLength.material = material[atoms[arr[i][1]][0]];
                molecule.add(fingerLength);
                 
        }
    }
             
    scene.add(molecule);
                 
    function render(){
     
        molecule.rotation.y = molecule.rotation.y + 0.007;
        light.position = camera.position;
        renderer.render(scene, camera);
         
    }
 
    render();

Ссылка

Похожие темы