three.js学习：初学three.js，从立方体开始

2024-03-25 21:39:52

目前three.js是浏览器展现3D效果的一个很强大的js工具，遗憾的是没有特别系统而全面的文档（threejs官方文档感觉有些缺漏，可以和WebGL中文网的threejs教程对比着看）。好了，根据WebGL中文网的threejs教程开始学习，因为教程里的部分代码已经不适用（过时）了，导致学习的时候有些磕磕绊绊，故记录下自己编写的代码，以便以后查阅。

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="js/three.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            /*background-color: blue;*/
        }
    </style>
</head>
<body>
<canvas></canvas>
</body>
<script src="js/chapter1.2.js"></script>
</html>

2、js代码中应该有什么元素

three.js写的代码通常含有三项元素：scene、camera和renderer三项，这三者的关系可以用WebGL中文网教程中的一段话表示：

Three.js中的场景是一个物体的容器，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。
渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。如图：

3、chapter1.2.js

码农公寓

相关文章