Three.js 3D 动画场景搭建

最新推荐文章于 2025-11-17 16:43:14 发布

原创

最新推荐文章于 2025-11-17 16:43:14 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #3D场景 #狐妖小红娘 #前端

本文介绍了作者受一篇文章启发，使用three.js搭建3D动画场景的过程，特别是如何构建狐妖小红娘中的相思树。通过CylinderGeometry和SphereGeometry创建花朵和树枝，并应用旋转、缩放和平移。虽然目前的实现较为粗糙，但作为three.js的学习和练习，作者计划未来改进。

最近看了一篇文章，用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方向的平移位置。

代码：

<!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(#e

最低0.47元/天解锁文章