three.js 在 WebGL 绘制旋转的几何体

原创

已于 2025-03-18 20:41:36 修改 · 293 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #three.js #几何体

于 2025-03-16 13:24:07 首次发布

实现 three.js 内置几何体的创建，并加入几何体旋转动画。包含几何体有：球形网格、二十面体、八面体、四面体、长方形平面、立方体、圆形平面等，这些都是学习 three.js 的基础

为了方便，我将使用 vite 搭建一个原生 js 项目。

1.创建项目

npm create vite@latest three-demo
选：Vanilla
选：JavaScript

2.初始化项目
cd three-demo
cnpm install

3.安装 three.js
cnpm install three@0.160.0 --save

或者 cd three-demo
curl -O https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js

4.编写示例 three_demo_10.html 如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn10 (内置几何体)</title>
    <script src="three.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload='draw()'>
<script>
    var renderer;
    var initRenderer = () => {
      renderer = new THREE.WebGLRender