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)腾讯云开发者
