Не отображаются объекты
Здравствуйте.
Решил я начать изучать 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(); |
Часовой пояс GMT +3, время: 14:41. |