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

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)
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九仞山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值