Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не отображаются объекты (https://javascript.ru/forum/misc/73671-ne-otobrazhayutsya-obekty.html)

art_maestro 05.05.2018 22:07

Не отображаются объекты
 
Здравствуйте.
Решил я начать изучать 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, время: 16:09.