用three.js实现3D模型的展示（1）

     我个人是初步粗略地学习了html，css，js后，再大致了解一下three.js，然后边学边做的。
     three.js官网上的入门介绍让人很好地理解了three.js工作时大致感觉：一种类似于标记语言的东西。有场景，摄像机，材料，渲染器等一系列已经成型的具体事物，你需要做的仅仅是调用它们，就像使用游戏引擎一样。

     需要注意的是，在一个html中调用three.js时，一定要注意自己是否已经在头部调用好相关的js了，three.js的很多功能需要除了three.js外其他的一些js，比如OBJLoader等。在这里给出我调用的js。（因为没什么经验，我把要用的js直接从three.js总的文件夹里复制出来了，这是不值得提倡的）

<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/STLLoader.js"></script>
<script src="js/MeshLambertMaterial.js"></script>
<script src="js/TransformControls.js"></script>
<script src="function.js"></script>

  我的目标是在展示3D模型，能导入模型、对模型进行简单的操作、操纵摄像机的角度从不同方向观察模型、保存模型到本地等一系列功能。我先是参照官网上的代码，生成场景、摄像机、渲染器这三样东西。代码如下：

var scene,camera,renderer;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(15,15,15);
renderer = new THREE.WebGLRenderer();
renderer.setSize(1000,500);
renderer.shadowMapEnabled = true;
document.getElementById("scene").append(renderer.domElement);

  然后就是模型了，在three.js中，模型的属性最重要的时几何形状与材料。几何形状（geometry）顾名思义是指模型的形状，而材料（material）在我个人了解下则是指这个模型的表面性质，比如three.js的基础材料对光是没有反应的，比如说如果我们想看到阴影啊明暗变化啊就要用MeshLambertMaterial这种材料，而不能用MeshBacisMaterial。因为我参照其他人的写法，对于环境的初始化是放在一个命名为init（）的函数中，而载入模型是单独的另一个函数，所以此处便不引用代码了。

  说到载入模型，我们可以看到官网上的第一个实例，是在js中直接生成的一个预设好的cube的geometry并没有什么疑问，而我在使用OBJLoader.js调用本地的obj文件时却发现并不能成功，即使是参照网上的视频一步步对照依旧不行，我现在并不能完全确定原因，但我在了解到出于安全考虑，web上的js不能读取本地文件后，初步判断是这导致的，（之后调用服务器上的obj文件发现是可以载入的）但是视频中却成功了，这让我有些不解，如果有人评论解答我的疑惑，我会十分感激。

  这是three.js展示模型的第一部分，我会周更把我学到的东西分享一下，欢迎大家指出我的错误和不妥之处。