threejs通过顶点坐标.Line和.LineLoop可以分别绘制首尾不相连和首尾相连的线
首尾不相连的线
<template>
<div class="homebody">
<div class="ca...
yekong
2年前 (2023-01-22)
喜欢
环境贴图对PBR材质渲染效果影响还是比较大,一般渲染PBR材质的模型,最好设置一个合适的环境贴图。
立方体纹理加载器 CubeTextureLoader
Textureloader返回 Texture
CubeTextureLoader 返回 CubeTexture
通过前面学习...
yekong
2年前 (2023-01-21)
喜欢
PBR材质 MeshStandardMaterial 金属度 metalness和粗糙度 roughness,再加上下节课讲解的环境贴图。envMap,给大家呈现一个金属渲染效果。
金属度 metalness
金属度属性.metalness 表示材质像金属的程度,非金属材料,如木...
yekong
2年前 (2023-01-21)
喜欢
所谓PBR就是,基于物理的渲染(physically-based rendering).
Three.js提供了两个PBR材质相关的API MeshStandardMaterial和
MeshPhysicalMaterial,MeshPhysicalMaterial 是MeshS...
yekong
2年前 (2023-01-21)
喜欢
改变一个模型颜色其它模型跟着变化
由于楼房的Mesh共享了1号楼Mesh的材质,当你通过mesh1.material改变mesh1材质,本质上是改变所有楼Mesh的材质。
const mesh1 = gltf.scene.getObjectByName("1号楼&quo...
yekong
2年前 (2023-01-21)
喜欢
加载一个外部模型,比如gltf模型,如果你想批量修改每个Mesb的材质,一个一个设置比较麻烦,可以通过递归遍历方法.traverse() 批量操作更加方便。
递归遍历方法traverse()
// 递归遍历gltf.scene
gltf.scene.traverse(functi...
yekong
2年前 (2023-01-21)
喜欢
浏览器控制台查看3D模型树结构
加载gltf模型,通过gltf. scene可以获取模型的数据,你可以通过浏览器控制打印gltf. scene,然后和你三维建模软件中的模型目录树对比,比较两者的结构是否相同。
模型父对象节点可以用Oaiect3D对象表示,也可以用组对象Group...
yekong
2年前 (2023-01-21)
喜欢
.gltf格式模型文件,有不同的组织形式。
单独.gltf文件
单独.glb文件
.gltf +.bin +贴图文件
这些不同形式的gltf模型,加载代码其实没啥区别。
loader.load("cs.gltf",function (gltf) {
...
yekong
2年前 (2023-01-21)
喜欢
OrbitControls改变相机位置.position
通过OrhitControl.旋转和缩放,本质上就是在改变透视投影桐机 PerspectiveCamera 的位置.position.
渲染循环中不停地打印相机的位置属性,你可以通过相机控件旋转或缩放三维场景,同时通过浏览...
yekong
2年前 (2023-01-21)
喜欢
GLTF格式简介 (Web3D领域JPG)
gltf格式的重要性
GLTF格式是新2015发布的三维模型格式,随着物联网、WebGL、5G的进一步发展,会有越来越多的互联网项目Web端引入3D元素,你可以把GLTF格式的三维模型理解为jpg、.png格式的图片一样,现在的网站,图...
yekong
2年前 (2023-01-17)
喜欢