先来看下最终的效果。

导入obj模型

如果仅使用Mesh几何而不加载任何外部资源，则网页应直接在文件系统中运行，只需双击HTML文件打开即可以预览。而由于3D模型是从外部加载进来的，由于浏览器的原始策略安全性限制，从文件系统加载将失败，并出现安全异常。必须要启动本地Web服务器来运行文件。

下载的模型文件如下：

默认情况下，three.js 仅包含少数几个加载器（例如JSONLoader），其他加载器应单独添加到应用程序中。例如：导入OBJ格式的模型，除了导入必要的three.js文件外，还需要导入OBJLoader.js文件。three.js中导入外部模型的加载器下载地址：https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders

可以使用 script 标签导入加载器文件

<script type="text/javascript" src="../js/loaders/OBJLoader.js"></script>

也可以使用 ES6 的 import 导入所需文件

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

导入加载器后，就可以将模型添加到场景中了。语法在不同的加载程序中有所不同。OBJLoader的使用方法如下：

var objLoader = new THREE.OBJLoader();
//url 模型地址
//onLoad 加载完成后的回调函数，一般在这里操作将模型添加到场景中
//onProgress 加载过程中触发的函数，可以用来展示进度条
//onError 捕捉错误的回调函数
objLoader.load(url,onLoad,onProgress,onError);function onLoad(object) {//......scene.add(object);   //将模型添加到场景中
});function onProgress( xhr ) {if ( xhr.lengthComputable ) {var percentComplete = xhr.loaded / xhr.total * 100;console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );}
}function onError() {}

设置模型的缩放比例：

object.scale.set(1, 1, 1);

设置模型的坐标：

object.position.set(0, 0, 0);

添加模型周围的立方体边线：

var box = new THREE.Box3().setFromObject(object);
var box3Helper = new THREE.Box3Helper(box);
scene.add(box3Helper);

添加辅助工具x,y,z三维坐标轴：

scene.add(new THREE.AxesHelper(20));

添加模型皮肤：

object.traverse(function(child) {if (child instanceof THREE.Mesh) {//设置模型皮肤child.material.map = THREE.ImageUtils.loadTexture( 'pikaqiu/p.jpg');}
});

PI属性就是π,还表示了弧度π = 180°,Math.PI = 3.14 = 180°

Math.PI = 3.14 = 180°

案例的完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>皮卡丘</title></head><body></body><script type="text/javascript" src="../js/three.js"></script><script type="text/javascript" src="../js/loaders/OBJLoader.js"></script><script type="text/javascript" src="../js/controls/OrbitControls.js"></script><script>//场景var scene = new THREE.Scene();//相机var camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000);//设置相机坐标camera.position.set(50, 30, 100);//渲染器var renderer = new THREE.WebGLRenderer();//设置渲染器的颜色和大小renderer.setClearColor(0x404040);renderer.setSize(window.innerWidth, window.innerHeight);//将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。//这就是渲染器用来显示场景给我们看的<canvas>元素document.body.appendChild(renderer.domElement);//鼠标控制旋转var controls = new THREE.OrbitControls(camera, renderer.domElement);//设置是否可以缩放,默认值为true// controls.enableZoom = false;//设置鼠标交互,设置为false之后，不能移动位置，不能旋转物体,默认为true// controls.enableRotate = false;//设置光源var light = new THREE.DirectionalLight(0xffffff, 0.5);light.position.setScalar(100);scene.add(light);scene.add(new THREE.AmbientLight(0xffffff, 0.5));//添加灰色网格线scene.add(new THREE.GridHelper(20, 20));//导入obj模型var objLoader = new THREE.OBJLoader();objLoader.load('/02-objectLoader/pikaqiu/pikaqiu.obj', function (object) {//设置模型缩放比例object.scale.set(1, 1, 1);//设置模型的坐标object.position.set(0, 0, 0);//PI属性就是π,还表示了弧度π = 180°,Math.PI = 3.14 = 180°//将模型z轴旋转90度,三种写法都可以// object.rotation.z = -Math.PI * 0.5;// object.rotateZ(-Math.PI * 0.5);// object.rotation.set(0,0,-Math.PI * 0.5);//绘制模型周围的立方体连线// var box = new THREE.Box3().setFromObject(object);// var box3Helper = new THREE.Box3Helper(box);// scene.add(box3Helper);//辅助工具,x,y,z三维坐标轴// scene.add(new THREE.AxesHelper(20));object.traverse(function(child) {if (child instanceof THREE.Mesh) {//设置模型皮肤child.material.map = THREE.ImageUtils.loadTexture( '/02-objectLoader/pikaqiu/p.jpg');}});//将模型添加到场景中scene.add(object);});function render() {//动画循环渲染requestAnimationFrame(render);//渲染到页面上renderer.render(scene, camera);}render();</script>
</html>

参考资料：
https://threejs.org/docs/index.html

threeJs导入3D皮卡丘.obj模型，使用.jpg贴图，实现缩放旋转查看功能相关推荐

Unity:导入3D画图制作的模型
Unity:导入3d画图制作的模型在制作游戏地图的时候,可以先用win10提供的免费应用3D画图来制作号模型,在导入到Unity项目中的资源包,然后直接使用. 3D画图默认保存的3D格式是*.glb ...
threejs封装加载 .glb 格式模型，修改贴图
组件 <template><div id="modelCreation"><slot></slot></div> < ...
“winform+opengl+freeglut“实现导入两关节机械臂的obj模型，并进行旋转、平移等操作
开发环境:vs2019 开发工具:C++.OpenGL 工具库:freeglut 窗口:winform 主要实现:将OpenGL绘图窗口嵌入Winform窗口,在OpenGL窗口中导入事先准备好的ob ...
教程 | 使用Tensorflow从视频中揪出皮卡丘！
作者 | Juan De Dios Santos 译者 | Zhiyong Liu 编辑 | Natalie,Debra AI 前线导读:图像分类和目标检测是计算机视觉两大模块.相比于图像分类,目标检 ...
Cesium学习笔记（九）：导入3D模型（obj转gltf）
在用cesium的过程中难免需要导入别人做好的3D模型,这时候就需要将这些模型转成gltf格式了当然,官方也给了我们一个网页版的转换器,但是毕竟是网页版的,效率极其低下,文件还不能太大,所以我们就需 ...
网页导入3D模型-obj/mtl文件
具体代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
Java 3D导入obj模型后颜色显示出错显示白色，或者笔记本电脑显示彩色，但是台式机仍为白色
Java 3D导入obj模型后颜色显示出错显示白色,或者笔记本电脑显示彩色,但是台式机仍为白色代码问题首先,确保代码中编辑了给模型导入颜色 //function:读取.obj文件,并将其添加到S ...
THREEJS导入外部OBJ+MTL后内存优化
背景近期做一个关于石油化工的3D数字孪生项目,模型均为客户那边提供,模型文件是obj+mtl+jpg组合.因为有较多局部控制动画,所以建模被要求拆分成多个obj模型,然后在场景中自动组合使用. 现象 ...
使用threejs导入外部模型与滑动查看【微信小程序】-裁-
目录可行方法 1.下载示例项目: 2.CV 改代码弃稿[不要用] 可行方法好不容易找到的参考文章: https://segmentfault.com/a/1190000041147784 1.下 ...

threeJs导入3D皮卡丘.obj模型，使用.jpg贴图，实现缩放旋转查看功能

导入obj模型

threeJs导入3D皮卡丘.obj模型，使用.jpg贴图，实现缩放旋转查看功能相关推荐

最新文章

热门文章