three.js 模型详解和外部模型详解

three.js场景渲染模型，基于项目来说大多数模型都是建模师提供的，three.js建模api有限，无法制作出过于精美和写实的模型，而且代码量过大效率低。

1.three.js建立模型

内置ipa包括很多形状。

更多几何体api可以参考官方文档（http://www.yanhuangxueyuan.com/Three.js/）

// 立方体模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var material1 = new THREE.MeshLambertMaterial({color: 0x0000ff
});
// 球体模型
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({color: 0xff00ff
});
// 圆柱模型
var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
var material3 = new THREE.MeshLambertMaterial({color: 0xffff00
});//几何体模型初始化
var mesh1 = new THREE.Mesh(geometry1, material1);
scene.add(mesh1); //模型添加到场景中
var mesh2 = new THREE.Mesh(geometry2, material2);
scene.add(mesh2);
var mesh3 = new THREE.Mesh(geometry3, material3);
mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
scene.add(mesh3); //

模型搭建时需要载体，也就是模型的材质。模型的材质在three.js中也提供有大量api，此处仅用基础材质。一个模型的组成是模型api+模型材质。初始化模型var mesh1 = new THREE.Mesh(geometry1, material1); //geometry1为模型api，material1为模型材质
scene.add(mesh1); //模型添加到场景

模型材质中可以对模型进行内含元素的设置。在初始化模型材质的时候对其进行设定。var material3 = new THREE.MeshLambertMaterial({
color: 0xffff00//模型颜色设置
});

模型可以设置的属性有很多，包括：颜色，贴图，粗糙度，金属度，透明度等等，具体可以参考官方文档。（郭隆邦）（http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/materials/MeshBasicMaterial）

模型的属性分为公有属性和私有属性，不做过多举例。他们可以设置的属性是很根据你选用的材质决定的。例如PBR材质，可以设置公有属性还可以设置他私有的私用属性。

2.three.js 引入外部模型

引入外部模型就是建模师制作的精美的模型对象，通过文件形式发送给你，我们利用js和加载器对模型进行渲染。(注意：外部引入的模型一定要使用与之文件格式对应的加载器，而且外部模型的引入一定要搭建服务器，本地是读取不到的。)加载器的api根据文件形式选用，常见的模型文件格式为json，glb，gltf，fbx等。

let loader = new THREE.GLTFLoader();loader.load('phone.glb', function (gltf) {gltf.scene.traverse(function (child) {if (child.isMesh) {child.material.emissive = child.material.color;child.material.emissiveMap = child.material.map;}});meshh = gltf.scene;scene.add(meshh);//将模型加入场景
})

模型加入场景时默认位置说场景中心位置。可以通过var axes = new THREE.AxisHelper(500);
scene.add(axes);在场景中加入辅助的坐标系。

模型在场景中的位置可以用mesh.position进行设定。

对外部模型的必要优化：

 renderer = new THREE.WebGLRenderer({//开启渲染器的抗锯齿antialias: true,logarithmicDepthBuffer: true,});

加载器中对模型子集进行遍历，将颜色通道和贴图通道重新设定

gltf.scene.traverse(function (child) {if (child.isMesh) {child.material.emissive = child.material.color;child.material.emissiveMap = child.material.map;}});

three.js 模型详解和外部模型详解相关推荐

three相机在模型上_实例讲解Three.js加载外部模型
本文主要介绍了Three.js外部模型加载的教程详解,在文章给大家补充介绍了three.js 外部模型加载json的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 1. 首 ...
three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
Three.js加载外部模型骨骼动画
加载外部模型骨骼动画上节课是通过Threejs程序创建一个骨骼动画然后解析播放,本节课是加载解析一个外部的骨骼动画模型文件. 查看骨骼动画数据在解析模型骨骼动画之前,先加载外部的三维模型,查看骨骼 ...
【OpenCV 4开发详解】颜色模型与转换
通用模板本文首发于"小白学视觉"微信公众号,欢迎关注公众号本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本Ope ...
[转]Hadoop集群_WordCount运行详解--MapReduce编程模型
Hadoop集群_WordCount运行详解--MapReduce编程模型下面这篇文章写得非常好,有利于初学mapreduce的入门 http://www.nosqldb.cn/1369099810 ...
tensorflow.js基本使用截断模型、引入外部模型（七）
图标识别 import $ from 'jquery'; import * as tf from '@tensorflow/tfjs'; import { img2x, file2img } from ...
Three.js 开发之加载外部GLTF模型和压缩（一）
Three.js 开发3D智慧楼宇(Vue) 在VUE项目里使用three.js搭建智慧园区和楼宇,控制空调.灯光.窗帘的开关等设备,实现智能化楼宇. 环境搭建除了vue项目所需要的基本依赖,可用v ...
数仓-维度模型之维度迟到问题处理详解
数仓-维度模型之维度迟到问题处理详解摘要:在数据仓库项目中,从贴源层(ODS)更新到数据仓库层(DW)时,出现了拉链形式的维表数据更新不及时的情况,从而导致事实表中的该维度列值为空或旧值.需要根据维 ...
机器学习模型评估指标ROC、AUC详解
我是小z ROC/AUC作为机器学习的评估指标非常重要,也是面试中经常出现的问题(80%都会问到).其实,理解它并不是非常难,但是好多朋友都遇到了一个相同的问题,那就是:每次看书的时候都很明白,但回过 ...

three.js 模型详解和外部模型详解

three.js 模型详解和外部模型详解相关推荐

最新文章

热门文章