Здравствуйте.
Решил я начать изучать 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();
