初认threeJS

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。官方地址：http://www.webgl3d.cn/

文章目录

初认threeJS
前言
一、加载three
二、html部分
三、使用步骤
- 1.引入库
- 2.引入背景图
- 3. 引入模型
- 4. 创建场景
- 5. 添加渲染器
- 6. 添加相机
- 7. 计算模型剧中
- 8. 加载模型FBX
- 9. 加载光源
- 10. 添加事件
- 11. 添加加载进度
- 12. 更新
- 13. 运行
应用
总结

前言

这里会说到导入fbx模型，以及在开发中遇到的问题，最后是怎么解决的

一、加载three

npm install three
npm install --save @types/three

二、html部分

  <section class="pane-box" id="threeBox"><div id="myThree" /></section>

三、使用步骤

1.引入库

代码如下（示例）：

import * as THREE from 'three'
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

2.引入背景图

代码如下（示例）：

import BG from "@/assets/fbxResource/envImg/bg.jpeg";
import negx from "@/assets/img/negx.png";
import negy from "@/assets/img/negy.png";
import negz from "@/assets/img/negz.png";
import posx from "@/assets/img/posx.png";
import posy from "@/assets/img/posy.png";
import posz from "@/assets/img/posz.png";
//模型加载器
let FBXModule = new FBXLoader();

3. 引入模型

//模型，这里可以引入多个模型
const models = {name:'像素人',path:"./public/blueMan.fbx",position:[0, 0, 0],type:'fbx'}

4. 创建场景

这里写了加载了3中背景，我的项目中只用到了背景图片

