更多有趣示例 尽在 知屋安砖社区
示例
HTML
<div class="wrapper">
<h1>THREEJS - A breast cancer visualization by joni.giuro</h1>
<canvas width="750" height="500" id="source"></canvas>
<div id="container">
</div>
<div class="dida">
<h2 class="subtitle">Out of 100'000 women, how many were diagnosed with breast cancer?</h2>
<ul class="inline-list">
<!--<li class="item"><a class="button" href="#" id="zero">10+</a></li>-->
<li class="item"><a class="button active" href="#" id="one">22-40</a></li>
<li class="item"><a class="button" href="#" id="two">41-57</a></li>
<li class="item"><a class="button" href="#" id="three">58-74</a></li>
<li class="item"><a class="button" href="#" id="four">75-92</a></li>
<li class="item"><a class="button" href="#" id="five">92+</a></li>
</ul>
</div>
<p>
Nothing too fancy. I took the original image from here:
<a href="http://www.worldwidebreastcancer.com/wp-content/uploads/2011/08/breastcancerstatsworldwide.jpg">Breast cancer stats</a>, converted it to grayscale, placed it on a canvas and read pixel information from it. Once I have collected the color informations I need, I then proceed to create a lot of cubes with threejs. After a while the bars get resized. That's the ideal breast cancer graph
</p>
<div class="me">
<ul class="block-list">
<li class="item"><a href="http://zhereicome.com/experiments">Blog</a></li>
<li class="item"><a href="https://twitter.com/JoniGiuro">Twittur</a></li>
</ul>
</div>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Alef);
body {
background: url('https://subtlepatterns.com/patterns/ticks.png') center center repeat;
}
.wrapper {
font-family: Alef, Helvetica, Arial, sans-serif;
text-align: center;
color: #444;
text-shadow: 0 1px white;
}
a {
color: #33b0d6;
}
#source-image {
display: none;
}
#source {
display: none;
}
#container {
position: relative;
width: 750px;
margin: 0 auto;
}
canvas {
margin: 0 auto;
text-align: center;
border: 1px solid black;
background: rgba(255,255,255,.5);
}
.inline-list {
list-style: none;
width: 740px;
margin: 0 auto;
padding: 0;
}
.item {
width: 15%;
display: inline-block;
}
.block-list .item {
display: block;
text-align: center;
width: 100%;
}
.button {
display: block;
padding: 10px;
font-size: 20px;
background: #444;
color: #FFF;
text-shadow: none;
border-radius: 3px;
text-decoration: none;
font-weight: bold;
}
.button:hover {
background: #777;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.button.active {
background-color: #BADA55;
}
JS
var BreastCancer = {
commonStuff : {
tileSize: 15,
heightGain: 1/30,
width: 750,
height: 420,
sourceContext: null,
dataArray: [],
cubesArray: [],
hReached : false,
vReached : true,
mouseDown : false,
fighting : false,
currentShow: 44,
minShow: 22
},
doNotInit: function() {
this.copySourceToCanvas();
},
copySourceToCanvas : function() {
var self = this;
var sourceCanvas = document.getElementById('source');
var ctx = sourceCanvas.getContext('2d');
this.commonStuff.sourceContext = ctx;
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
self.collectData();
};
img.src = 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAUAAD/4QNvaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MkJFRjgwMDg0OTMyNjgxMTk5NENBMEE4RkY5M0UyQ0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjhGMzNFQTNCRUUzMTFFMkI5RjRCRjgzRDE4RjhFMkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjhGMzNFQTJCRUUzMTFFMkI5RjRCRjgzRDE4RjhFMkQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMjgwMTE3NDA3MjA2ODExQjNBQUU0QjMxMTZGREJCMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyQkVGODAwODQ5MzI2ODExOTk0Q0EwQThGRjkzRTJDQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6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';
},
collectData : function() {
var width = this.commonStuff.width;
var height = this.commonStuff.height;
var tileSize = this.commonStuff.tileSize;
var ctx = this.commonStuff.sourceContext;
var dataArray = this.commonStuff.dataArray;
for ( var i = 0 ; i < width ; i += tileSize ) {
for ( var q = 0 ; q < height ; q += tileSize ) {
var pixelInfo = ctx.getImageData(i, q, 1, 1);
dataArray.push({
alpha: 255 - pixelInfo.data[2],
column: i,
row: q
});
}
}
//this.boxesFlat();
this.drawBoxes();
},
//THIS WAS THE SAME THING ON A 2D CANVAS, JUST FOR TESTING PURPOSES
boxesFlat : function() {
var data = this.commonStuff.dataArray;
var arrayLength = data.length;
var tileSize = this.commonStuff.tileSize;
var width = this.commonStuff.width;
var height = this.commonStuff.height;
var row = -1;
var ctx = this.commonStuff.sourceContext;
for ( var i = 0 ; i < arrayLength ; i++ ) {
var item = data[i];
ctx.fillStyle = "rgb("+ (255 - item.alpha) + "," +(255 - item.alpha)+ "," + (255 - item.alpha)+ ")" ;
ctx.fillRect( item.column, item.row, 4, 4 )
}
},
//CREATE ALL THE BOXES
drawBoxes : function( ) {
var data = this.commonStuff.dataArray;
var arrayLength = data.length;
var tileSize = this.commonStuff.tileSize;
var width = this.commonStuff.width;
var height = this.commonStuff.height;
var row = -1;
var self = this;
//THREEJS STUFF
// set the scene size
var WIDTH = 750,
HEIGHT = 500
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
// add the camera to the scene
scene.add(camera);
// the camera starts at 0,0,0
// so pull it back
camera.position.z = 700;
camera.position.y = 0;
//camera.lookAt(0,0,0)
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// create a point light
var ambientLight =
new THREE.AmbientLight(0x404040);
var pointLight = new THREE.DirectionalLight(0xFFFFFF);
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
scene.add(ambientLight);
var whiteMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xFFFFFF
});
var greyMaterial =
new THREE.MeshLambertMaterial(
{
color: 0x444444
});
var cubeTopGeo = new THREE.CubeGeometry(800, 10, 10);
var cubeTop = new THREE.Mesh( cubeTopGeo, greyMaterial);
cubeTop.position.y = 250;
cubeTop.position.z = -20;
var cubeBottomGeo = new THREE.CubeGeometry(800, 10, 10);
var cubeBottom = new THREE.Mesh( cubeTopGeo, greyMaterial);
cubeBottom.position.y = -250;
cubeBottom.position.z = -20;
scene.add(cubeTop)
scene.add(cubeBottom)
//SCENE
var planeGeo = new THREE.PlaneGeometry(800, 500, 1, 1);
var planeMesh = new THREE.Mesh( planeGeo, whiteMaterial);
planeMesh.position.z = -20;
scene.add(planeMesh)
var otherMaterial =
new THREE.MeshLambertMaterial(
{
color: 0x2583db
});
// set up the sphere vars
var radius = 8,
segments = 8,
rings = 8;
var geometry = new THREE.CubeGeometry( tileSize - 4, tileSize - 4, tileSize - 4 );
var sphere = new THREE.SphereGeometry( tileSize - 10, 4, 4 );
//LOOP TO CREATE ALL THE BLOCKS FROM THE DATA ARRAY PREVIOUSLY POPULATED
for ( var i = 0 ; i < arrayLength ; i ++ ) {
var item = data[i];
// create the boxes material
var material =
new THREE.MeshLambertMaterial(
{
//color: 0xEA80B0
color: 0x444444
});
if(item.alpha > 30) {
var mesh = new THREE.Mesh( geometry, material );
} else {
var mesh = new THREE.Mesh( sphere, otherMaterial );
}
//new mesh
//position x
//mesh.position.x = item.column - 350;
mesh.position.x = 0;
//position y
//mesh.position.y = (20 - (item.row - 200));
mesh.position.y = 0;
//if it is not sea
/*if(item.alpha > 30) {
mesh.position.z = ((item.alpha ) * this.commonStuff.heightGain) * 10;
mesh.scale.set(1 ,1 , (item.alpha + .1) * this.commonStuff.heightGain);
}*/
//had to add .1 because inverting a matrix3 thing with 0 was logging an error
this.commonStuff.cubesArray.push({
mesh: mesh,
positionX : item.column - 370,
positionY :(20 - (item.row - 180)),
//animatable: item.alpha < 10,
alpha: 100/255 * item.alpha
})
// add the box to the scene
scene.add(mesh);
}
var m = 0;
var loop = this.commonStuff.cubesArray.length;
var scaleCancer = false;
//Didn't use request animation, don't even know why..
var t = window.setInterval( function() {
m++;
// animation loop!
for ( var i = 0 ; i < loop ; i++ ) {
var current = self.commonStuff.cubesArray[i];
if( m == 30 ) {
self.commonStuff.hReached = true;
self.commonStuff.vReached = false;
}
if( m == 80 ) {
self.commonStuff.vReached = true;
}
if (m == 150) {
scaleCancer = true;
}
if( !self.commonStuff.hReached ) {
current.mesh.position.x = current.mesh.position.x + ( current.positionX - current.mesh.position.x ) / 10;
}
if( !self.commonStuff.vReached ) {
current.mesh.position.y = current.mesh.position.y + ( current.positionY - current.mesh.position.y ) / 10;
}
if ( current.alpha < self.commonStuff.currentShow && current.alpha > self.commonStuff.minShow) {
//console.log('ye')
current.mesh.scale.z = current.mesh.scale.z + ( current.alpha / 10 - current.mesh.scale.z) / 20 ;
current.mesh.material.color.setHex(0xEA80B0);
} else {
if (current.alpha > 12 ) {
current.mesh.scale.z = current.mesh.scale.z + ( 1 - current.mesh.scale.z) / 20;
current.mesh.material.color.setHex(0x444444);
} else {
current.mesh.position.z = Math.sin( (m + current.mesh.position.x) / 20 ) * 8
}
}
}
if (self.commonStuff.mouseDown) {
camera.position.z -= 2;
}
camera.lookAt( scene.position );
renderer.render(scene, camera);
}, 10);
//LISTENERS
var container = document.getElementById('container');
//var zero = document.getElementById('zero');
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
var five = document.getElementById('five');
/*zero.onmousedown = function(e) {
self.commonStuff.minShow = 0;
self.commonStuff.currentShow = 10;
e.preventDefault();
};*/
one.onmousedown = function(e) {
self.commonStuff.minShow = 22;
self.commonStuff.currentShow = 44;
$('.button').removeClass('active');
$(this).addClass('active');
e.preventDefault();
};
two.onmousedown = function(e) {
self.commonStuff.minShow = 44;
self.commonStuff.currentShow = 57;
$('.button').removeClass('active');
$(this).addClass('active');
e.preventDefault();
};
three.onmousedown = function(e) {
self.commonStuff.minShow = 57;
self.commonStuff.currentShow = 74;
$('.button').removeClass('active');
$(this).addClass('active');
e.preventDefault();
};
four.onmousedown = function(e) {
self.commonStuff.minShow = 74;
self.commonStuff.currentShow = 92;
$('.button').removeClass('active');
$(this).addClass('active');
e.preventDefault();
};
five.onmousedown = function(e) {
self.commonStuff.minShow = 92;
self.commonStuff.currentShow = 150;
$('.button').removeClass('active');
$(this).addClass('active');
e.preventDefault();
};
container.onmousedown = function(e) {
//self.commonStuff.mouseDown = true;
self.commonStuff.currentShow = Math.random() * 100;
}
container.onmouseup = function(e) {
//self.commonStuff.mouseDown = false;
}
//Camera movement
container.onmousemove = function(e) {
camera.position.x = (e.offsetX - 350) / 2;
camera.position.y = (e.offsetY - 250) / 2;
}
}
}
//DIDN'T USE INIT because I don't want to init a friggin' cancer :(
BreastCancer.doNotInit();
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
