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

最新推荐文章于 2024-08-14 14:05:02 发布

青柠可乐

最新推荐文章于 2024-08-14 14:05:02 发布

阅读量3.5k

点赞数 1

分类专栏： three.js

本文链接：https://blog.csdn.net/Wendelle/article/details/80014733

版权

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

摘要由CSDN通过智能技术生成

最近在看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中
    documen