2016년 4월 5일 화요일

blog_background2

Part of HTML file
Same with first one
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    <script src='http://threejs.org/build/three.min.js'/>
    <script src='http://threejs.org/examples/js/Detector.js'/>
    <script src='http://threejs.org/examples/js/libs/stats.min.js'/>
    <script src='your address/canvas_bg2.js'/>
    <div id='canvas_bg' style='position:fixed; top:0px'/>
 ... 
</body>
canvas_bg2.js


var light;
window.addEventListener("load", function () {
if (window.innerHeight > window.innerWidth * 2) return;
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
document.getElementById('canvas_bg').innerHTML = "";
}
var container;
var camera, scene, renderer;
var mesh, texture, geometry, material;
//var mouse = new THREE.Vector2();
init();
animate();
function init() {
container = document.getElementById('canvas_bg');
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight , 1, 20000);
camera.position.y = 500;
camera.rotation.set(-Math.PI / 2, 0, 0);
scene = new THREE.Scene();
// scene.fog = new THREE.FogExp2(0xf1f1f1, 10000);
var ambient = new THREE.AmbientLight(0x777777);
scene.add(ambient);
light = new THREE.PointLight(0xffffff, 10.5, 600, 1.2);//intensity, distance, decay);
light.add(new THREE.Mesh(new THREE.SphereGeometry(0.25, 16, 8), new THREE.MeshBasicMaterial({ color: 0xffffff })));
light.position.set(0, 500, 0);
scene.add(light);
var dlight = new THREE.DirectionalLight(0xffffff, 4);
dlight.position.set(-2000, 100, -2000).normalize();
scene.add(dlight);
geometry = new THREE.PlaneGeometry(2000, 2000,128,128);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var i, j, il, jl;
for (i = 0, il = geometry.vertices.length; i < il; i++) {
geometry.vertices[i].y = 10 * Math.sin((Math.random() * 10) / 10);
geometry.vertices[i].x += ((Math.random()*10 ) / 10) ;
geometry.vertices[i].z += ((Math.random()*10 ) / 10) ;
}
geometry.computeFaceNormals();
geometry.computeVertexNormals();
material = new THREE.MeshPhongMaterial({ color: 0x242424, wireframe: false });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.innerHTML = "";
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
}, false);
document.onmousemove = mouse;
function mouse(e) {
light.position.set((event.clientX - window.innerWidth / 2), 500, (event.clientY - window.innerHeight / 2));
light.target.position.set((event.clientX - window.innerWidth / 2), 0, (event.clientY - window.innerHeight / 2));
}
Result





reference site :http://msurguy.github.io/triangles/

2016년 3월 15일 화요일

blog_background

Edit HTML template

























Part of HTML file

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    <script src='http://threejs.org/build/three.min.js'/>
    <script src='http://threejs.org/examples/js/Detector.js'/>
    <script src='http://threejs.org/examples/js/libs/stats.min.js'/>
    <script src='your address/canvas_bg.js'/>
    <div id='canvas_bg' style='position:fixed; top:0px'/>
 ... 
</body>
canvas_bg.js
window.addEventListener("load", function () {
var content_h =  window.innerHeight; //document.getElementById('main').clientHeight;
var content_w =  window.innerWidth; //document.getElementById('main').clientWidth;
if (content_h > content_w * 2) return;
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
document.getElementById('canvas_bg').innerHTML = "";
}
var content_h =  window.innerHeight;//document.getElementById('main').clientHeight;
var content_w =  window.innerWidth; //document.getElementById('main').clientWidth;
var container;
var camera, scene, renderer;
var mesh, texture, geometry, material;
var mobject;
var worldWidth = 128, worldDepth = 128,
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById('canvas_bg');
camera = new THREE.PerspectiveCamera(60, content_w / content_h, 1, 20000);
camera.position.y = 200;
//        camera = new THREE.PerspectiveCamera(60, content_w / content_h, 1, 20000);
//        camera.position.y = 200;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xf1f1f1, 0.0007);
var ambient = new THREE.AmbientLight(0x777777);
scene.add(ambient);
//var directionalLight = new THREE.DirectionalLight(0xffeedd);
//directionalLight.position.set(0, 0, 1).normalize();
//scene.add(directionalLight);
geometry = new THREE.PlaneGeometry(20000, 20000, worldWidth - 1, worldDepth - 1);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var i, j, il, jl;
for (i = 0, il = geometry.vertices.length; i < il; i++) {
geometry.vertices[i].y = 35 * Math.sin(i / 2);
}
geometry.computeFaceNormals();
geometry.computeVertexNormals();
material = new THREE.MeshPhongMaterial({ color: 0x242424, wireframe: false });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var geo1 = new THREE.Geometry();
var geo2 = new THREE.Geometry();
var mat1 = new THREE.MeshPhongMaterial({ color: 0x8888ff, wireframe: false });
var mat2 = new THREE.MeshPhongMaterial({ color: 0xffcccc, wireframe: false });
geo1.vertices.push(
new THREE.Vector3(-1, 0, -1),
new THREE.Vector3(1, 0, -1),
new THREE.Vector3(1, 0, 1),
new THREE.Vector3(-1, 0, 1),
new THREE.Vector3(0, 1, 2),
new THREE.Vector3(0, 1, -2),
new THREE.Vector3(1.5, 0.8, 0),
new THREE.Vector3(-1.5, 0.8, 0),
new THREE.Vector3(0, 1.5, 0)
);
geo2.vertices.push(
new THREE.Vector3(-1, 0, -1),
new THREE.Vector3(1, 0, -1),
new THREE.Vector3(1, 0, 1),
new THREE.Vector3(-1, 0, 1),
new THREE.Vector3(0, 1, 2),
new THREE.Vector3(0, 1, -2),
new THREE.Vector3(1.5, 0.8, 0),
new THREE.Vector3(-1.5, 0.8, 0),
new THREE.Vector3(0, 1.5, 0)
);
geo1.faces.push(new THREE.Face3(0, 1, 2));
geo1.faces.push(new THREE.Face3(2, 3, 0));
geo1.faces.push(new THREE.Face3(0, 1, 5));
geo2.faces.push(new THREE.Face3(1, 2, 6));
geo1.faces.push(new THREE.Face3(2, 3, 4));
geo2.faces.push(new THREE.Face3(3, 0, 7));
geo1.faces.push(new THREE.Face3(0, 1, 8));
geo1.faces.push(new THREE.Face3(1, 2, 8));
geo2.faces.push(new THREE.Face3(2, 3, 8));
geo2.faces.push(new THREE.Face3(3, 0, 8));
geo1.faces.push(new THREE.Face3(5, 0, 7));
geo1.faces.push(new THREE.Face3(7, 3, 4));
geo2.faces.push(new THREE.Face3(4, 2, 6));
geo2.faces.push(new THREE.Face3(6, 1, 5));
geo2.faces.push(new THREE.Face3(2, 1, 0));
geo2.faces.push(new THREE.Face3(0, 3, 2));
geo2.faces.push(new THREE.Face3(5, 1, 0));
geo1.faces.push(new THREE.Face3(6, 2, 1));
geo2.faces.push(new THREE.Face3(4, 3, 2));
geo1.faces.push(new THREE.Face3(7, 0, 3));
geo2.faces.push(new THREE.Face3(8, 1, 0));
geo2.faces.push(new THREE.Face3(8, 2, 1));
geo1.faces.push(new THREE.Face3(8, 3, 2));
geo1.faces.push(new THREE.Face3(8, 0, 3));
geo1.faces.push(new THREE.Face3(7, 0, 5));
geo2.faces.push(new THREE.Face3(4, 3, 7));
geo2.faces.push(new THREE.Face3(6, 2, 4));
geo2.faces.push(new THREE.Face3(5, 1, 6));
var mesh2 = new THREE.Mesh(geo1, mat1);
var mesh3 = new THREE.Mesh(geo2, mat2);
mesh2.scale.set(50, 50, 50);
mesh2.position.z = 2000;
mesh2.rotation.y = 1.8;
mesh2.rotation.z = -0.3;
scene.add(mesh2);
mesh3.scale.set(50, 50, 50);
mesh3.position.z = 2000;
mesh3.rotation.y = 1.8;
mesh3.rotation.z = -0.3;
scene.add(mesh3);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xf1f1f1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.innerHTML = "";
container.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
onWindowResize();
}
function onWindowResize() {
content_h =  window.innerHeight; //document.getElementById('main').clientHeight;
content_w =  window.innerWidth; //document.getElementById('main').clientWidth;
camera.aspect = content_w / content_h;
camera.updateProjectionMatrix();
renderer.setSize(content_w, content_h);
}
//
function animate() {
requestAnimationFrame(animate);
render();
//stats.update();
}
function render() {
var delta = clock.getDelta(),
time = clock.getElapsedTime() * 10;
for (var i = 0, l = geometry.vertices.length/2; i < l; i++) {
geometry.vertices[i*2].y = 35 * Math.sin(i / 5 + (time + i) / 7);
geometry.vertices[i*2+1].y = 30+ 35 * Math.sin(i / 5 + (time + i) / 7);
scene.children[2].position.y = 20 + 10 * Math.sin(2 * (i / 5 + (time + i) / 7));
scene.children[3].position.y = 20 + 10 * Math.sin(2 * (i / 5 + (time + i) / 7));
}
//geometry.computeFaceNormals();
//geometry.computeVertexNormals();
mesh.geometry.verticesNeedUpdate = true;
//console.log(camera.rotation);
//camera.rotation.set(-2.3572245528413607, -0.77, -2.531009097012386);
camera.rotation.set(-2.7257915748671224, -0.5974885305904678, -2.8981210061165696);
//mesh.geometry.normalsNeedUpdate = true;
//controls.update( delta );
renderer.render(scene, camera);
}
}, false);
Result





reference site :www.pshkvsky.com