基础文件
首先，要创建一个简单的index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>（三）第一个场景</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
然后在同级目录下创建script.js文件
console.log('喂喂喂，试音试音')
在浏览器里打开index.html文件——当然不是双击直接打开，需要直接拽到浏览器里，然后按F12打开管理工具，就能在控制台里看到输出的汉字。
加载Three.js
现在来加载Three.js库。方法有很多，比如简单的通过<script/>标签来加载下载好的库。
前往官网，下载并解压官方文件，从three.js-master/build/下，拷贝three.min.js到自己的项目中。
然后，就可以在<body>标签后载入库，
<script src="./three.min.js"></script>
<script src="./script.js"></script>
确保在加载three.min.js后，加载script.js，否则，自己编写的代码无法感知three.min.js中的函数。
使用Three.js
在script.js中，能够读取到一个叫做THREE的变量。注意应该大写。
如果将THREE放入console.log()函数中，在控制台会看到一堆返回值。
THREE包含了大多数经典Three.js项目中可能会用到的类与属性。但不幸的是，并非所有的类都在这个变量里，稍后我们将讨论如何访问它们。
要使用其中一个类，就需要将它初始化。比如，想要创建一个场景，需要写
const scene = new THREE.Scene()
想要创建一个球形几何体，需要写
const sphereGeometry = new THREE.SphereGeometry(1.5,32,32)
首个场景
想要在场景中显示些什么，首先需要准备4个要素
·一个场景——用来容纳各种对象
·一些对象
·一个相机
·一个渲染器
场景
场景就像个容器。它用来放置对象、模型、粒子、光线等等，然后在某个时刻，需要请求Three.js来渲染场景。
要创建场景，需要用到场景类Scene
//创建场景
const scene = new THREE.Scene()
对象
对象可以是很多东西。它可以是原始几何体、导入的模型、粒子、光照等等。
下面以一个红色的正方体为例。
要创建一个红色的立方体，需要创建一种叫做Mesh的类型的对象。一个Mesh是由几何体（形状）和材质（外观）组成。
虽然有很多种几何体与材质，但是为了简化，所以创建BoxGeometry和一个MeshBasicMaterial。
要创建几何体。使用带有三个参数的BoxGeometry，三个参数代表立方体的外形尺寸。
//创建对象
const geometry = new THREE.BoxGeometry(1,1,1)
要创建材质，使用带有一个参数的MeshBasicMaterial类，参数是一个对象{}，这个对象包含了所有的选项。在这里仅仅需要颜色color属性。
有许多方法来定义Three.js里的颜色，可以发一个JS十六进制数比如0xff0000，也可以发送字符串型的十六进制"#ff0000"，也可以直接用颜色的名字'red'，或者传递一个Color类的实例。
//创建对象
const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color: 0xff0000})
要创建最终的网格体，使用Mesh类，然后将geometry和material作为参数传进去。
//创建对象
const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color: 0xff0000})
const mesh = new THREE.Mesh(geometry,material)
然后使用add()函数把网格体添加到场景中
scene.add(mesh)
如果不把对象添加到场景，场景里面什么也看不到。
相机
相机是不可见的，更像是一个理论观察点。当渲染一个场景时，会从相机视角来进行渲染。
场景里可以有多个相机，就像是拍电影，并且可以随时在相机之间切换。通常情况下，场景里只有一个相机。
相机有不同的类型，这点稍后讲。当下，场景里需要一个简单的透视镜头（近大远小的那种）。
要创建这样的镜头，要使用PerspectiveCamera类。
有两个重要的参数需要注意：
视场角
视场角就是视角的角度大小。如果视场角很大，会一下看到各个角度，但是带有很大的失真，因为视线被绘制在很小的矩形里面。如果视场角很小，场景内的东西就像放大了。视场角（fov）对应竖直方向上的视角的角度。这次我们使用75度。
长宽比
大多数情况下，长宽比是画布的长度除以高度。当前不用设置长宽比，但是以后会用得上。当下，创建一个临时值来使用。
不要忘了把相机添加到场景。没添加相机的情况下，每样东西都能运行，但是以后可能会报错。
//尺寸
const sizes = {
width:800,
height:600
}
//创建相机
const camera = new THREE.PerspectiveCamera(75,sizes.width/sizes.height)
scene.add(camera)
渲染器
渲染器的用处就是渲染。我们向渲染器发送简单的从相机视角渲染场景的指令，然后渲染结果就会被绘制到画布上。画布可以由自己创建，或者让渲染器自动生成并添加到页面上。这次，我们自己创建画布，并把它发送到渲染器。
先创建<canvas>元素并赋予一个类名称，然后再载入脚本
<canvas class = "webgl"></canvas>
我们可以使用带一个参数的WebGLRenderer类来创建渲染器：参数为一个包含所有选项的对象{}。这里只需要canvas属性，来对应到刚刚添加到页面上的<canvas>标签。
在代码的开头，创建一个canvas变量，然后使用document.querySelector()来获取并存储它。
把画布分配到一个变量的好处，我们稍后进行讨论。
还可以通过setSize()的方法来更新渲染器的大小，传入的参数就是前面创建的sizes。
setSize()方法会据此自动调整<canvas>的大小。
//分配<canvas>到变量
// Canvasconst canvas = document.querySelector('canvas.webgl')
// ...
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
此时刷新页面，会看到一个大小为800x600的黑色画布。
第一次渲染
调用渲染器的render()方法，并将scene和camera作为参数传入
renderer.render(scene,camera)
此时画面有变化吗？
问题出在这：现在既未定义对象的位置，也未定义相机的位置。两者都在默认位置，即在场景的中心，而且，在物体的内部是无法看到物体的。
这就需要挪动它们。
移动它们，就需要访问每个对象的多个属性，比如position位置、rotation旋转和scale缩放。当下，使用position位置属性，将相机向后移动。
position位置属性是一个具有三个相关属性的对象：x、y、z。其中z负责向前和向后的轴向移动。
要将相机向后移动，需要给这个属性一个正值。这个操作可以放在代码的任意位置，但是要放在创建camera变量后，实施渲染之前。
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)
网友评论