1、首先,我们在本地服务器的根目录下创建一个html文件,并将其命名为football.html。
2、然后,我们用崇高的文本编辑器打开这个html文件,并在其中编写基本的html代码,并介绍所需的three.min.js库!~这里还介绍了一个OrbitControlers.js库,用来控制摄像头。
(资料图片)
3、那我们自己写逻辑代码吧!
4、首先定义和初始化一个相机!~~
5、相机就像我们的眼睛,可以帮助我们看到场景中的东西。
6、然后我们定义并初始化一个场景,它就像我们周围的环境。我们可以把各种东西放在里面供我们的眼睛看,也就是相机拍照。
7、然后我们定义并初始化一个渲染器,它将帮助我们渲染相机拍摄的东西,这样对象就可以呈现在画布上。
8、因为我们想画一个足球,所以我们定义并初始化一个球体的几何形状。
9、7初始化球体的几何后,我们还需要导入足球的材质贴图粘贴到球体上。这里的足球地图是我从百度出来的百度!~ ~导入贴图材质后,我们可以将贴图粘贴到球体几何体上。我们将创造这样一个足球立方体。
10、创造一个足球立方体还没有结束。我们还需要将这个立方体添加到场景中,也就是我们周围的环境中,这样我们就可以看到这个场景中的足球。
11、好吧,现场有足球。让我们用渲染器渲染相机在场景中看到的东西。~ ~在这里写一个动画函数并调用它!~~
12、好吧,让我们通过扫描仪访问它,我们可以看到屏幕上呈现的足球!
13、我们拖动鼠标,旋转中间,发现足球没有变。我们希望我们的足球离我们更近,所以我们需要操作摄像机。这里需要轨道控制器。如图添加代码,然后转动滚轮,你会发现足球离你更近了。
14、此时,用三. js绘制的足球显示在您的面前。但是有一点不足,就是足球地图贴的不是那么好,两极的地图挤在一起,两极越走越远,地图好像越拉长。我还不知道怎么做。如果你知道了,你的朋友可以发私信或者告诉你一些事情!
本文就为大家讲解到这里,希望对大家有所帮助。