Three.js 3D 动画场景搭建

最近看了一篇文章，用three.js写了一个很有趣的游戏场景，看了之后发现又想好好学一下three.js。

文章：https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/?utm_source=tuicool

        对整个流程介绍的很是详细。拜读了这篇文章之后，决定也用three.js搭建一个场景试一试，感觉很有趣的样子。很喜欢狐妖小红娘这个国漫，真的很好看的国漫，安利一下。就尝试一下狐妖小红娘里面的相思树吧，能力有限，先做得粗糙一点，作为练习吧！以后有时间了，再好好做一下。

 

搭建简单的场景，用到了three里面的两种基础几何形状。

 

• CylinderGeometry 柱体类, 构造函数如下所示( radiusTop 与 radiusBottom 分别是顶面和底面的半径，由此可知，当这两个参数设置为不同的值时，实际上创建的是一个圆台； height 是圆柱体的高度； radiusSegments 与 heightSegments 可类比球体中的分段； openEnded 是一个布尔值，表示是否没有顶面和底面，缺省值为false，表示有顶面和底面);

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)

 

• SphereGeometry 是球体类, 构造函数如下所示 ( radius 是半径； segmentsWidth 表示经度上的切片数； segmentsHeight 表示纬度上的切片数； phiStart 表示经度开始的弧度； phiLength 表示经度跨过的弧度； thetaStart 表示纬度开始的弧度； thetaLength 表示纬度跨过的弧度), 其中需要注意的是在使用时可以根据经纬度切片数来定制球形外形, 可以通过经纬度弧度来定制球形起始形状;

THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)

 

尝试做一个简单的场景，图片如下：

 

     用CylinderGeometry、SphereGeometry 创建花朵，以及基本的树枝。主要用到了旋转、缩放和平移。由于要注意创建的柱状体的组合，需要计算在x、y、z方向的平移位置。

代码：

 

截图：

 

基础对象：

 

 

 

demo:https://ccessl.github.io/three-use/

先这样吧比较粗糙，作为自己的练习~~~~~~~