Skip to content

Instantly share code, notes, and snippets.

@tondol

tondol/chikuwa1.png

Last active August 29, 2015 14:17
Show Gist options
  • Save tondol/21b062b6106c51c938e2 to your computer and use it in GitHub Desktop.
Save tondol/21b062b6106c51c938e2 to your computer and use it in GitHub Desktop.
Download ZIP
#やまぐちくわ姫
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #333333;
overflow: hidden;
}
canvas {
background: #ffffff url('koncheki.png') 50% 50% no-repeat;
background-size: 500px 90px;
}
</style>
<title>#やまぐちくわ姫</title>
</head>
<body>
<script>
var lastTime = (new Date()).getTime();
var containers = [];
var chikuwaTexture1 = THREE.ImageUtils.loadTexture('chikuwa1.png');
var chikuwaTexture2 = THREE.ImageUtils.loadTexture('chikuwa2.png');
function isWebgl() {
try {
return !!window.WebGLRenderingContext &&
!!document.createElement('canvas').getContext('experimental-webgl');
} catch( e ) {
return false;
}
}
function createChikuwa() {
// 頭
var chikuwaHead = new THREE.Mesh(
new THREE.SphereGeometry(50.0, 20, 20),
new THREE.MeshLambertMaterial({
map: chikuwaTexture1
}));
chikuwaHead.rotation.y = Math.PI / 2.0;
chikuwaHead.position.set(-100.0, 10.0, 0.0);
// 尻尾
var chikuwaTail = new THREE.Mesh(
new THREE.SphereGeometry(50.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaTail.position.set(25.0, 0.0, 0.0);
// ボディ外側
var chikuwaOuterBody = new THREE.Mesh(
new THREE.CylinderGeometry(61.0, 61.0, 200.0, 20, 20, true),
new THREE.MeshLambertMaterial({
map: chikuwaTexture2
}));
chikuwaOuterBody.rotation.z = Math.PI / 2.0;
// ボディ内側
var chikuwaInnerBody = new THREE.Mesh(
new THREE.CylinderGeometry(39.0, 39.0, 200.0, 20, 20, true),
(function () {
var mesh = new THREE.MeshLambertMaterial({
color: 0xcc6633
});
mesh.side = THREE.DoubleSide;
return mesh;
})());
chikuwaInnerBody.rotation.z = Math.PI / 2.0;
// 頭側のリング部分
var chikuwaBodyFront = new THREE.Mesh(
new THREE.RingGeometry(39.0, 61.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xcc6633
}));
chikuwaBodyFront.rotation.y = -Math.PI / 2.0;
chikuwaBodyFront.position.set(-100.0, 0, 0);
// 足側のリング部分
var chikuwaBodyBack = new THREE.Mesh(
new THREE.RingGeometry(39.0, 61.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xcc6633
}));
chikuwaBodyBack.rotation.y = Math.PI / 2.0;
chikuwaBodyBack.position.set(100.0, 0, 0);
// 左腕左脚
var chikuwaLeftLeg = new THREE.Mesh(
new THREE.CylinderGeometry(10.0, 10.0, 240.0, 20, 20, true),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaLeftLeg.rotation.z += Math.PI / 2.0;
chikuwaLeftLeg.position.set(-5.0,
50.0 * Math.cos(7.0 * Math.PI / 6.0),
50.0 * Math.sin(7.0 * Math.PI / 6.0));
// 右腕右脚
var chikuwaRightLeg = new THREE.Mesh(
new THREE.CylinderGeometry(10.0, 10.0, 240.0, 20, 20, true),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaRightLeg.rotation.z += Math.PI / 2.0;
chikuwaRightLeg.position.set(-5.0,
50.0 * Math.cos(5.0 * Math.PI / 6.0),
50.0 * Math.sin(5.0 * Math.PI / 6.0));
// 左手
var chikuwaLeftHand = new THREE.Mesh(
new THREE.SphereGeometry(10.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaLeftHand.position.set(-125.0,
50.0 * Math.cos(7.0 * Math.PI / 6.0),
50.0 * Math.sin(7.0 * Math.PI / 6.0));
// 右手
var chikuwaRightHand = new THREE.Mesh(
new THREE.SphereGeometry(10.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaRightHand.position.set(-125.0,
50.0 * Math.cos(5.0 * Math.PI / 6.0),
50.0 * Math.sin(5.0 * Math.PI / 6.0)) ;
// 左足
var chikuwaLeftFoot = new THREE.Mesh(
new THREE.SphereGeometry(10.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaLeftFoot.position.set(115.0,
50.0 * Math.cos(7.0 * Math.PI / 6.0),
50.0 * Math.sin(7.0 * Math.PI / 6.0));
// 右足
var chikuwaRightFoot = new THREE.Mesh(
new THREE.SphereGeometry(10.0, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xfffccc
}));
chikuwaRightFoot.position.set(115.0,
50.0 * Math.cos(5.0 * Math.PI / 6.0),
50.0 * Math.sin(5.0 * Math.PI / 6.0));
var chikuwa = new THREE.Object3D();
chikuwa.add(chikuwaHead);
chikuwa.add(chikuwaTail);
chikuwa.add(chikuwaOuterBody);
chikuwa.add(chikuwaInnerBody);
chikuwa.add(chikuwaBodyFront);
chikuwa.add(chikuwaBodyBack);
chikuwa.add(chikuwaLeftLeg);
chikuwa.add(chikuwaRightLeg);
chikuwa.add(chikuwaLeftHand);
chikuwa.add(chikuwaRightHand);
chikuwa.add(chikuwaLeftFoot);
chikuwa.add(chikuwaRightFoot);
return chikuwa;
}
function addChikuwa() {
var chikuwa = createChikuwa();
scene.add(chikuwa);
var o = {
mesh: chikuwa,
position: [200.0 * (Math.random() - 0.5),
-250.0,
200.0 * (Math.random() - 0.5)],
rotation: [0.5 * (Math.random() - 0.5) * Math.PI * 2.0,
0.5 * (Math.random() - 0.5) * Math.PI * 2.0,
0.5 * (Math.random() - 0.5) * Math.PI * 2.0]
};
resetChikuwa(o);
containers.push(o);
}
function resetChikuwa(o) {
o.position = [200.0 * (Math.random() - 0.5),
-250.0,
200.0 * (Math.random() - 0.5)];
o.rotation = [0.5 * (Math.random() - 0.5) * Math.PI * 2.0,
0.5 * (Math.random() - 0.5) * Math.PI * 2.0,
0.5 * (Math.random() - 0.5) * Math.PI * 2.0];
o.mesh.rotation.set(Math.random() * 2.0 * Math.PI,
Math.random() * 2.0 * Math.PI,
Math.random() * 2.0 * Math.PI);
o.mesh.position.set(200.0 * (Math.random() - 0.5),
Math.random() * 500.0 + 500.0,
200.0 * (Math.random() - 0.5));
}
// this function is executed on each animation frame
function animate() {
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
containers.forEach(function (o, i) {
if (o.mesh.position.y < -500.0) {
resetChikuwa(o);
}
});
containers.forEach(function (o, i) {
var px = o.mesh.position.x;
var py = o.mesh.position.y;
var pz = o.mesh.position.z;
o.mesh.rotation.x += o.rotation[0] * timeDiff / 1000.0;
o.mesh.rotation.y += o.rotation[1] * timeDiff / 1000.0;
o.mesh.rotation.z += o.rotation[2] * timeDiff / 1000.0;
o.mesh.position.x += o.position[0] * timeDiff / 1000.0;
o.mesh.position.y += o.position[1] * timeDiff / 1000.0;
o.mesh.position.z += o.position[2] * timeDiff / 1000.0;
});
lastTime = time;
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function () {
animate();
});
}
// renderer
var renderer;
if (isWebgl()) {
renderer = new THREE.WebGLRenderer({
alpha: true
});
} else {
alert('NOT SUPPORTED!');
throw new Error;
}
renderer.setSize(640, 480);
renderer.setClearColor(0xffffff, 0.5);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45.0, 640 / 480, 1.0, 2000.0);
camera.position.set(0.0, 0.0, 500.0);
//var controls = new THREE.OrbitControls(camera);
//controls.center = new THREE.Vector3(0, 0, 0);
// light
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0.0, 1.0, 0.0);
var ambientLight = new THREE.AmbientLight(0x999999);
// scene
var scene = new THREE.Scene();
scene.add(directionalLight);
scene.add(ambientLight);
for (var i=0;i<10;i++) {
setTimeout(function () {
addChikuwa();
}, Math.random() * 5000.0);
}
animate();
var resizeHandler = function() {
var w = window.innerWidth;
var h = window.innerHeight;
renderer.setSize(w, h);
camera.aspect = w / h;
camera.updateProjectionMatrix();
};
window.addEventListener('resize', resizeHandler, false);
setTimeout(resizeHandler, 100);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment