Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ayu-Texture-Test</title>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
</head>
<script type="x-shader/x-vertex" id="vs">
varying vec2 vUv;
uniform int division;
uniform vec3 mod_position;
uniform float time;
vec2 div;
void main()
{
vUv = uv;
vec3 mod = vec3(position.x + (mod_position.x * sin(time * 0.0125)), position.y + (mod_position.y * sin(time * 0.0125)), mod_position.z);
vec4 mvPosition = modelViewMatrix * vec4(mod, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fs">
uniform sampler2D texture;
varying vec2 vUv;
void main()
{
gl_FragColor = texture2D(texture, vUv);
}
</script>
<body>
<div id="canvas">
<script>
$(document).ready(function() {
var width = 1200;
var height = 800;
var division = 64;
var plane_size = 10;
var timeCount = 0;
var meshes = [];
var camera = new THREE.PerspectiveCamera(40, width / height, 0.00001, 10000);
camera.position.z = 2500;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
var texloader = new THREE.TextureLoader();
texloader.load("./images/texture.jpg", function(tex) {
var tex_ = tex;
function makeMesh (index_i, index_j) {
var material = new THREE.ShaderMaterial({
fragmentShader: $('#fs').text(),
vertexShader : $('#vs').text(),
blending: THREE.NormalBlending,
//overdraw: true,
depthTest: false,
transparent: true,
//attributes: {},
uniforms: {
texture: {type: 't', value: tex_},
division: {type: 'i', value: division},
mod_position: {type: 'v3', value: new THREE.Vector3(Math.random() * 1000.0 - 500.0, Math.random() * 1000.0 - 500.0, 0)},
time: {type: 'f', value: timeCount},
}
});
var geometry = new THREE.PlaneGeometry(plane_size, plane_size);
var sect_ = 1.0 / division;
var face_verts = [
new THREE.Vector2(sect_ * index_i, sect_ * index_j + sect_),
new THREE.Vector2(sect_ * index_i, sect_ * index_j),
new THREE.Vector2(sect_ * index_i + sect_, sect_ * index_j),
new THREE.Vector2(sect_ * index_i + sect_, sect_ * index_j + sect_),
];
geometry.faceVertexUvs[0] = [];
geometry.faceVertexUvs[0].push([
face_verts[0],
face_verts[1],
face_verts[3]
]);
geometry.faceVertexUvs[0].push([
face_verts[1],
face_verts[2],
face_verts[3]
]);
geometry.uvsNeedUpdate = true;
var mesh_ = new THREE.Mesh(geometry, material);
return mesh_;
}
for (var i = 0; i < division; i++) {
for (var j = 0; j < division; j++) {
var mesh = makeMesh(i, j);
mesh.position.x = i * plane_size ;
mesh.position.y = j * plane_size ;
mesh.position.z = 0;
scene.add(mesh);
meshes.push(mesh);
}
}
});
renderer.render(scene, camera);
$('#canvas')[0].appendChild(renderer.domElement);
function animate() {
window.requestAnimationFrame(function() {animate();});
for (var i = 0; i < meshes.length; i++) {
meshes[i].material.uniforms.time.value = timeCount;
}
timeCount++;
render();
}
function render() {
renderer.render(scene, camera);
}
animate();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment