three.js加载OBJ模型

推荐一个免费下载3D模型的网址https://www.cgtrader.com，包含多种格式（obj, mtl等）。

three.js现在是es6语法，旧版本是es5的。
es5，提取码：tfak；
es6项目下载地址 https://github.com/mrdoob/three.js

案例采用的是es5

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta http-equiv="Cache-Control" content="no-siteapp" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>INS Attitude</title><style>body, html { margin:0; width: 100%; height: 100%; }#container{width:100%;height: 100%;/*background-color: #b9c0cc;*/}</head><body><!-- plane --><div id="container"></div><script type="text/javascript" src="js/three.min.js"></script><script type="text/javascript" src="js/loaders/OBJLoader.js"></script><script type="text/javascript" src="js/controls/OrbitControls.js"></script><script type="text/javascript" >var camera, scene, renderer;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var airPlaneObj;var INS_Controls;var container = document.getElementById('container');function Init3D() {// 创建相机camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );// 设置视点camera.position.set(5, 10, 5); // x,y,zcamera.lookAt(0, 0, 0);// 设置对三维场景进行缩放INS_Controls = new THREE.OrbitControls( camera, container );INS_Controls.maxPolarAngle = Math.PI ; // 3D 最大旋转角度INS_Controls.minDistance = 0;INS_Controls.maxDistance = Infinity;// scenescene = new THREE.Scene();// 光源var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );scene.add( ambientLight );var pointLight = new THREE.PointLight( 0xffffff, 0.5 );camera.add( pointLight );scene.add( camera );// 坐标轴var axesHelper = new THREE.AxesHelper( 7 ); scene.add( axesHelper );axesHelper.rotation.x = -Math.PI/2; axesHelper.rotation.z = -Math.PI/2; // managerfunction loadModel() {airPlaneObj.traverse( function ( child ) {// if ( child.isMesh ){//     child.material.map = texture;// } } );scene.add( airPlaneObj );}var manager = new THREE.LoadingManager( loadModel );manager.onProgress = function ( item, loaded, total ) {// console.log( item, loaded, total );};// texturevar textureLoader = new THREE.TextureLoader( manager );// var texture = textureLoader.load( 'textures/a1.jpg' );// modelfunction onProgress( xhr ) {if ( xhr.lengthComputable ) {var percentComplete = xhr.loaded / xhr.total * 100;console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );}}function onError() {}//  OBJLoader 加载模型数据var loader = new THREE.OBJLoader( manager );loader.load( 'models/airplane.obj', function ( obj ) {airPlaneObj = obj;//修改插件原有的旋转顺序（XYZ）airPlaneObj.rotation._order = "YXZ";}, onProgress, onError );//renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );}// 响应屏幕function onWindowResize(){windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}// 设置模型旋转，function animate(){//requestAnimationFrame方法每秒刷新60次requestAnimationFrame( animate );// airPlaneObj downloaded: rotation if(airPlaneObj != undefined){if(gInsAttArray.length != 0 ){airPlaneObj.rotation.x += 0.01 ;}}cameraRender();}function cameraRender(){renderer.render( scene, camera );}window.onload = function(){Init3D();animate();window.addEventListener( 'resize', onWindowResize, false );}</script></body>
</html>
</html>

效果图

three.js加载OBJ模型相关推荐

three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
three.js加载obj模型键盘控制模型局部动作
先贴上我前无古人后无来者的宇宙无敌搅拌机我想用键盘控制框框中各部分分别有各自的动作,我这模型虽然是简单几何体堆积的,但是这是在blender里制作了模型,导出obj格式的模型再导进页面的,主要是测试 ...
threejs加载服务器文件,如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件. 在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃. 现在要加载OBJ和MTL文件,需要结合OBJLoader和MTL ...
Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)
加载.obj模型文件本文是Three.js电子书的14.3节使用三维软件导出.obj模型文件的时候,会同时导出一个材质文件.mtl, .obj和.stl文件包含的信息一样都是几何体顶点相关数据,材 ...
three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
VR 效果前端使用 three.js 加载 Obj，drc文件（三维模型文件）
VR 效果前端使用 three.js 加载 Obj(三维模型文件) 前言:我对 three.js 并不熟!只是朋友有这个需求,写了几个 demo 运行,能看~.如果想深入学习,还需要多看看官方文档, ...
threejs加载obj模型_Vulkan编程指南(章节31-载入模型)
章节31 载入模型介绍本章节我们将会渲染一个带有纹理的三维模型. 库我们使用tinyobjloader库来从OBJ文件加载顶点数据.tinyobjloader库是一个简单易用的单文件OBJ加载器 ...
使用three.js加载obj+mtl文件
因在项目中运用到WEBGL的技术.所以研究了一下下.three.js库看来十分强大,此处为加载带材质的obj文件 1.下载相关js https://threejs.org/ thee.j ...

three.js加载OBJ模型

three.js加载OBJ模型

案例采用的是es5

效果图

three.js加载OBJ模型相关推荐

最新文章

热门文章