文章目錄
  1. 1. 使用Processing.js创建3D图形
    1. 1.1. 预览图
    2. 1.2. html代码(格式难看就不要吐槽了)

使用Processing.js创建3D图形

之前一直以为processingjs是放在Canvas上的就认为没有办法取得3D绘图环境。当然只是我以为。事实证明只是我不太了解processingjs这个包的强大了。当然互动的话现在暂时只有鼠标位置的互动,其他的功能我暂时没有得到很好的实现。具体做法是根据processingjs的语法,把以前玩的一个鼠标互动3dbox的Pocessing文件进行了简单的翻译,改的地方很多,而且真的要实现的话对那个包要非常的熟悉。一个好的创意的实现,是99%的思考加上1%的代码这就是你偷懒的理由?。效果大概目前这个样子

预览图


原图链接:
http://pan.baidu.com/s/1i3xOC8t

html代码(格式难看就不要吐槽了)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function sketchProc(processing) {
var color1 = 0;
var abox = 125;
var bbox = 75;
var cbox = 30.0;
var value = "Created by Xana";
var dbox = 60;
processing.setup = function () {
processing.size(400, 400, processing.P3D);
processing.noFill();
processing.smooth();
}
processing.draw = function() {
if (processing.mousePressed == true) { processing.background(0); }
else{ processing.background(222); };
processing.translate(processing.width/2, processing.height/2, -(processing.width/2)); //在中心绘图
processing.rotateY(processing.map(processing.mouseX, 0, processing.width, -Math.PI, Math.PI)); //水平旋转
processing.stroke(100);
processing.box(2*abox);
processing.textSize(25);
processing.text(value, abox, abox);
for(var i = -1;i<2;i+=2)
for(var j = -1;j<2;j+=2)
for(var k = -1; k<2; k+=2){
processing.translate(abox*i, abox*j, abox*k);
processing.box(abox/5);
processing.translate(-abox*i, -abox*j, -abox*k);
}
processing.rotateX(processing.map(processing.mouseY, 0, processing.height, -Math.PI, Math.PI)); //竖直旋转
processing.stroke(150);
processing.box(2*bbox); //绘制立方体
for(var i = -1;i<2;i+=2)
for(var j = -1;j<2;j+=2)
for(var k = -1; k<2; k+=2){
processing.translate(bbox*i, bbox*j, bbox*k);
processing.box(bbox/4);
processing.translate(-bbox*i, -bbox*j, -bbox*k);
}
processing.rotateZ(processing.map(-processing.mouseX, 0, processing.width, -Math.PI, Math.PI));
processing.strokeWeight(5);
processing.fill(0);
processing.box(dbox);
processing.noFill();
processing.strokeWeight(1);
}
/*鼠标滚轮似乎出了点问题
processing.mouseWheel = function(MouseEvent event) {
var e = event.getAmount();
println(e);
value += e;
println(value);
}
*/
}
var canvas = document.getElementById("canvas1");
var p = new Processing(canvas, sketchProc);
文章目錄
  1. 1. 使用Processing.js创建3D图形
    1. 1.1. 预览图
    2. 1.2. html代码(格式难看就不要吐槽了)