一.环境介绍
倘若你只是使用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格式模型加载器）如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style> body { margin: 0; } </style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/GLTFLoader.js"></script>
</body>
</html>
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();
至此 一个完成的项目就操作完成，后续我会继续在此项目给大家分享 模型的一些操作功能 谢谢大家
网友评论