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模型格式：

  1. OBJ格式（Wavefront Object）：OBJ是一种广泛使用的3D模型格式，可以保存3D模型的几何形状、材质和纹理信息。

  2. FBX格式（Autodesk Filmbox）：FBX是由Autodesk开发的通用3D模型格式，可以包含几乎所有3D对象的信息，如几何形状、材质、动画、光照和物理特性等。

  3. STL格式（Stereolithography）：STL是一种常用的3D打印文件格式，它将3D模型表示为一系列平面三角形，用于描述3D物体的表面形状。

  4. GLTF格式（GL Transmission Format）：GLTF是一种开放标准的3D文件格式，可以保存3D模型的几何形状、材质、动画和场景信息等，并支持PBR材质和纹理。

  5. Collada格式（COLLAborative Design Activity）：Collada是一种用于交换3D模型和场景数据的开放标准格式，可以包含几何形状、材质、动画、光照和物理特性等信息。

  6. PLY格式（Polygon File Format）：PLY是一种常用的3D扫描文件格式，用于保存3D点云和三角形网格数据。

除此之外，three.js还支持其他一些3D模型格式，如3DS、MD2、MD5、BVH、IQM等。

 

 

three.js核心对象

   Scene（场景）

　Camera（相机）

　Light（光源）

　Mesh（模型）

　Renderer（渲染器）

 

 

学习网址

http://www.hewebgl.com/

 

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
	} );
} );

 

posted @ 2017-10-11 10:34  泠风lj  阅读(853)  评论(0)  编辑  收藏  举报