Description
The library for generating a WebGL scene for the web.
Description
The library for generating a WebGL scene for the web for the Haskell programming language.
README.md
Hydrogen
Introduction
Library for generating a WebGL scene by using ThreeJS on the web for the Haskell programming language.
Short description
The Hydrogen uses the HFitUI library as the result of generating a WebGL scene. The WebGL scene is generated from a YAML file. This approach greatly simplifies the process of generating a WebGL scene in a Haskell with HFitUI library. Below is an example generation scene from YAML file code:
/*Generate by HScript from the HFitUI library*/
//Автоматически сгенерированный скрипт
//Приложение Hydrogen (0.0.1)
if(!Detector.webgl) Detector.addGetWebGLMessage();
var camera;
var scene;
var groupRoot;
var root = document.getElementById("idRoot");
var canvas3D = document.getElementById("idCanvas");
var renderer;
var stats;
var orbitControls = null;
var flyControls = null;
function render (){
renderer.render(scene, camera);
}
function update (){
if(stats) stats.update();
if(flyControls) flyControls.update(1);
}
function animate (){
requestAnimationFrame(animate);
render();
update();
}
function onWindowResize (){
if (camera) {
camera.aspect = window.innerWidth / (window.innerHeight);
camera.updateProjectionMatrix();
}
renderer.setSize( window.innerWidth, window.innerHeight);
render();
}
function drawRootAxes (){
var dirX = new THREE.Vector3( 1, 0, 0 ); dirX.normalize();
var dirY = new THREE.Vector3( 0, 1, 0 ); dirY.normalize();
var dirZ = new THREE.Vector3( 0, 0, 1 ); dirZ.normalize();
var origin = new THREE.Vector3( 0, 0, 0 );
var length = 1;
var hexX = 0xff0000;
var hexY = 0x00ff00;
var hexZ = 0x0000ff;
scene.add(new THREE.ArrowHelper(dirX, origin, length, hexX));
scene.add(new THREE.ArrowHelper(dirY, origin, length, hexY));
scene.add(new THREE.ArrowHelper(dirZ, origin, length, hexZ));
}
function init (){
scene = new THREE.Scene();
groupRoot = new THREE.Group();
groupRoot.position.set( 0.0 , 0.0 , 0.0 );
groupRoot.rotation.set( 0.0 , 0.0 , 0.0 );
groupRoot.scale.set( 1.0 , 1.0 , 1.0 );
scene.add(groupRoot);
var grid = new THREE.GridHelper( 25, 50, 0x586e75, 0x073642 );
grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
groupRoot.add(grid);
drawRootAxes();
renderer = new THREE.WebGLRenderer({canvas: canvas3D, antialias: false});
renderer.setClearColor( 0x002b36 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
var material4466976ede5111e6a5d3f3eee64202b6 = new THREE.MeshLambertMaterial( { color: 0x6e6e6e, emissive: 0x6e6e6e, emissiveIntensity: 0.5, opacity: 1.0, transparent: false } );
(function(material){ })( material4466976ede5111e6a5d3f3eee64202b6 );
var materiale6f1bd16e2fb11e687c71772a2fe4228 = new THREE.MeshLambertMaterial( { color: 0xa41a, emissive: 0x6e06e, emissiveIntensity: 0.0, opacity: 1.0, transparent: false } );
(function(material){ })( materiale6f1bd16e2fb11e687c71772a2fe4228 );
var material4e181b50e3bc11e6924d8bbeaf59f608 = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load("/texture_3d/3165d44e-e398-11e6-aac6-e7c59ca562a2") , opacity: 1.0, transparent: false } );
(function(material){ })( material4e181b50e3bc11e6924d8bbeaf59f608 );
var material7badc81ae6b611e69cc12b72c18ca176 = new THREE.MeshFaceMaterial([ new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=0"), side: THREE.BackSide } )
, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=1"), side: THREE.BackSide } )
, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=2"), side: THREE.BackSide } )
, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=3"), side: THREE.BackSide } )
, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=4"), side: THREE.BackSide } )
, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=5"), side: THREE.BackSide } )
]);
(function(material){ })( material7badc81ae6b611e69cc12b72c18ca176 );
camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 1.0, 1000.0 );
camera.up.set( 0.0, 0.0, 1.0);
camera.position.set( 0.0 , -10.0 , 10.0 );
scene.add(camera);
var lighte436c6c8f1d511e6837cafadb174b93a = new THREE.PointLight( 0xFFFFFF , 0.8 , 0.0 , 1.0);
lighte436c6c8f1d511e6837cafadb174b93a.position.set( 0.0 , 0.0 , 0.0 );
(function(light){ })( lighte436c6c8f1d511e6837cafadb174b93a );
camera.add(lighte436c6c8f1d511e6837cafadb174b93a);
var light9ab6f73cf1d211e6ad6c23968912c3bd = new THREE.AmbientLight( 0x999999 , 1.0 );
(function(light){ })( light9ab6f73cf1d211e6ad6c23968912c3bd );
scene.add(light9ab6f73cf1d211e6ad6c23968912c3bd);
var figure5d2f5584e6b611e6b1e007ba4b916aa0 = new THREE.Mesh( new THREE.BoxGeometry( 500.0 , 500.0 , 500.0 ) , material7badc81ae6b611e69cc12b72c18ca176 );
figure5d2f5584e6b611e6b1e007ba4b916aa0.position.set( 0.0 , 0.0 , 0.0 );
figure5d2f5584e6b611e6b1e007ba4b916aa0.rotation.set( 1.570796 , 0.0 , 0.0 );
figure5d2f5584e6b611e6b1e007ba4b916aa0.scale.set( 1.0 , 1.0 , 1.0 );
(function(figure, material){ })( figure5d2f5584e6b611e6b1e007ba4b916aa0 , material7badc81ae6b611e69cc12b72c18ca176 );
scene.add(figure5d2f5584e6b611e6b1e007ba4b916aa0);
var group20c55aece15e11e69b09a74605bb9055 = new THREE.Group();
group20c55aece15e11e69b09a74605bb9055.position.set( 0.0 , 0.0 , 0.0 );
group20c55aece15e11e69b09a74605bb9055.rotation.set( 0.0 , 0.0 , 0.0 );
group20c55aece15e11e69b09a74605bb9055.scale.set( 1.0 , 1.0 , 1.0 );
(function(figure){ })( group20c55aece15e11e69b09a74605bb9055 );
groupRoot.add(group20c55aece15e11e69b09a74605bb9055);
var params1743e5eaf2a911e69ed17714401e4924 = ["Test","1.0"];
var figure1743e5eaf2a911e69ed17714401e4924 = (function(material, params){ var geometry = new THREE.SphereGeometry( 1, 32, 32 );
var sphere = new THREE.Mesh( geometry, material );
return sphere;
})( material4466976ede5111e6a5d3f3eee64202b6, params1743e5eaf2a911e69ed17714401e4924 );
figure1743e5eaf2a911e69ed17714401e4924.position.set( 0.0 , 4.0 , 0.0 );
figure1743e5eaf2a911e69ed17714401e4924.rotation.set( 0.0 , 0.0 , 0.0 );
figure1743e5eaf2a911e69ed17714401e4924.scale.set( 1.0 , 1.0 , 1.0 );
(function(figure, material){ })( figure1743e5eaf2a911e69ed17714401e4924 , material4466976ede5111e6a5d3f3eee64202b6 );
group20c55aece15e11e69b09a74605bb9055.add(figure1743e5eaf2a911e69ed17714401e4924);
var entityCamera45d7b56aedf111e6be1d539a6d03a9c1 = (function(){
var video = document.createElement( 'video' );
video.id = 'VID_45d7b56a-edf1-11e6-be1d-539a6d03a9c1';
video.src = "/video/sintel.ogv";
video.loop = true;
video.muted = true;
video.load();
video.play();
var videoTexture = new THREE.VideoTexture( video );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.FrontSide } );
movieMaterial.side = THREE.BackSide;
var entityGroup = new THREE.Group();
entityGroup.position.set( 0.0 , 0.0 , 0.0 );
entityGroup.rotation.set( 0.0 , 1.57 , 0.0 );
entityGroup.scale.set( 1.0 , 1.0 , 1.0 );
var meshCamera = new THREE.Mesh( new THREE.ConeGeometry(1*0.5, 1, 4), new THREE.MeshBasicMaterial({color: 0xFF0000, wireframe: true}) );
meshCamera.rotation.x = -Math.PI/2;
meshCamera.scale.x = meshCamera.scale.y = meshCamera.scale.z = 0.35;
entityGroup.add(meshCamera);
var area_0 = [ new THREE.Vector2( 0.0 , 1.0 )
, new THREE.Vector2( 0.5 , 1.0 )
, new THREE.Vector2( 0.5 , 0.0 )
, new THREE.Vector2( 0.0 , 0.0 )
];
var movieGeometry_0 = new THREE.PlaneGeometry(2.5, 2.5);
movieGeometry_0.faceVertexUvs[0][0] = [ area_0[0], area_0[3], area_0[1] ];
movieGeometry_0.faceVertexUvs[0][1] = [ area_0[3], area_0[2], area_0[1] ];
var movieScreen_0 = new THREE.Mesh( movieGeometry_0, movieMaterial );
movieScreen_0.geometry.vertices[0].x = movieScreen_0.geometry.vertices[0].x + 0.0
movieScreen_0.geometry.vertices[0].y = movieScreen_0.geometry.vertices[0].y + 0.0
movieScreen_0.geometry.vertices[0].z = movieScreen_0.geometry.vertices[0].z + 0.0
movieScreen_0.geometry.vertices[1].x = movieScreen_0.geometry.vertices[1].x + 0.0
movieScreen_0.geometry.vertices[1].y = movieScreen_0.geometry.vertices[1].y + 0.0
movieScreen_0.geometry.vertices[1].z = movieScreen_0.geometry.vertices[1].z + 0.0
movieScreen_0.geometry.vertices[2].x = movieScreen_0.geometry.vertices[2].x + 0.0
movieScreen_0.geometry.vertices[2].y = movieScreen_0.geometry.vertices[2].y + 0.0
movieScreen_0.geometry.vertices[2].z = movieScreen_0.geometry.vertices[2].z + 0.0
movieScreen_0.geometry.vertices[3].x = movieScreen_0.geometry.vertices[3].x + 0.0
movieScreen_0.geometry.vertices[3].y = movieScreen_0.geometry.vertices[3].y + 0.0
movieScreen_0.geometry.vertices[3].z = movieScreen_0.geometry.vertices[3].z + 0.0
movieScreen_0.position.set( 0.0 , 0.0 , 3.0 );
movieScreen_0.rotation.set( 0.0 , 0.0 , 1.57 );
movieScreen_0.scale.set( 1.0 , 1.0 , 1.0 );
entityGroup.add(movieScreen_0);
var area_1 = [ new THREE.Vector2( 0.5 , 1.0 )
, new THREE.Vector2( 1.0 , 1.0 )
, new THREE.Vector2( 1.0 , 0.0 )
, new THREE.Vector2( 0.5 , 0.0 )
];
var movieGeometry_1 = new THREE.PlaneGeometry(2.5, 2.5);
movieGeometry_1.faceVertexUvs[0][0] = [ area_1[0], area_1[3], area_1[1] ];
movieGeometry_1.faceVertexUvs[0][1] = [ area_1[3], area_1[2], area_1[1] ];
var movieScreen_1 = new THREE.Mesh( movieGeometry_1, movieMaterial );
movieScreen_1.geometry.vertices[0].x = movieScreen_1.geometry.vertices[0].x + 0.0
movieScreen_1.geometry.vertices[0].y = movieScreen_1.geometry.vertices[0].y + 0.0
movieScreen_1.geometry.vertices[0].z = movieScreen_1.geometry.vertices[0].z + 0.0
movieScreen_1.geometry.vertices[1].x = movieScreen_1.geometry.vertices[1].x + 0.0
movieScreen_1.geometry.vertices[1].y = movieScreen_1.geometry.vertices[1].y + 0.0
movieScreen_1.geometry.vertices[1].z = movieScreen_1.geometry.vertices[1].z + 0.0
movieScreen_1.geometry.vertices[2].x = movieScreen_1.geometry.vertices[2].x + 0.0
movieScreen_1.geometry.vertices[2].y = movieScreen_1.geometry.vertices[2].y + 0.0
movieScreen_1.geometry.vertices[2].z = movieScreen_1.geometry.vertices[2].z + 0.0
movieScreen_1.geometry.vertices[3].x = movieScreen_1.geometry.vertices[3].x + 0.0
movieScreen_1.geometry.vertices[3].y = movieScreen_1.geometry.vertices[3].y + 0.0
movieScreen_1.geometry.vertices[3].z = movieScreen_1.geometry.vertices[3].z + 0.0
movieScreen_1.position.set( 0.0 , 3.0 , 4.0 );
movieScreen_1.rotation.set( 0.0 , 0.0 , 1.57 );
movieScreen_1.scale.set( 1.0 , 1.0 , 1.0 );
entityGroup.add(movieScreen_1);
group20c55aece15e11e69b09a74605bb9055.add(entityGroup);
return entityGroup;
})();
var groupc34cbde4e7b911e6a0a36bff2604ce8f = new THREE.Group();
groupc34cbde4e7b911e6a0a36bff2604ce8f.position.set( 0.0 , 0.0 , 0.0 );
groupc34cbde4e7b911e6a0a36bff2604ce8f.rotation.set( 0.0 , 0.0 , 0.0 );
groupc34cbde4e7b911e6a0a36bff2604ce8f.scale.set( 1.0 , 1.0 , 1.0 );
(function(figure){ })( groupc34cbde4e7b911e6a0a36bff2604ce8f );
groupRoot.add(groupc34cbde4e7b911e6a0a36bff2604ce8f);
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.addEventListener('change', render);
orbitControls.target.set(0, 0, 0);
orbitControls.update();
(function(){ if(orbitControls){
orbitControls.minDistance = 3;
orbitControls.maxDistance = 20;
orbitControls.minPolarAngle = 0;
orbitControls.maxPolarAngle = 1.50098;
}
})();
window.addEventListener( 'resize',onWindowResize,false );
animate();
}
init();