Scene(){this.Scene =  new THREE.Scene()//设置背景色// this.Scene.background = new THREE.Color(0xffffff);//设置背景图this.Scene.background = new THREE.TextureLoader().load(BG)//设置3d环境背景图// this.Scene.background = new THREE.CubeTextureLoader().load([posx,negx,posy,negy,posz,negz,]);THREE.Cache.enabled = true;console.log("scene...",this.Scene)// this.Scene.background = textureCube}

5. 添加渲染器

 Renderer(){this.Renderer = new THREE.WebGLRenderer({antialias: true,alpha: true,premultipliedAlpha:true,precision: 'highp'})
this.Renderer.setPixelRatio(window.devicePixelRatio);
this.Renderer.setSize(threeBox.clientWidth, threeBox.clientHeight - 20);
this.Renderer.setClearColor(0x00ff00);
//允许在场景中使用阴影贴图
this.Renderer.shadowMap.enabled = true;//是否使用物理上正确的光照模式
this.Renderer.physicallyCorrectLights = true;//定义渲染器的输出编码
this.Renderer.outputEncoding = THREE.sRGBEncoding;myThree.appendChild(this.Renderer.domElement);}

6. 添加相机

这里提到两种相机，不知道区别的小伙伴去官网看看

 Camera(){let canvasSize = threeBox.clientWidth / threeBox.clientHeight; //窗口宽高比//透视摄像机this.Camera = new THREE.PerspectiveCamera(45, canvasSize,1, 100000)//正交摄像机//let k = 500 / 600;//let s = 10;//this.Camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 2000);//创建相机对象this.Camera.position.set(200, 500, 300);this.Camera.lookAt(this.Scene.position)}

7. 计算模型剧中

//包围盒全自动计算：模型整体居中
let ModelAutoCenter = function(group:any){let box3 = new THREE.Box3()// 计算层级模型group的包围盒// 模型group是加载一个三维模型返回的对象，包含多个网格模型box3.expandByObject(group)// 计算一个层级模型对应包围盒的几何体中心在世界坐标中的位置let center = new THREE.Vector3()box3.getCenter(center)// 重新设置模型的位置，使之居中。group.position.x = group.position.x - center.xgroup.position.y = group.position.y - center.y group.position.z = group.position.z - center.zconsole.log("center.x", group.position.y,center.y)
}

8. 加载模型FBX

modelLoader(MODEL:any){const loadTip:any = this.addLoadTip();this.Controls.autoRotate = false;let MTYPE = MODEL.type;console.log("Model22222---",MTYPE)FBXModule.load(MODEL.path, (geometry:any)=> {loadTip.textContent='加载完成！';//移除模型// this.Model &&  this.Scene.remove(this.Model);console.log("Model111---",this.Model)//@ts-ignorethis.Model &&  myThree.children[0].remove();//设置相机位置this.Camera.position.set(...MODEL.position);//当前模型this.Model = 'fbx'.indexOf(MTYPE)!=-1?geometry:geometry.scene;console.log("Model22---",this.Model)//初始化当前模型MODEL.init && MODEL.init(this.Model,geometry)//默认遍历模型字节点，获取相关参数设置 特殊模型前往init回调中设置let that = this;this.Model.traverse((child:any) => {if(child.isMesh) {child.material.emissiveMap = child.material.map;}})//模型自动居中ModelAutoCenter(geometry)//加载完成后开始自动播放setTimeout(() => {loadTip.style.display = 'none';}, 1000);this.Scene.add(this.Model);},(xhr:any)=>{//加载进度//@ts-ignoreloadTip.textContent=(parseInt(xhr.loaded/xhr.total*100)+'%加载中...');},(err:any)=>{loadTip.textContent='模型加载失败！'});}

9. 加载光源

addLight(){this.Lights = [//平行光（DirectionalLight）// color 光的颜色。 缺省值为 0xffffff (白色)。intensity - (可选参数) 光照的强度。缺省值为1。{name:'AmbientLight',obj:new THREE.AmbientLight(0xFFFFFF,2.2)},{name:'DirectionalLight_top',obj:new THREE.DirectionalLight(0xFFFFFF,2.2),position:[10, 80,65]},{name:'DirectionalLight_bottom',obj:new THREE.DirectionalLight(0x1B1B1B,2.2),position:[10, 80,65]},{name:'DirectionalLight_right1',obj:new THREE.DirectionalLight(0xFFFFFF,2.2),position:[10, 80,65]},{name:'DirectionalLight_right2',obj:new THREE.DirectionalLight(0xFFFFFF,2.2),position:[10, 80,65]},];this.Lights.map((item:any)=>{item.obj.name=item.name;item.position && item.obj.position.set(...item.position);item.Helper = new THREE.PointLightHelper( item.obj );this.Scene.add(item.obj);})}

10. 添加事件

   addControls() {this.Controls = new OrbitControls(this.Camera, this.Renderer.domElement);// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性this.Controls.enableDamping = false;//是否可以缩放this.Controls.enableZoom = true;//设置相机距离原点的最远距离-可以控制缩放程度this.Controls.minDistance = 0;//设置相机距离原点的最远距离this.Controls.maxDistance = 3000;//800//是否开启右键拖拽this.Controls.enablePan = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度this.Controls.dampingFactor = 0.5;//是否自动旋转this.Controls.autoRotate = false;this.Controls.autoRotateSpeed = 1;}

11. 添加加载进度

 addLoadTip(){document.querySelector('.loadTip') &&  myThree.removeChild(document.querySelector('.loadTip'));let  loadTip =  document.createElement('div');loadTip.className='loadTip'loadTip.style.cssText+='position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:5px;background-color:rgba(0,0,0,0.5);padding:5px 10px;color:#fff;';myThree.appendChild(loadTip);return loadTip;}

12. 更新

animation(){//更新控制器this.Renderer.render(this.Scene, this.Camera);this.Controls.update();this.AnimationMixer && this.AnimationMixer.update(this.Tclock.getDelta());requestAnimationFrame(()=>this.animation());
},
onWindowResize() {//@ts-ignorethis.Camera.aspect = threeBox.clientWidth / threeBox.clientHeight ;this.Camera.updateProjectionMatrix();//@ts-ignorethis.Renderer.setSize(threeBox.clientWidth, threeBox.clientHeight - 20);this.Renderer.render(this.Scene, this.Camera);
},

13. 运行

run(){return new Promise((resolve, reject) => {this.init.Renderer.call(this)this.init.Scene.call(this)this.init.Camera.call(this)this.addControls();//添加环境光this.addLight()this.modelLoader(models);this.animation();//添加辅助面板window.onresize = ()=>this.onWindowResize();resolve(modelScene)})}

应用

import  { modelScene } from "./loadFbx";
setTimeout(()=>{modelScene.run()
},1000)

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了three的导入fbx的使用

threeJS导入FBX模型相关推荐

unity导入FBX模型时出现材质丢失，模型为白膜的情况
unity导入FBX模型时出现材质丢失,模型为白膜的情况导入模型后点击该模型修改属性即可:
Mac Unity导入FBX模型时出现材质丢失，模型为白膜的情况
刚开始学习unity,很多地方的都不懂,导入FBX模型,别人电脑上都是正常的,就我的是白膜,为此我还更换了unity编辑器的版本,换了和同事相同的版本,然而并没有什么用,网上的解决方法都试过了,没有效 ...
ThreeJS - 直接设置Fbx模型的某个关节的位移和旋转值
1 在ThreeJS中直接设置Fbx模型的某个关节的位移和旋转值示例代码如下: fbxModel.traverse(function (child) {// 如果子节点为骨骼if(child.isB ...
Unity导入fbx模型贴图不显示的问题
今天导入模型的时候,出现了一个问题. 有一面红色的墙,导入unity后显示为白色. 原因是没有贴图,贴图资源在fbx包里但是识别不出来解决方案:把贴图分离出来后就可以识别了. 点击fbx模型文件,I ...
Cocos技术派 | 导入FBX模型实现真3d效果
文章目录前言工程介绍导入模型源码前言 Cocos Creator一直以来都是一个2D游戏引擎,并且致力于H5游戏开发领域.很多同学不满足于开发2D游戏,想尽办法搞一些3D效果,比如自己接入t ...
Threejs 导入动态模型 - 兔子岛
Threejs 动画模型 GLTF加载器(GLTFLoader) glTF(gl传输格式)是一种开放格式的规范 (open format specification), 用于更高效地传输.加载3D内容 ...
threejs 导入gltf模型并添加Sprite标注，在vue结合websocket实时更新贴图的信息
效果展示: 1. 导入依赖 import * as THREE from 'three'import {GLTFLoader} from 'three/examples/jsm/loaders/GLT ...
使用threejs导入外部模型与滑动查看【微信小程序】-裁-
目录可行方法 1.下载示例项目: 2.CV 改代码弃稿[不要用] 可行方法好不容易找到的参考文章: https://segmentfault.com/a/1190000041147784 1.下 ...
unity导入FBX模型
1.拖动文件到Assects文件下 2.将模型拖入到视窗 3.将模型reset: 4.调整transform组件,将模型调整到合适位置: position:平移 rotation:旋转 scale:比 ...

threeJS导入FBX模型