1_ThreeJS基础

xudechuan

于 2023-09-05 17:24:54 发布

阅读量80

点赞数

分类专栏：前端文章标签：前端 3d

本文链接：https://blog.csdn.net/xudechuan/article/details/132696810

版权

1.尝试一下

要想在浏览器中直观地显示出一个3D的canvas;最少需要：场景,网格模型，形状，材质，相机，渲染器这6个对象。如果没用过3D建模软件建过模，就会觉得很懵。为啥要创建这么多对象？？相反地，如果使用过软件建模，就会很容易的理解，创建这么多对象是很有必要的。由此：建议先学习一下3D软件，再来学习ThreeJs会轻松许多。

第一个例子的说明文档：http://www.webgl3d.cn/pages/2e5d69/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>ThreeJs-3D</h1>
    <button onclick="clickButton()">切换视角</button>
  </body>

  <script src="./three.js"></script>
  <script>
    // 创建3D场景对象Scene
    const scene = new THREE.Scene()