一.环境介绍

倘若你只是使用Three.js库中所提供的几何体，且不载入任何纹理贴图，则网页是可以从本地的文件系统中打开，并且是能够直接运行的，只需在文件管理器中双击HTML文件，它就可以在浏览器中进行显示。 (此时你将在地址栏中看到类似这样的URL：file:///yourFile.html);但这些是不能满足项目需要的，我们在作项目的时候是需要加载模型师给我们做好的模型而不是Three.js库中所提供的几何体。我们需要从外部文件里载入几何体或是纹理贴图，由于浏览器same origin policy(同源策略)的安全限制，从本地文件系统载入外部文件将会失败，同时抛出安全性异常，这里有两种方式解决这个问题：

1.1在浏览器中改变本地文件的安全策略，这将使你可以通过file:///yourFile.html来直接运行本地文件系统中的文件。(本人不建议使用这种方式，如个您感兴趣可以自行百度)

1.2从本地的服务器运行文件，这可以让你通过http://localhost/yourFile.html来访问运行在本地服务器上的文件(个人建议下载一个phpstudy工具，使用很简单 或者自己使用nodejs弄一个服务)。

二. 开始项目

2.1  准备一个  模型，threejs支持模型格式挺多的，常见的有glb(gltf)、obj、fbx、json等

2.2 引入threejs 文件  three.min.js、OrbitControls.js(相机控制器)、GLTFLoader.js(模型加载器这里展示的是glb格式模型加载器)如下：

My first three.js app

2.3 准备工作已经好了 现在开始进入代码阶段

2.3.1  我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。

let scene,camera,renderer,controls，load；

scene = new THREE.Scene();//场景

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//相机

renderer = new THREE.WebGLRenderer();//渲染器

renderer.setSize( window.innerWidth, window.innerHeight );//渲染器尺寸

document.body.appendChild( renderer.domElement );//将渲染器加入body中

controls=new THREE.OrbitControls(camera, renderer.domElement);//相机控制器

2.3.2 引入模型

load=new THREE.GLTFLoader();

load.loader('./model/test.glb,function(gl){

scene.add(gl.scene)//将模型加入到场景中

renderer.render( scene, camera );//渲染

})；

到这里 理论上我们的项目已经完成了。但是我们都是要对模型、相机进行实时操作的。所以我们需要对场景进行实时渲染

function onUpdate() {

requestAnimationFrame( onUpdate );

renderer.render( scene, camera );

}

onUpdate();

至此 一个完成的项目就操作完成，后续我会继续在此项目给大家分享 模型的一些操作功能 谢谢大家