three.js入门系列之旋转的圆台、球体、正方体

先来张图:

image.png

一、调整机位和辅助线

image.png

由上述代码可知,现在的机位是三维坐标轴上的点(2,2,2),方框的那一句很重要,有了这一句,你将获得上帝视角!!!

接下来添加辅助线(立体空间三轴):

image.png

这样就添加了一个轴辅助线,由于我们是站在(2,2,2),所以看到的辅助线是这样的:

image.png

这是一个标准的右手坐标系!

二、添加3D几何图形

image.png

三、添加动画

不知道大家注意了没,上面三个图形的变量没有用var关键字,因为是提前在全局中声明的,为了后续在计时器中调用(实现动画):

image.png

四、跑起来

image.png

这个视图将在指定的DOM容器中显示,并且animate函数将会以帧为计时单位运行定时函数,没运行一次,改变三个模型的自身旋转偏移量。并且再次渲染视图,从而实现物体的运动。


猜你喜欢

转载自www.cnblogs.com/eco-just/p/10074656.html