threejs 在渲染模型的时候需要调整相机的位置以更好的显示模型，这时候可能会需要模型的中心点，以及模型的尺寸， 使用Box3可以获取到网格模型的尺寸以及中心点
// 地图mapGroup的包围盒计算
var box3 = new THREE.Box3();//创建一个包围盒
...
2年前 (2023-01-22)
喜欢
threejs同时使用相机的lookAt与OrbitControls时，会导致lookAt失效。使用controls.target来代替lookAt进行设置。
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitContro...
2年前 (2023-01-22)
喜欢
var that = this
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
//three.js文件加载类FileLoader：封装了XMLHttpRequest
var loader = new THREE.Fi...
2年前 (2023-01-22)
喜欢
使用threejs加载geoJson数据绘制渲染地图
<template>
<div class="homebody">
<div class="canvasGLTFBody">
...
2年前 (2023-01-22)
喜欢
threejs通过顶点坐标.Line和.LineLoop可以分别绘制首尾不相连和首尾相连的线
首尾不相连的线
<template>
<div class="homebody">
<div class="ca...
2年前 (2023-01-22)
喜欢
环境贴图对PBR材质渲染效果影响还是比较大，一般渲染PBR材质的模型，最好设置一个合适的环境贴图。
立方体纹理加载器 CubeTextureLoader
Textureloader返回 Texture
CubeTextureLoader 返回 CubeTexture
通过前面学习...
2年前 (2023-01-21)
喜欢
PBR材质 MeshStandardMaterial 金属度 metalness和粗糙度 roughness，再加上下节课讲解的环境贴图。envMap，给大家呈现一个金属渲染效果。
金属度 metalness
金属度属性.metalness 表示材质像金属的程度，非金属材料，如木...
2年前 (2023-01-21)
喜欢
所谓PBR就是，基于物理的渲染(physically-based rendering).
Three.js提供了两个PBR材质相关的API MeshStandardMaterial和
MeshPhysicalMaterial,MeshPhysicalMaterial 是MeshS...
2年前 (2023-01-21)
喜欢
改变一个模型颜色其它模型跟着变化
由于楼房的Mesh共享了1号楼Mesh的材质，当你通过mesh1.material改变mesh1材质，本质上是改变所有楼Mesh的材质。
const mesh1 = gltf.scene.getObjectByName("1号楼&quo...
2年前 (2023-01-21)
喜欢
加载一个外部模型，比如gltf模型，如果你想批量修改每个Mesb的材质，一个一个设置比较麻烦，可以通过递归遍历方法．traverse() 批量操作更加方便。
递归遍历方法traverse()
// 递归遍历gltf.scene
gltf.scene.traverse(functi...
2年前 (2023-01-21)
喜欢
