turtle(海龟)绘图很适合用来引导少儿学习编程,通过简单的命令,可以轻松地绘制出精美的形状和图案。
更多命令可以参见:https://docs.python.org/zh-cn/3/library/turtle.html#introduction
forward() | fd() 前进
backward() | bk() | back() 后退
right() | rt() 右转
left() | lt() 左转
goto() | setpos() | setposition() 前往/定位
setx() 设置x坐标
sety() 设置y坐标
setheading() | seth() 设置朝向
home() 返回原点
circle() 画圆
dot() 画点
stamp() 印章
clearstamp() 清除印章
clearstamps() 清除多个印章
undo() 撤消
speed() 速度
lb gltf模型(webvrmodel)-gltf模型下载定制,glb模型下载定制,三维项目电商网站在线三维展示,usdz格式,vr模型网,网页VR模型下载,三维模型下载,webgl网页模型下载
我们下面会学习使用直线画一个网格出来,为了更好的理解这个网格在空间中的位置,我们是时候,讲一讲空间坐标系了。
Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系。下面是右手坐标系的图例,如果对这个概念不理解,可以百度一下,我保证你伸出手比划的那一瞬间你就明白了,如果不明白请给作者留言,我会尽快补上关于坐标系的知识。
图中右边那个手对应的坐标系,就是右手坐标系。在Threejs中,坐标和右边的坐标完全一样。x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外。
在Threejs中,一条线由点,材质和颜色组成。
点由THREE.Vector3表示,Threejs中没有提供单独画点的函数,它必须被放到一个THREE.Geometry形状中,这个结构中包含一个数组vertices,这个vertices就是存放无数的点(THREE.Vector3)的数组。这个表示可以如下图所示:
为了绘制一条直线,首先我们需要定义两个点,如下代码所示:
var p1=new THREE.Vector3( -100, 0, 100 ); |
var p2=new THREE.Vector3( 100, 0, -100 ); |
请大家思考一下,这两个点在坐标系的什么位置,然后我们声明一个THREE.Geometry,并把点加进入,代码如下所示:
var geometry=new THREE.Geometry(); |
geometry.vertices.push(p1); |
geometry.vertices.push(p2); |
geometry.vertices的能够使用push方法,是因为geometry.vertices是一个数组。这样geometry 中就有了2个点了。
然后我们需要给线加一种材质,可以使用专为线准备的材质,THREE.LineBasicMaterial。
最终我们通过THREE.Line绘制了一条线,如下代码所示:
var line=new THREE.Line( geometry, material, THREE.LinePieces ); |
ok,line就是我们要的线条了。
我还深爱着高中时的那个坐标平面,它勾起了我关于前排同学的细细长发的回忆…
这个平面的效果如下所示,截图不完整哦:
它横竖分别绘制了20条线段,在摄像机的照射下,就形成了这般模样。你可以在[初级教程\chapter2-2.html]发现这些代码:
<!DOCTYPE html> |
<html> |
<head> |
<meta charset="UTF-8"> |
<title>Three框架</title> |
<script src="js/Three.js"></script> |
<style type="text/css"> |
div#canvas-frame { |
border: none; |
cursor: pointer; |
width: 100%; |
height: 600px; |
background-color: #EEEEEE; |
} |
</style> |
<script> |
var renderer; |
function initThree() { |
width=document.getElementById('canvas-frame').clientWidth; |
height=document.getElementById('canvas-frame').clientHeight; |
renderer=new THREE.WebGLRenderer({ |
antialias : true |
}); |
renderer.setSize(width, height); |
document.getElementById('canvas-frame').appendChild(renderer.domElement); |
renderer.setClearColor(0xFFFFFF, 1.0); |
} |
var camera; |
function initCamera() { |
camera=new THREE.PerspectiveCamera(45, width / height, 1, 10000); |
camera.position.x=0; |
camera.position.y=1000; |
camera.position.z=0; |
camera.up.x=0; |
camera.up.y=0; |
camera.up.z=1; |
camera.lookAt({ |
x : 0, |
y : 0, |
z : 0 |
}); |
} |
var scene; |
function initScene() { |
scene=new THREE.Scene(); |
} |
var light; |
function initLight() { |
light=new THREE.DirectionalLight(0xFF0000, 1.0, 0); |
light.position.set(100, 100, 200); |
scene.add(light); |
} |
var cube; |
function initObject() { |
var geometry=new THREE.Geometry(); |
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) ); |
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) ); |
for ( var i=0; i <=20; i ++ ) { |
var line=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); |
line.position.z=( i * 50 ) - 500; |
scene.add( line ); |
var line=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); |
line.position.x=( i * 50 ) - 500; |
line.rotation.y=90 * Math.PI / 180; |
scene.add( line ); |
} |
} |
function threeStart() { |
initThree(); |
initCamera(); |
initScene(); |
initLight(); |
initObject(); |
renderer.clear(); |
renderer.render(scene, camera); |
} |
</script> |
</head> |
<body onload="threeStart();"> |
<div id="canvas-frame"></div> |
</body> |
</html> |
画网格关键之处initObject函数中,我们不浪费纸,但是浪费一些电,在下面重复一下上面的代码:
var cube; |
function initObject() { |
var geometry=new THREE.Geometry(); |
// B begin |
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) ); |
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) ); |
// B end |
for ( var i=0; i <=20; i ++ ) { |
var line=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); |
line.position.z=( i * 50 ) - 500; |
scene.add( line ); |
var line=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); |
line.position.x=( i * 50 ) - 500; |
line.rotation.y=90 * Math.PI / 180; |
scene.add( line ); |
} |
} |
思路:我们要画一个网格的坐标,那么我们就应该找到线的点。把网格虚拟成正方形,在正方形边界上找到几个等分点,用这些点两两连接,就能够画出整个网格来。
在x轴上定义两个点p1(-500,0,0),p2(500,0,0)。
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) ); |
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) ); |
这两个点决定了x轴上的一条线段,将这条线段复制20次,分别平行移动到z轴的不同位置,就能够形成一组平行的线段。
同理,将p1p2这条线先围绕y轴旋转90度,然后再复制20份,平行于z轴移动到不同的位置,也能形成一组平行线。
经过上面的步骤,就能够得到坐标网格了。代码如下:
for ( var i=0; i <=20; i ++ ) { |
var line=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); |
line.position.z=( i * 50 ) - 500; |
scene.add( line ); |
var line=new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); |
line.position.x=( i * 50 ) - 500; |
line.rotation.y=90 * Math.PI / 180; // 旋转90度 |
scene.add( line ); |
} |
好了,本节课讲完了,感觉自己写了好久好久。要兼顾深度和初学者,确实有些困难。最后,希望您喜欢。
用C语言实现二维,三维绘图算法(2)-解析曲面的显示
---- 引言----
每次使用OpenGL或DirectX写三维程序的时候, 都有一种隔靴搔痒的感觉, 对于内部的三维算法的实现不甚了解. 其实想想, Win32中既然存在画线画点函数, 利用计算机图形学的知识, 我们用可以用纯C调用Win32实现三维绘图, 完全不用借助OpenGL和DirectX, 这有重复造轮子的嫌疑, 但是自己动手实现一遍, 毕竟也是有意义的.
[效果演示]
原始效果(100条浮动曲线)
加密以后的效果(200条浮动曲线)
[浮动水平线法绘图过程]
固定一个y值按步长变换给定一个x值, 从而可计算出平面截线一个点的z坐标值. 将改点投影到xoy平面上, 然后再变换到屏幕上. 如果是曲线端点要填充边界值. 接着检验此点的可见性,并用1表示上方可见, 0表示不可见, -1表示下方可见. 可见性检测就是用当前点的y值与上下浮动水平线数组中相应的元素值进行比较,y值大于上水平线数组中元素值或小于下水平线数组中元素值, 则当前点可见, 否则不可见. 往下再计算同一平面截线的另一点, 和上面点一样, 先投影到坐标平面上, 再变换到屏幕上. 先前的点叫紧前点, 当前的点为当前点. 紧前点和当前点的可见性主要有下面一些可能情形:
[编程实现要点]
曲面函数的定义
float SurfaceFun(float X, float Y)
{
float w1, w2, w3, FV;
w1=4*(X-2)*(X-2) + (Y-4)*(Y-4) - 1;
w2=(X-5)*(X-5)/9 + 4*(Y-2)*(Y-2) - 1;
w3=(X-5)*(X-5)/9 + 4*(Y-6)*(Y-6) - 1;
if(w1>85) w1=85;
if(w2>85) w2=85;
if(w3>85) w3=85;
FV=w1*w1*exp(-w1) + w2*w2*exp(-w2) + w3*w3*exp(-w3);
return(FV);
}
绘制曲面函数
void DrawSurface()
{
int Xe, Ye, Ln, Pt, XPre, YPre, XCur, YCur, Xi, Yi;
int *pi, LimY, VisCur, VisPre;
float X, Y, Z;
LimY=GetWindowHeight();
SetLineColor(BLUE);
for(Ln=0; Ln<=LNo; ++Ln)
{
Y=Y2-Ln*IncY;
X=X1;
Z=SurfaceFun(X,Y);
CalcuProject(X, Y, Z);
XPre=0.5 + (XProj-F1)*EchX + C1;
YPre=0.5 + (YProj-F3)*EchY + C3;
FillEdge(XPre, YPre, Xd, Yd);
VisPre=VisibilityTest(XPre, YPre);
for(Pt=0; Pt<=PNo; ++Pt)
{
X=X1+Pt*IncX;
Z=SurfaceFun(X,Y);
CalcuProject(X, Y, Z);
XCur=0.5 + (XProj-F1)*EchX + C1;
YCur=0.5 + (YProj-F3)*EchY + C3;
VisCur=VisibilityTest(XCur, YCur);
if( (HMax[XCur]==0) || (HMin[XCur]==LimY) ) VisCur=VisPre;
if(VisCur==VisPre)
{
if( (VisCur==1) || (VisCur==-1) )
{
if(0<=XCur)
PlotLine(XPre, LimY-60-YPre, Xi, LimY-60-YCur);
else if(0<=YCur)
PlotLine(XPre, LimY-60-YPre, XPre, LimY-60-YCur);
else
PlotLine(Xi, LimY-60-YPre, XPre, LimY-60-YPre);
HorizonInc(XPre, YPre, XCur, YCur);
}
}
else // VisCur!=VisPre
{
if(VisCur==0)
{
if(VisPre==1)
{
pi=Inter(XPre, YPre, XCur, YCur, HMax);
Xi=*pi;
Yi=*(pi+1);
}
else
{
pi=Inter(XPre, YPre, XCur, YCur, HMin);
Xi=*pi;
Yi=*(pi+1);
}
if(0<=Xi)
PlotLine(XPre, LimY-60-YPre, Xi, LimY-60-Yi);
else if(0<=Yi)
PlotLine(XPre, LimY-60-Yi, XPre, LimY-60-Yi);
else
PlotLine(XPre, LimY-60-YPre, XPre, LimY-60-YPre);
HorizonInc(XPre, YPre, Xi, Yi);
}
else
{
if(VisCur==1)
{
if(VisPre==0)
{
pi=Inter(XPre, YPre, XCur, YCur, HMax);
Xi=*pi;
Yi=*(pi+1);
if(0<=Xi)
PlotLine(Xi, LimY-60-Yi, XCur, LimY-60-YCur);
else if(0<=Yi)
PlotLine(XCur, LimY-60-YCur, XCur, LimY-60-YCur);
else
PlotLine(XCur, LimY-60-YCur, XCur, LimY-60-YCur);
HorizonInc(Xi, Yi, XCur, YCur);
}
else
{
pi=Inter(XPre, YPre, XCur, YCur, HMin);
Xi=*pi;
Yi=*(pi+1);
if(0<=Xi)
PlotLine(XPre, LimY-60-YPre, Xi, LimY-60-Yi);
else if(0<=Yi)
PlotLine(XPre, LimY-60-YPre, XPre, LimY-60-Yi);
else
PlotLine(XPre, LimY-60-YPre, XPre, LimY-60-YPre);
HorizonInc(XPre, YPre, Xi, Yi);
pi=Inter(XPre, YPre, XCur, YCur, HMax);
Xi=*pi;
Yi=*(pi+1);
if(0<=Xi)
PlotLine(Xi, LimY-60-YCur, XCur, LimY-60-YCur);
else if(0<=Yi)
PlotLine(XCur, LimY-60-Yi, XCur, LimY-60-YCur);
else
PlotLine(XCur, LimY-60-YCur, XCur, LimY-60-YCur);
HorizonInc(Xi, Yi, XCur, YCur);
}
}
else // VisCur!=0, VisCur!=1
{
if(VisPre==0)
{
pi=Inter(XPre, YPre, XCur, YCur, HMin);
Xi=*pi;
Yi=*(pi+1);
if(0<=Xi)
PlotLine(Xi, LimY-60-YCur, XCur, LimY-60-YCur);
else if(0<=Yi)
PlotLine(XCur, LimY-60-Yi, XCur, LimY-60-YCur);
else
PlotLine(XCur, LimY-60-YCur, XCur, LimY-60-YCur);
HorizonInc(Xi, Yi, XCur, YCur);
}
else // VisCur!=0, VisCur!=1, VisPre!=0
{
pi=Inter(XPre, YPre, XCur, YCur, HMax);
Xi=*pi;
Yi=*(pi+1);
if(0<=Xi)
PlotLine(XPre, LimY-60-YPre, Xi, LimY-60-Yi);
else if(0<=Yi)
PlotLine(XPre, LimY-60-YPre, XPre, LimY-60-Yi);
else
PlotLine(XPre, LimY-60-YPre, XPre, LimY-60-YPre);
HorizonInc(XPre, YPre, Xi, Yi);
pi=Inter(XPre, YPre, XCur, YCur, HMin);
Xi=*pi;
Yi=*(pi+1);
if(0<=Xi)
PlotLine(Xi, LimY-60-Yi, XCur, LimY-60-YCur);
else
PlotLine(XCur, LimY-60-YCur, XCur, LimY-60-YCur);
HorizonInc(Xi, Yi, XCur, YCur);
}
}
}
}
VisPre=VisCur;
XPre=XCur;
YPre=YCur;
}
FillEdge(XCur, YCur, Xg, Yg);
}
}
原文:https://www.cnblogs.com/chinamming/p/3427442.html
*请认真填写需求信息,我们会在24小时内与您取得联系。