three.js
入门参考
https://blog.csdn.net/weixin_48594833/article/details/128905795
3D模型格式
Threejs支持了许多格式的3D模型导入
包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。
推荐使用glTF(gl传输格式)。.GLB和.GLTF是这种格式的这两种不同版本
以下是一些three.js支持的3D模型格式:
-
OBJ格式(Wavefront Object):OBJ是一种广泛使用的3D模型格式,可以保存3D模型的几何形状、材质和纹理信息。
-
FBX格式(Autodesk Filmbox):FBX是由Autodesk开发的通用3D模型格式,可以包含几乎所有3D对象的信息,如几何形状、材质、动画、光照和物理特性等。
-
STL格式(Stereolithography):STL是一种常用的3D打印文件格式,它将3D模型表示为一系列平面三角形,用于描述3D物体的表面形状。
-
GLTF格式(GL Transmission Format):GLTF是一种开放标准的3D文件格式,可以保存3D模型的几何形状、材质、动画和场景信息等,并支持PBR材质和纹理。
-
Collada格式(COLLAborative Design Activity):Collada是一种用于交换3D模型和场景数据的开放标准格式,可以包含几何形状、材质、动画、光照和物理特性等信息。
-
PLY格式(Polygon File Format):PLY是一种常用的3D扫描文件格式,用于保存3D点云和三角形网格数据。
除此之外,three.js还支持其他一些3D模型格式,如3DS、MD2、MD5、BVH、IQM等。
three.js核心对象
Scene(场景)
Camera(相机)
Light(光源)
Mesh(模型)
Renderer(渲染器)
学习网址
GitHub
https://github.com/mrdoob/three.js
使用动画引擎Tween.js来创建动画
为了使程序编写更容易一些,我们可以使用动画引擎来实现动画效果。和three.js紧密结合的动画引擎是Tween.js,你可以在https://github.com/sole下载。
对于快速构件动画来说,Tween.js是一个容易上手的工具。首先,你需要引擎js文件,如下:
<-script src="../js/tween.min.js" data-ke-src="../js/tween.min.js"><-/script>
第二步,就是构件一个Tween对象,对Tween进行初始化,本例的代码是:
function initTween() { new TWEEN.Tween( mesh.position) .to( { x: -400 }, 3000 ).repeat( Infinity ).start(); }
TWEEN.Tween的构造函数接受的是要改变属性的对象,这里传入的是mesh的位置。Tween的任何一个函数返回的都是自身,所以可以用串联的方式直接调用各个函数。
to函数,接受两个参数,第一个参数是一个集合,里面存放的键值对,键x表示mesh.position的x属性,值-400表示,动画结束的时候需要移动到的位置。第二个参数,是完成动画需要的时间,这里是3000ms。
repeat( Infinity )表示重复无穷次,也可以接受一个整形数值,例如5次。
Start表示开始动画,默认情况下是匀速的将mesh.position.x移动到-400的位置。
第三步是,需要在渲染函数中去不断的更新Tween,这样才能够让mesh.position.x移动位置:
function animation() { renderer.render(scene, camera); requestAnimationFrame(animation); stats.update(); TWEEN.update(); }
其中的TWEEN.update()完成了让动画动起来到目标。如果不调用这个函数场景就不能动起来了。
认识相机
在Threejs中相机的表示是THREE.Camera,它是相机的抽象基类,其子类有两种相机,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。
正投影和透视投影的区别是:
透视投影有一个基本点,就是远处的物体比近处的物体小。
正投影,远近高低比例都相同。
使用经验
1.文本缓冲几何体(TextGeometry)
一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本,以及由加载的font(字体)和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。
必须要加载字体并使用font才可以显示,(替换时需要重新创建并渲染?)。
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; //或者是'three/examples/jsm/geometries/TextGeometry.js';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
const loader = new FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
const geometry = new TextGeometry( 'Hello three.js!', {
font: font, //必须要有
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
} );