Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决
Blender导出GLTF格式模型之后透明材质的遮挡问题如何解决当使用blender输出完glb模型格式完了之后在放到前端可视化页面的时候 通常会有很多的小问题得不到解决。在此我想分享一点点小的经验，如果处理这些小小的bug。当模型材质为透明的时候，我们最简单的方法就是用默认的节点原理化BSDF设置...
Three
照相机正交 ： THREE.OrthographicCamera(left, right, top, bottom, near, far) 远景（透视） ： THREE.PerspectiveCamera(fov, aspect, near, far) 相机观察点位置 ： camera.lookAt...
02 使用three.js开发全景漫游 视角问题
简介本全景前期是使用六张图片拼成的一个立方体，天空盒类型的。相机的位置处于0，0，0的位置，外面设置了一个长宽高都为200的立方体盒子。只要有相应的照片，把视角封闭在一个相对封闭的空间中，我们查看的效果，就达到了全景图的效果。案例我写了一个由六个不同颜色的纹理组成的图片拼接出来的盒子，可以清楚的查看...
转载-three.js下载与开发指南
原文网址three.js - 一个javascript 3D代码库这个项目的目的是用最简单的开发模式创建一个轻量级的3 d代码库，这个js库提供了canvas，svg，css3d和webgl这四种渲染方式。 下载地址： 下载地址：https：//github.com/mrdoob/three....
使用Three.js的炫酷无限管道特效
由于WebGL越来越受欢迎，我们开始看到一大堆使用它的网站用于出色的创意设计。品牌Fornasetti最近使用WebGL的强大功能发布了他们的网站，效果非常好：让我们看起来像是在变化的模式中穿越隧道的动画。这个经验中最有趣的部分是通过隧道的运动是由鼠标的移动来控制的。今天我们将和大家分享一些类似的T...
Three.js - 材质的使用详解
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1816.html原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detai...
three.js 地质应用的简单介绍
three.js 地质应用的简单介绍因为项目需要，偶然之下接触了three.js这个插件，网上大多只是对基本的使用进行介绍，也没有有经验的同事朋友，所以为了完成项目要求，只得自己进行研究学习。由于本身有别的项目，所以只能利用晚上和周末的时间，如有不足和错误之处，还请大神批评指正。一、基本介绍三大基本...
three.js 在地质学上的应用
近期有个项目需要在客户端展示三维地质模型，网上搜集相关资料也无从下手，突然看到Three3D封装的WebGL，其3D渲染效果令我大为惊叹，于是乎开始了Three3D 的摸索。有兴趣的同学可以点击在线中文文档（http://techbrood.com/threejs/docs查看其演示...
deck.gl 叠加 three.js 物体
import { Matrix4 } from "@math.gl/core";import { Layer, LayerContext } from "@deck.gl/core";import DeckGL from "@deck.gl/react";import { OrbitView } f...
3dmax导出three.js使用的obj格式文件时缺少贴图
最近一直在研究使用three.js加载obj模型，遇到的很多问题，其中之一就是这个让人头大，模型/贴图/材质/渲染都没有问题，导出来的OBJ怎么就没有贴图了呢，经过一周折腾得到的答案，其实答案很简单，就是3dmax导出obj（含贴图），是不支持插件渲染器下的材质，只支持3dmax本身自带的默认扫描线...
three.js实现物体描边效果-shader
three.js 实现物体描边效果-shader在游戏中描边效果非常常见，比如选中物体或者人物的时候会出现。描边效果的原理是在物体的外包包裹了一层，就需要描边的物体比实际的物体大一点点。所以需要牵涉到顶点，就是需要把物体顶点往法线的方向扩展一点点。需要修改vertexShader。...
Webgl显示Revit模型（二）——利用Three.js优化显示效果
Webgl显示Revit模型（一）请见：https://blog.csdn.net/niuge8905/article/details/80044802Three.js已经算是开发webgl最常用的开源库了。Autodesk团队开源了一个va3c来在web端显示revit，但是这个更新很慢，而且效果...
three.js实现obj模型爆炸
由于obj模型是一个有多个mesh组成的组，而不是mesh，因此通过改变obj模型中mesh即children的位置，可实现模型爆炸。通过在控制台输入console.log(model.children)查看，如图首先获取模型中心坐标，由于在设置模型的位置信息时，将模型的中心的设置为（0，0，0），...
maxscript脚本：模型导出为json，用于three.js加载
一、总的任务1.数据来源：将3dsmax中建好的模型，通过烘焙反贴，赋予SelfIllumMap（自发光材质）一个bitmap（位图贴图），用于表达物体的光影效果。加上本身的diffuseMap(本色贴图/漫反射贴图)，每个材质一共有两个材质贴图。2.任务：three.js 可以加载json格式的材...
websocket + three.js实时驱动模型
介绍一个使用websocket传输数据，实时驱动three.js场景中的模型运动的demo，先来看一下效果：这个demo的制作主要涉及了websocket和three.js, 这是一个前后端交互的例子：后端采用了Express作为框架，并使用express-ws模块来完成Websocket实时传输数...
用three.js做一个3D汉诺塔游戏（上）-添加桌台
在汉诺塔游戏中，场景里主要的 3D 物体包括桌台、柱杆和盘子，我们先来添加最简单的桌台到场景中。 桌台的形状是一个长方体，我们可以使用 BoxGeometry 来实现它，网格材质则使用 MeshLambertMaterial 模拟木质的非光泽表面。 const tableSize = { wid...
Git的fast forward和no fast forward和 three way merge 以及squash(聚合)
github上上传了版本库https://github.com/ChuckGitMerge 包括merge和rebase没时间画图，貌似也不太会用画图工具，先写了一个文字版本的更新：2015年08月11日，使用了git for windows自带的git gui作为图片说明一、Fast Forw...
WebGL笔记(六)_Three.js渲染obj模型并同时渲染全景图
基本思路简述：一个模型的渲染的流程是，创建一个场景，并将模型和相机放到场景中合适的位置；然后就会呈现出一个3D模型在屏幕上。全景图的呈现其实就是在创建一个场景、相机、几何球。模型和全景同时被呈现在屏幕上就会出现模型被放在全景环境下的样子。效果图在后面。第一步：创建一个demo.html文件将必要的j...
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
项目背景消防安全一直是各大都市关注的重要课题，在消防体系中，特别是高楼消防体系中，消防系统整体布控与监控，火情有效准确定位，防火器材定位，人员逃生路径规划，火情预警，消防演习都是特别重要的环节。所以一套直观的，迅速治控的系统展现，可体验式演戏游戏也就变得那么的不可或缺了。解决方案技术选型：使用web...
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
序：这段时间忙于奔波，好久没有更新了，今天更新一下，继续上节课的完善讲解，算是对前段时间的一个总结吧。披星戴月的时光也算有点应用效果了。对于webgl(three.js)性能这一块我在上节课《使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课》已经给了详细的说明比较与解决方案...