Threejs入门之二:引用Threejs并创建第一个3D图形

九仞山

已于 2023-04-21 18:10:39 修改

阅读量1.8k

点赞数 3

分类专栏： ThreeJS 文章标签： 3d javascript html5

于 2023-04-01 10:43:45 首次发布

本文链接：https://blog.csdn.net/w137160164/article/details/129892602

版权

ThreeJS 专栏收录该内容

42 篇文章 81 订阅

订阅专栏

Threejs的引入

1.新建一个文件夹，命名为threejs_demo,在该文件夹下新建一个lib文件夹，将前面下载的threejs源码中的build文件夹中的three.module.js文件拷贝到lib文件夹下
2.用vscode打开新建的文件夹，在根目录下新建一个index.html文件和一个index.js文件
3.在index.html中引入threejs，方式如下：

  <script type="importmap">
    {
      "imports":{
        "three":"./js/three.module.js"
      }
    }
  </script>

注意这里不能使用传统的src方式引入threejs，否则会报如下错误Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

Threejs中的几个重要概念

在使用threejs之前，要先了解threejs中的几个重要概念，分别是场景(Scenes)、几何体(Geometries)、材质(Materials)、物体(Objects)、相机(Cameras)和渲染器(Renderers)
1.Scenes：场景的概念原本是戏剧、电影中的概念，指的是某一个特定的场面；threejs中的场景其实就是一个特定的场面，想象一下，假如你是导演，要拍一个火车进站的镜头，这就是一个场景
2.Geometries：几何体就是立体图形，如正方体、球、圆等图形；在场景中就相当于一个道具的外形结构；threejs中提供了很多几何体，如立方体(BoxGeometry)、圆(CircleGeometry)、圆锥(ConeGeometry)等，具体可查看threejs的官方文档
3.Materials：材质顾名思义就是物体的材料质感，比如颜色、透明度等，在场景中就相当于道具的颜色和材料，threejs中也提供了很多材质类接口，比如基础网格材质(MeshBasicMaterial)等，老规矩，具体的内容还是查看threejs的官方文档
4.Objects：物体也称对象，物体就是客观存在的一种物质，一个物体包括两方面的特性，即它的形状和材质。threejs中物体由Geometries和Materials两部分组成，这就相当于电影中的道具枪一样，它由外形结构(几何体)和材料颜色(材质)组成。
5.Cameras：相机就相当于电影中用于拍摄的摄像机，相机拍摄的角度、远近场景的切换等由其控制。
6.Renderers：渲染器相当于电影的后期合成，我场景有了，物体也准备好了,相机拍摄完成了，就需要用渲染器把拍摄的东西通过合成展现出来。

创建一个3D图形

了解了threejs中的几个重要概念，下面来创建一个简单的3D物体，来感受下threejs的强大。
1.首先新建一个index.js文件，我们将所有的js代码都写到这个文件里面，在index.html中引入index.js脚本文件

<script type="module" src="./index.js"></script>

2.在index.html中新建一个div，id设置为webgl，用于展现threejs的容器，

<div id="webgl"></div>

清除html默认的样式，设置div的宽高和边框位置

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    #webgl {
      width: 400px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
  </style>

3.在index.js中引入threejs

import * as THREE from 'three'

4.根据前面的分析，假设我们现在在拍摄一个火车进站的场景，那么我们首先就需要布置一个这样的场景，所以，我们首先要创建一个场景

// 创建一个场景
const scene = new THREE.Scene()

5.有了场景，我们还需要在场景中放置一辆火车(物体)，我们知道一个物体由两部分组成，即外形结构和材质，所以我们先创建一个几何体作为物体的外形结构，这里我们创建一个立方体几何体(BoxGeometry),它有三个参数，即长宽高

// 创建一个尺寸为50,50,50的几何体
const geometry = new THREE.BoxGeometry(50,50,50)

6.我们再创建一个材质，设置为红色，作为物体的材质

// 创建材质
const material = new THREE.MeshBasicMaterial({
  color:0xff0000
})

7.我们现在已经创建了几何体和材质，现在，我们需要把几何体和材质结合起来形成一个物体，所以我们再来创建一个物体

// 创建一个物体，并将前面的geometry和material作为参数传入
const mesh = new THREE.Mesh(geometry,material)

8.物体创建好后，我们还需要确认物体在场景中的位置，并将物体放入到场景中，所以我们通过position属性设置物体的位置，并通过scene的add属性将物体添加到场景中

// 设置物体在场景中的位置
mesh.position.set(0,10,10)
// 将物体添加到场景中
scene.add(mesh)

9.至此，我们物体已经创建好了，下面我们来创建一个相机，我们知道要拍摄一个物体，我们需要找好角度，调整好视角范围，调整相机的远近等，所以我们创建相机时也需要这些参数

// 创建相机，四个参数：角度、宽高比、近端点、远端点
const camera = new THREE.PerspectiveCamera(30,400/300,0.1,2000)

然后我们设置相机在场景中的位置

// 设置相机的位置
camera.position.set(200,200,200)

另外，我们相机想要拍摄那个点位，需要将相机瞄准那个点位，所以我们还需要设置相机看向的点位

// 设置相机聚焦的位置为坐标原点
camera.lookAt(0,0,0)

10.好啦，至此我们已经创建了场景(包括场景中的物体)和相机，下面我们就要转入后期制作了，我们需要将场景和相机进行合成，就用到了threejs提供的渲染器。我们首先创建一个渲染器，并设置其大小

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置大小
renderer.setSize(400,300)

11.将场景和相机放入渲染器

renderer.render(scene,camera)

12.至此，我们整改场景已经建设完成了，但是别急，此时你运行html文件在浏览器上还看不到任何的东西，是因为我们没有指定一个容器用来放置渲染器，相当于我们电影拍摄好了，但是我们没有电视机，看不了，是不是好尴尬；
还记得我们最早的html文件吗？我们在里面创建了一个id为webgl的div，没错，就是它，我们创建它的目的，就是让它来存放我们拍摄好的这段场景的，所以，我们先获取div容器，并将上面渲染器渲染的结果放入其中

document.querySelector('#webgl').appendChild(renderer.domElement)

13.OK，至此，一个火车进站的场景已经拍摄完成了，运行html，可以看到一个红色的三维立方体展示到了div 容器中，嗯，不错，导演说收视率应该很高！
在这里插入图片描述
14.index.html中的完整代码如下

<!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>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #webgl {
      width: 400px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="webgl"></div>
  <script type="importmap">
    {
      "imports":{
        "three":"./js/three.module.js"
      }
    }
  </script>
  <script type="module" src="./index.js"></script>
</body>
</html>

15.index.js中的完整代码如下

import * as THREE from 'three'
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene()

// 创建一个几何体
const geometry = new THREE.BoxGeometry(50,50,50)

// 创建材质
const material = new THREE.MeshBasicMaterial({
  color:0xff0000,
  transparent:true,
  opacity:0.5
})

// 创建一个物体
const mesh = new THREE.Mesh(geometry,material)
// 设置物体在场景中的位置
mesh.position.set(0,10,10)

// 将物体添加到场景中
scene.add(mesh)

// 创建相机
const camera = new THREE.PerspectiveCamera(30,400/300,0.1,2000)

// 设置相机的位置
camera.position.set(200,200,200)
// 设置相机聚焦的位置
camera.lookAt(0,0,0)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置大小
renderer.setSize(400,300)
renderer.render(scene,camera)

document.querySelector('#webgl').appendChild(renderer.domElement)