![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
DZjiuling
这个作者很懒,什么都没留下…
展开
-
threejs 效果合成器(EffectComposer)
用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行,最后一个过程会被自动渲染到屏幕上。构造函数EffectComposer( renderer 例子outlinePassoutlinePass方法如下:function initEffectComposer(){ composer = new THREE.EffectComposer( renderer ); const renderPass = new TH原创 2021-08-17 16:56:24 · 1627 阅读 · 3 评论 -
threejs Point
利用point实现雪花下落的效果const amount=500;const radius=150;function addSnow1(){ for(let i=0 ;i<amount;i++){ vertex.x=(Math.random()*2-1)*radius; vertex.y=(Math.random()*2-1)*radius; vertex.z=(Math.random()*2-1)*radius; vertex.toArray(positi原创 2021-08-13 16:52:33 · 576 阅读 · 0 评论 -
threejs 实例化网格(InstancedMesh)
实例化网格(InstancedMesh)一种具有实例化渲染支持的特殊版本的Mesh。你可以使用 InstancedMesh 来渲染大量具有相同几何体与材质、但具有不同世界变换的物体。 使用 InstancedMesh 将帮助你减少 draw call 的数量,从而提升你应用程序的整体渲染性能。当前的实现需要InstancedMesh和其它3D物体间不共享材质。其构造函数,如图实现方式:function testInstanceMesh(count){ //100万 卡顿 if(!coun原创 2021-07-26 14:40:41 · 2721 阅读 · 0 评论 -
threejs LOD
threejs中提供了LOD可实现根据与相机的distance,从而实现远处减面的操作通过addLevel ( object : Object3D, distance : Float )将不同精度的对象,add到lod中,distance为到摄像机的距离,具体方法如下const x=500; const y=500; const z=500; const geometry = [ [ new THREE.CylinderGeometry( R, R,30 ,30,30 ), 20原创 2021-07-15 19:05:55 · 1758 阅读 · 3 评论 -
threejs 添加几何模型
添加cube,若不添加纹理则将{map:texture }改为{color:0xffff00}function addTexCube(mesh){ let texture = new THREE.TextureLoader().load( mesh.url ); let geo=new THREE.CubeGeometry(mesh.data.width,mesh.data.height, mesh.data.long); let mat=new THREE.MeshLambertMateri原创 2021-07-05 17:09:43 · 479 阅读 · 0 评论 -
threejs 裁剪
设置渲染器中的localClippingEnabled为true,即renderer.localClippingEnabled = true;//设置为可剪裁对于模型的material,如let material = new THREE.MeshLambertMaterial( { color: colorToHex(meshData.Color[0]), flatShading: THREE.SmoothShading, clippingPlan原创 2020-05-20 16:20:52 · 1507 阅读 · 1 评论 -
Three.js加载Json 拾取模型
js加载json文件window.onload = function (){ let url = "data/test.json"; let request = new XMLHttpRequest(); request.open("get", url);/*设置请求方法与路径*/ request.send(null);/*不发送数据到服务器*/ request.onload = function () {/*XHR对象获取到返回信息后执行*/ if (request.status =原创 2020-05-19 11:21:33 · 2574 阅读 · 0 评论 -
threejs动态加载div标签
divid为标签的id值,为了方便后续操作,htmlstr为需要添加的标签文本,position为标签的物体坐标function addLabel(divid,htmlstr,position) { var addDivDom = document.createElement('div'); div1 = addDivDom; var bodyDom = document...原创 2019-10-15 18:38:56 · 3728 阅读 · 5 评论 -
three.js实现obj模型爆炸
由于obj模型是一个有多个mesh组成的组,而不是mesh,因此通过改变obj模型中mesh即children的位置,可实现模型爆炸。通过在控制台输入console.log(model.children)查看,如图首先获取模型中心坐标,由于在设置模型的位置信息时,将模型的中心的设置为(0,0,0),因此这里直接获取(0,0,0)作为模型中心坐标。var modelWorldCenter=n...原创 2019-04-16 16:36:38 · 3943 阅读 · 3 评论 -
Three.js加载obj+mtl(OBJLoader2)
官方案例:添加链接描述方法实现:function addObjNew(objDef){//新版本写法 var objLoader = new THREE.OBJLoader2(); var callbackOnLoad = function ( event ) { model=event.detail.loaderRootNode;//获取模型 model.children.for...原创 2019-03-27 10:13:14 · 6900 阅读 · 5 评论 -
threejs实现贴花效果
事件监听部分: window.addEventListener( 'resize', onWindowResize, false ); moved = false; orbitControls.addEventListener( 'change', function () {//鼠标移动? moved = true; } ); window.addEventL...原创 2019-04-08 14:48:18 · 2269 阅读 · 1 评论 -
three.js 加载drc文件
将obj文件压缩成drc格式,可大大减小其大小。若已有编译好的draco_encoder.exe,可通过使用命令行压缩:draco_encoder.exe -i “文件路径名” -o “输出的文件路径名”。在加载drc文件时,需要借助DRACOLoader.js,且同一文件夹下需存在draco_decoder.js文件function addModeldrc(name){//加载drc文件 v...原创 2019-03-26 21:19:41 · 3387 阅读 · 1 评论