最终实现通过html代码、three.js、本地服务器,使用浏览器查看一个gltf模型
1.模型使用的gltf是通过obj转换来的,转换使用的obj2gltf插件,使用node.js和npm;
2.三个js是需要使用的库,在html内进行引用;
3.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Three加载3d模型</title>
<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<style>
*{
margin:0 ;
padding: 0;
}
</style>
</head>
<body>
<script>
var container,controls;
var camera,scene,renderer,light;
function init(){
container =document.createElement("div");
document.body.appendChild(container);
//创建相机
camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.25,1000);
camera.position.set(400,400,150);//相机位置(黄色是y,蓝色是z,红色是x)
//渲染
renderer=new THREE.WebGLRenderer({
antailias:true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
container.appendChild(renderer.domElement);
//轨道控制
controls=new THREE.OrbitControls(camera,renderer.domElement);
controls.target.set(0,150,0);
controls.update();
//场景
scene=new THREE.Scene();
//打光
light=new THREE.HemisphereLight(0xbbbbff,0x444422);
light.position.set(0,1,0);
scene.add(light);
var loader=new THREE.GLTFLoader().setPath("modles/");//模型加载器.最后的斜杠不能少
loader.load("build.gltf",function(gltf){
gltf.scene.scale.set(0.03,0.03,0.03);
gltf.scene.position.set(-80,0,0);
scene.add(gltf.scene);
});
//添加坐标线
var axesHelper=new THREE.AxesHelper();//(黄色是y,蓝色是z,红色是x)
scene.add(axesHelper);
}
init();
animate();//让场景及时地requestAnimationFrame
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
</script>
</body>
</html>
遇到的问题:
- 想要加载模型文件需要在本地部署一个http-server服务器,相当于在服务器打开这个html文件并使用里面路径下的模型文件,很简单,同样是使用node.js,做法:打开cmd,将路径切换到nodejs的安装目录(如E:\softwares\nodejs\node_modules\npm)输入:npm install -g http-server开始下载,下载完成后,将cmd路径切换到html所在文件夹(如:C:\桌面\three),输入http-server,整个下载http-server和开启服务器操作如下图
出现最后的ip地址和端口号即完成,而后就可以将浏览器地址处的html文件路径改为localhost:8080了,端口号视情况改变,然后就加载使用模型文件了。 - 我这个版本的three.js和我看的教学视频版本不一样,就这么几行代码就出现了不一致的问题,问题出现在添加鼠标控制转向的实现上,不是引用了一个OrbitControls.js嘛,用他创建了一个controls变量,创建语句为controls=new THREE.OrbitControls(camera,renderer.domElement);视频教程里的创建时只有第一个参数,没有后面的domElement,我这个版本的three.js(版本为r118)如果只有第一个参数会报错
最终效果