最近看了一篇文章,用three.js写了一个很有趣的游戏场景,看了之后发现又想好好学一下three.js。
对整个流程介绍的很是详细。拜读了这篇文章之后,决定也用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方向的平移位置。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script type="text/javascript" src="CanvasRenderer.js"></script>
<script type="text/javascript" src="Projector.js"></script>
<style>
#world {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(#e4dcdc, #c0f2f7);