螺旋线建模
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
螺旋线建模
螺旋线建模是利用三角函数生成螺旋曲线，曲线上相邻四点（或三点）围城多边形的一种建模方式。
1、圆球
2、圆环
3、用Flash做的效果
var px:Array=[],py:Array=[],pz:Array=[],pp:Array=[];
var co:Number,angelx:Number=0,angely:Number=0,n:int=0,r:Number=1,k1:Number=0,k2:Number=0;
var tmx:Number,tmz:Number,m:Number;
var t:int=0,i:int,h:int=120,f:Number=700,p:Number=Math.PI/240;
var sp:Sprite=new Sprite();
addChild(sp);
sp.x=275,sp.y=200;
sp.filters=[new DropShadowFilter(50,120,0x555555,0.5,10,10,1,1)]
for (i=0; i<480; i++) {
pp[i]=new MovieClip();
sp.addChild(pp[i]);
}
addEventListener(Event.ENTER_FRAME,fff);
function fff(e:Event) {
r+0.02<1?r=r+0.02:r=1;
m=(29+k1)*(1-r)+(29+k2)*r;
for (i=0; i<496; i++) {
tmx=(50*Math.abs(Math.cos(i*m*p))*Math.cos(i*32*p)+h)*Math.cos(i*p);
tmz=50*Math.abs(Math.cos(i*m*p))*Math.sin(i*32*p);
px[i]=tmx*Math.cos(2*t*p)+tmz*Math.sin(2*t*p);
py[i]=(50*Math.abs(Math.cos(i*m*p))*Math.cos(i*32*p)+h)*Math.sin(i*p);
pz[i]=tmz*Math.cos(2*t*p)-tmx*Math.sin(2*t*p);
}
for (i=0; i<480; i++) {
pp[i].graphics.clear();
pp[i].graphics.lineStyle(1,0x999999);
pp[i].graphics.beginFill(255<<16|200*(i%2)<<8|128);
pp[i].graphics.moveTo(px[i]*f/(f+pz[i]),py[i]*f/(f+pz[i]));
pp[i].graphics.lineTo(px[i+1]*f/(f+pz[i+1]),py[i+1]*f/(f+pz[i+1]));
pp[i].graphics.lineTo(px[i+16]*f/(f+pz[i+16]),py[i+16]*f/(f+pz[i+16]));
pp[i].graphics.lineTo(px[i+15]*f/(f+pz[i+15]),py[i+15]*f/(f+pz[i+15]));
pp[i].dt=pz[i]+pz[i+1]+pz[i+15]+pz[i+16];
}
pp.sortOn("dt",Array.NUMERIC);
for (i=0; i<480; i++) {
sp.setChildIndex(pp[i],479-i);
}
t=(t+1)%480;
}
var bt0=Txt(215);
bt0.text=" 现在的扭曲数是"+(6-n)+"，单击增加扭曲。
";
var but0=Butt(210);
but0.addEventListener(MouseEvent.MOUSE_DOWN,clik0);
but0.addEventListener(MouseEvent.MOUSE_UP,up0);
but0.addEventListener(MouseEvent.MOUSE_OUT,up0);
var bt1=Txt(315);
bt1.text=" 现在的扭曲数是"+(6-n)+"，单击降低扭曲。
";
var but1=Butt(310);
but1.addEventListener(MouseEvent.MOUSE_DOWN,clik1);
but1.addEventListener(MouseEvent.MOUSE_UP,up1);
but1.addEventListener(MouseEvent.MOUSE_OUT,up1);
function clik0(e:MouseEvent) {
k1=n/2;
n-1<0?n=6:n=n-1;
k2=n/2,r=0;
bt0.text=" 现在的扭曲数是"+(6-n)+"，单击增加扭曲。
";
bt1.text=" 现在的扭曲数是"+(6-n)+"，单击降低扭曲。
";
but0.filters=[new DropShadowFilter(2,120,0x555555,1,5,5,1,1)]; }
function up0(e:MouseEvent) {
but0.filters=[new DropShadowFilter(6,120,0x555555,1,5,5,1,1)]; }
function clik1(e:MouseEvent) {
k1=n/2;
n=(n+1)%7;
k2=n/2,r=0;
bt0.text=" 现在的扭曲数是"+(6-n)+"，单击增加扭曲。
";
bt1.text=" 现在的扭曲数是"+(6-n)+"，单击降低扭曲。
";
but1.filters=[new DropShadowFilter(2,120,0x555555,1,5,5,1,1)]; }
function up1(e:MouseEvent) {
but1.filters=[new DropShadowFilter(6,120,0x555555,1,5,5,1,1)]; }
function Txt(h:int):TextField {
var btx:TextField=addChild(new TextField()) as TextField;
btx.defaultTextFormat=new TextFormat("黑体",14,0);
btx.selectable=false;
btx.x=452,btx.y=h,btx.width=90;
btx.wordWrap=true;
btx.multiline=true;
return btx;
}
function Butt(h:int):Sprite {
var but:Sprite=addChild(new Sprite()) as Sprite;
but.graphics.lineStyle(2,0);
but.graphics.beginFill(0x00ffff,0.2);
but.graphics.drawRect(450,h,95,60);
but.graphics.endFill();
but.buttonMode=true;
but.filters=[new DropShadowFilter(6,120,0x555555,1,5,5,1,1)];
return but;
}
4、用html5-canvas做的效果
<html>
<head>
<title>三维环形节可推动</title>
</head>
<body>
<div style="width:600;height:500;background:#222;">
<canvas id="canvas" width="600" height="500"></canvas> </div>
<select id="op" onchange="fff()">
<option value="4">样式1</option>
<option value="5">样式2</option>
<option value="6">样式3</option>
<option value="7">样式4</option>
</select>
</body>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var kl=document.getElementById("op");
var ty,tz;
var x1=[],y1=[],z1=[];
var t=0;
var f=700;
var angleX=1.2;
var i,j,t1,t2,t3,t4,m;
var s=4;
var p=Math.PI/180;
var P=2*Math.PI/s;
var n=0;
var a2=0.5
var ob=[];
var h=1+1/2;
t1=2,t2=4,t3=4,t4=8;
function fff(){
m=kl.options[kl.selectedIndex].value;
switch(m){
case "4":
t1=2,t2=4,t3=4,t4=8;
break;
case "5":
t1=2,t2=1,t3=8,t4=4;
break;
case "6":
t1=2,t2=2,t3=6,t4=6;
break;
case "7":
t1=2,t2=2,t3=2,t4=2;
break;
}
}
var obj=function(k){
this.k=k;
this.x1=0;
this.y1=0;
this.z1=0;
this.x2=0;
this.y2=0;
this.z2=0;
this.x3=0;
this.y3=0;
this.z3=0;
this.x4=0;
this.y4=0;
this.z4=0;
this.zz=10000;
this.getColor=function(){
var red=127*(Math.sin(this.k*p/5)+1);
var green=127*(Math.sin((this.k+600)*p/5)+1);
var blue =127*(Math.sin((this.k+1200)*p/5)+1);
var lightFactor= this.getLightFactor();
red *= lightFactor;
green *= lightFactor;
blue *= lightFactor;
return "rgba("+parseInt(red)+","+parseInt(green)+","+parseInt(blue)+",1)";
}
this.getLightFactor=function(){
var ab= new Object();
ab.x = this.x1 - this.x2;
ab.y = this.y1 - this.y2;
ab.z = this.z1 - this.z2;
var bc= new Object();
bc.x = this.x2 - this.x3;
bc.y = this.y2 - this.y3;
bc.z = this.z2 - this.z3;
var norm= new Object();
norm.x = (ab.y * bc.z) - (ab.z * bc.y);
norm.y = -((ab.x * bc.z) - (ab.z * bc.x));
norm.z = (ab.x * bc.y) - (ab.y * bc.x);
var dotProd=norm.x*light.x+norm.y*light.y+norm.z*light.z;
var normMag=Math.sqrt(norm.x*norm.x+norm.y*norm.y+norm.z*norm.z);
var lightMag=Math.sqrt(light.x*light.x+light.y*light.y+light.z*light.z);
return (Math.acos(dotProd/(normMag*lightMag))/Math.PI)*light.brightness;
}
}
for(i=0;i<1800;i++){
ob[i]=new obj(i);
}
function depth(a,b){
return a.zz-b.zz;
}
function init(){
t++;
cxt.clearRect(0,0,600,500);
for(i=0;i<1800+s+1;i++) {
x1[i]=40*Math.cos((t+i)*p)*(4+Math.cos(i*(t1+t2/5)*p)+0.2*Math.cos(i*P));
ty=40*Math.sin((t+i)*p)*(4+Math.cos(i*(t1+t2/5)*p)+0.2*Math.cos(i*P));
tz=18*Math.sin((t3+t4/5)*i*p)+10*Math.sin(i*P);
y1[i]=ty*Math.cos(angleX)+tz*Math.sin(angleX);
z1[i]=tz*Math.cos(angleX)-ty*Math.sin(angleX);
}
for(i=0;i<1800;i++){
ob[i].x1=x1[i];
ob[i].y1=y1[i];
ob[i].z1=z1[i];
ob[i].x2=x1[i+1];
ob[i].y2=y1[i+1];
ob[i].z2=z1[i+1];
ob[i].x3=x1[i+s+1];
ob[i].y3=y1[i+s+1];
ob[i].z3=z1[i+s+1];
ob[i].cx1=x1[i]*f/(f+z1[i]);
ob[i].cy1=y1[i]*f/(f+z1[i]);
ob[i].cx2=x1[i+1]*f/(f+z1[i+1]);
ob[i].cy2=y1[i+1]*f/(f+z1[i+1]);
ob[i].cx3=x1[i+s+1]*f/(f+z1[i+s+1]);
ob[i].cy3=y1[i+s+1]*f/(f+z1[i+s+1]);
ob[i].cx4=x1[i+s]*f/(f+z1[i+s]);
ob[i].cy4=y1[i+s]*f/(f+z1[i+s]);
ob[i].zz=z1[i]+z1[i+1]+z1[i+s+1]+z1[i+s];
ob[i].k=i;
}
ob.sort(depth);
for(j=1799;j>=0;j--){
drawP(ob[j])
}
setTimeout(init,30);
}
function drawP(o){
if((o.cy3-o.cy1)*(o.cx2-o.cx1)>(o.cx3-o.cx1)*(o.cy2-o.cy1)){ var col=o.getColor();
cxt.save();
cxt.fillStyle=col;
cxt.strokeStyle=col;
cxt.beginPath();
cxt.moveTo(300+o.cx1,250+o.cy1);
cxt.lineTo(300+o.cx2,250+o.cy2);
cxt.lineTo(300+o.cx3,250+o.cy3);
cxt.lineTo(300+o.cx4,250+o.cy4);
cxt.closePath();
cxt.fill();
cxt.stroke();
cxt.restore();
}
}
var light=new Light(300,-50,-800,0.9);
function Light(x,y,z,bright){
this.x=x;
this.y=y;
this.z=z;
this.brightness=bright;
}
var ddy=0;
var bbb=false;
document.onmousedown=function(evt) {
evt=evt || window.event;
bbb=true;
ddy=evt.clientY;
}
document.onmouseup=function(){bbb=false;}
document.onmousemove=function(evt){
evt=evt || window.event;
if(bbb){
angleX+=(ddy-evt.clientY)/100;
ddy=evt.clientY;
}
}
init();
</script>
</html>
5、用html-OpenGL做的效果
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"> <script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
attribute vec3 av3Color;
varying vec3 vv3Color;
void main(void)
{
vv3Color = av3Color;
gl_Position = vec4(v3Position, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
varying vec3 vv3Color;
void main(void)
{
gl_FragColor = vec4(vv3Color, 1.0);
}
</script>
<script>
function ShaderSourceFromScript(scriptID)
{
var shaderScript = document.getElementById(scriptID);
if (shaderScript == null) return "";
var sourceCode = "";
var child = shaderScript.firstChild;
while (child)
{
if (child.nodeType == child.TEXT_NODE ) sourceCode += child.textContent;
child = child.nextSibling;
}
return sourceCode;
}
var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var triangleBuffer = null;
var v3PositionIndex = 0;
var triangleColorBuffer = null;
var v3ColorIndex = 1;
var p=Math.PI/225;
var P=Math.PI/4.5;
var i,j,k;
var px=[];
var py=[];
var pz=[];
for(i=0;i<1802;i++) {
px[i]=[];
py[i]=[];
pz[i]=[];
}
var t1=0;
var t2=1.8;
var ddy,ddx,objY;
var bool=false;
var bb=false;
var mouseY,mouseX;
var cos,cos1,cos2,sin;
var f=3.0;
p=Math.PI/90;
var jsArrayColor = [];
var jsArrayData = [];
for(i=0;i<1802;i++){
cxx=(3+Math.cos(i*P))
var red=0.125*(1+Math.sin(i*p))*cxx;
jsArrayColor.push(red);
var green=0.125*(1+Math.sin((i+60)*p))*cxx;
jsArrayColor.push(green);
var blue=0.125*(1+Math.sin((i+120)*p))*cxx;
jsArrayColor.push(blue);
var red=0.125*(1+Math.sin((i+9)*p))*cxx;
jsArrayColor.push(red);
var green=0.125*(1+Math.sin((i+69)*p))*cxx;
jsArrayColor.push(green);
var blue=0.125*(1+Math.sin((i+129)*p))*cxx;
jsArrayColor.push(blue);
}
function Init()
{
var myCanvasObject = document.getElementById('myCanvas');
//webgl = myCanvasObject.getContext("experimental-webgl");
webgl = myCanvasObject.getContext("webgl");
webgl.viewport(0, 0, myCanvasObject.clientWidth, myCanvasObject.clientHeight);
draw();
}
function draw(){
vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject,
ShaderSourceFromScript("shader-vs"));
webgl.shaderSource(fragmentShaderObject,
ShaderSourceFromScript("shader-fs"));
pileShader(vertexShaderObject);
pileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position"); webgl.bindAttribLocation(programObject, v3ColorIndex, "av3Color");
webgl.linkProgram(programObject);
eProgram(programObject);
webgl.enable(webgl.DEPTH_TEST);
t1++;
cos=Math.cos(t2);
sin=Math.sin(t2);
jsArrayData=[];
p=Math.PI/225;
for(i=0;i<1802;i++) {
for(j=0;j<2;j++){
k=i+9*j;
cos1=Math.cos(k*(1+1/4)*p);
cos2=Math.cos(k*(2+2/4)*p);
px[i][j]=0.2*Math.cos((k+t1)*p)*(3+0.5*cos1+0.55*cos2+0.25*Math.cos(k*P) );
ty=0.2*Math.sin((k+t1)*p)*(3+0.5*cos1+0.55*cos2+0.25*Math.cos(k*P));
tz=0.11*Math.sin((3+3/4)*k*p)+0.05*Math.sin(k*P);
py[i][j]=ty*cos+tz*sin;
pz[i][j]=tz*cos-ty*sin;
jsArrayData.push(px[i][j]*f/(f+pz[i][j]));
jsArrayData.push(py[i][j]*f/(f+pz[i][j]));
jsArrayData.push(pz[i][j]);
}
}
quadBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, quadBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
quadColorBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, quadColorBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayColor), webgl.STATIC_DRAW);
webgl.clearColor(1.0, 1.0, 1.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
webgl.bindBuffer(webgl.ARRAY_BUFFER, quadBuffer);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
webgl.bindBuffer(webgl.ARRAY_BUFFER, quadColorBuffer);
webgl.enableVertexAttribArray(v3ColorIndex);
webgl.vertexAttribPointer(v3ColorIndex, 3, webgl.FLOAT, false, 0, 0);
webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 3602);
setTimeout('Init()',25);
}
var ddy=0;
var bbb=false;
document.onmousedown=function(evt) {
evt=evt || window.event;
bbb=true;
ddy=evt.clientY;
}
document.onmouseup=function(){bbb=false;}
document.onmousemove=function(evt){
evt=evt || window.event;
if(bbb){
t2+=(evt.clientY-ddy)/100;
ddy=evt.clientY;
}
}
</script>
</head>
<body onload='Init()'>
<canvas id="myCanvas" style="border:1px solid red;" width='550px' height='550px'></canvas>
</body>
</html>。