three.js（一）写代码做个球

最新推荐文章于 2026-05-20 08:00:00 发布

原创

最新推荐文章于 2026-05-20 08:00:00 发布 · 3.8k 阅读

收录于

本文记录了作者学习three.js的过程，重点介绍了如何编写代码创建一个3D球体。通过示例代码和实际效果展示，帮助读者理解和复习three.js的基础知识。

最近在看three.js，每一步练习的时候用到的代码都记录一下，方便复习。第一个是最简单的球体，代码和效果如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        canvas{
            width:100%;
            height: 100%;
        }
    </style>
    <script src="/https://cdn.bootcss.com/three.js/91/three.min.js"></script>
</head>
<body>
<script>
    //创建场景
    var scene=new THREE.Scene();
    //创建透视投影相机，视角45度，画幅比例 宽比高，近平面距离0.1，远平面1000
    var camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
    //创建渲染器
    var renderer=new THREE.WebGLRenderer();
    //渲染器canvas宽高设为与窗口一致
    renderer.setSize(window.innerWidth,window.innerHeight);
    //将渲染器对应的dom元素添加到body中
    document.body.appendChild(renderer.domElement);
    //定义一个几何体
    var geometry=new THREE.SphereGeometry(3