罗湖商城网站设计制作wordpress侧边目录

当前位置： 首页 > news >正文

罗湖商城网站设计制作,wordpress侧边目录,wordpress+信息流,网站建设公司运营计划13. Threejs案例-绘制3D文字 实现效果 知识点 FontLoader 一个用于加载 JSON 格式的字体的类。 返回 font#xff0c;返回值是表示字体的 Shape 类型的数组。 其内部使用 FileLoader 来加载文件。 构造器 FontLoader( manager : LoadingManager ) 参数类型描述managerLo…13. Threejs案例-绘制3D文字 实现效果 知识点 FontLoader 一个用于加载 JSON 格式的字体的类。 返回 font返回值是表示字体的 Shape 类型的数组。 其内部使用 FileLoader 来加载文件。 构造器 FontLoader( manager : LoadingManager ) 参数类型描述managerLoadingManager加载器所使用的loadingManager默认值为THREE.DefaultLoadingManager。 方法 load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined 参数类型描述urlString文件的URL或者路径也可以为 Data URI。onLoadFunction将在加载完成时调用。参数是将要被加载的font。onProgressFunction将在加载过程中调用。参数是包含total和loaded字节的XMLHttpRequest实例。onErrorFunction将在加载错误时调用。 TextGeometry (文本缓冲几何体) 一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本以及由加载的 font (字体) 和该几何体 ExtrudeGeometry 父类中的设置所组成的参数来构造的。 构造器 TextGeometry(text : String, parameters : Object) 参数类型描述textString将要显示的文本。parametersObject参数对象。 parameters 包含有下列参数的对象 参数类型描述fontFontTHREE.Font的实例。sizeFloat字体大小默认值为100。heightFloat挤出文本的厚度默认值为50。curveSegmentsInteger曲线上点的数量默认值为12。bevelEnabledBoolean是否开启斜角默认为false。bevelThicknessBoolean文本上斜角的深度默认值为20。bevelSizeFloat斜角与原始文本轮廓之间的延伸距离默认值为8。bevelSegmentsInteger斜角的分段数默认值为3。 属性 boundingBox : Box3 当前 bufferGeometry 的外边界矩形。 可以通过 .computeBoundingBox() 计算。 默认值是 null。 方法 computeBoundingBox () : undefined 计算当前几何体的的边界矩形该操作会更新已有 param:.boundingBox。 边界矩形不会默认计算需要调用该接口指定计算边界矩形否则保持默认值 null。 setAttribute ( name : String, attribute : BufferAttribute ) : this 为当前几何体设置一个 attribute 属性。 在类的内部有一个存储 attributes 的 hashmap通过该 hashmap遍历 attributes 的速度会更快。 而使用该方法可以向 hashmap 内部增加 attribute。 所以你需要使用该方法来添加 attributes。 addGroup ( start : Integer, count : Integer, materialIndex : Integer ) : undefined 为当前几何体增加一个 group详见 groups 属性。 applyMatrix4 ( matrix : Matrix4 ) : this 用给定矩阵转换几何体的顶点坐标。 center () : this 根据边界矩形将几何体居中。 clone () : BufferGeometry 克隆当前的 BufferGeometry。 copy ( bufferGeometry : BufferGeometry ) : this 将参数指定的 BufferGeometry 的值拷贝到当前 BufferGeometry 中。 clearGroups () : undefined 清空所有的 groups。 computeBoundingSphere () : undefined 计算当前几何体的的边界球形该操作会更新已有 param:.boundingSphere。 边界球形不会默认计算需要调用该接口指定计算边界球形否则保持默认值 null。 computeTangents () : undefined 计算并向此 geometry 中添加 tangent attribute。 只支持索引化的几何体对象并且必须拥有 position(位置)normal(法向)和 uv attributes。 如果使用了切线空间法向贴图最好使用 BufferGeometryUtils.computeMikkTSpaceTangents 中的 MikkTSpace 算法。 computeVertexNormals () : undefined 通过面片法向量的平均值计算每个顶点的法向量。 dispose () : undefined 从内存中销毁对象。 如果在运行是需要从内存中删除 BufferGeometry则需要调用该函数。 getAttribute ( name : String ) : BufferAttribute 返回指定名称的 attribute。 getIndex () : BufferAttribute 返回缓存相关的 index。 hasAttribute ( name : String ) : Boolean 检查是否存在有指定名称的 attribute如果有返回 true。 lookAt ( vector : Vector3 ) : this 旋转几何体朝向控件中的一点。 该过程通常在一次处理中完成不会循环处理。 典型的用法是过通过调用 Object3D.lookAt 实时改变 mesh 朝向。 normalizeNormals () : undefined 几何体中的每个法向量长度将会为 1。 这样操作会更正光线在表面的效果。 deleteAttribute ( name : String ) : BufferAttribute 删除具有指定名称的 attribute。 rotateX ( radians : Float ) : this 在 X 轴上旋转几何体。 该操作一般在一次处理中完成不会循环处理。 典型的用法是通过调用 Object3D.rotation 实时旋转几何体。 rotateY ( radians : Float ) : this 在 Y 轴上旋转几何体。 该操作一般在一次处理中完成不会循环处理。 典型的用法是通过调用 Object3D.rotation 实时旋转几何体。 rotateZ ( radians : Float ) : this 在 Z 轴上旋转几何体。 该操作一般在一次处理中完成不会循环处理。 典型的用法是通过调用 Object3D.rotation 实时旋转几何体。 scale ( x : Float, y : Float, z : Float ) : this 缩放几何体。 该操作一般在一次处理中完成不会循环处理。 典型的用法是通过调用 Object3D.scale 实时缩放几何体。 setIndex ( index : BufferAttribute ) : this 设置缓存的 index。 setDrawRange ( start : Integer, count : Integer ) : undefined 设置缓存的 drawRange。 setFromPoints ( points : Array ) : this 通过点队列设置该 BufferGeometry 的 attribute。 toJSON () : Object 返回代表该 BufferGeometry 的 JSON 对象。 toNonIndexed () : BufferGeometry 返回已索引的 BufferGeometry 的非索引版本。 translate ( x : Float, y : Float, z : Float ) : this 移动几何体。 该操作一般在一次处理中完成不会循环处理。 典型的用法是通过调用 Object3D.translate 实时移动几何体。 代码 !DOCTYPE html html langzh headtitle/titlemeta charsetUTF-8script srcThreeJS/three.js/scriptscript srcThreeJS/jquery.js/script/head body div idmyContainer/div script typetext/javascript// 创建一个WebGL渲染器实例并开启抗锯齿处理 const myRenderer new THREE.WebGLRenderer({antialias: true});// 设置渲染器的大小为窗口的宽度和高度 myRenderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素 (即canvas元素) 添加到ID为myContainer的HTML元素中 $(#myContainer).append(myRenderer.domElement);// 创建一个新的Three.js场景 const myScene new THREE.Scene();// 设置场景的背景颜色为白色 myScene.background new THREE.Color(white);// 创建一个透视相机设置其视野角度、长宽比、近裁剪面和远裁剪面 const myCamera new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);// 设置相机的初始位置 myCamera.position.set(0, 40, 700);// 将相机添加到场景中使其成为场景的一部分 myScene.add(myCamera);// 加载字库并绘制字母 const myFontLoader new THREE.FontLoader();myFontLoader.load(Data/optimer_bold.typeface.json, function (font) {// 使用加载的字库创建几何体 (这里是字母three.js) const myGeometry new THREE.TextGeometry(three.js, {font: font, size: 160});// 计算当前几何体的范围 (边界框) myGeometry.computeBoundingBox();// 计算字母 (几何体) 当前中心的偏移量以确保字母位于其边界框的中心位置 const myOffsetX (myGeometry.boundingBox.max.x - myGeometry.boundingBox.min.x) / 2;const myOffsetY (myGeometry.boundingBox.max.y - myGeometry.boundingBox.min.y) / 2;// 创建一个基本材质设置其颜色为蓝色 (0x0000ff是蓝色的十六进制代码) const myMaterial new THREE.MeshBasicMaterial({color: 0x0000ff});// 使用几何体和材质创建一个新的网格 (Mesh) 对象即字母模型 (这里是字母three.js) const myTextMesh new THREE.Mesh(myGeometry, myMaterial);// 设置字母模型的位置使其位于其几何体的中心点 (即边界框的中心) myTextMesh.position.x myGeometry.boundingBox.min.x - myOffsetX;myTextMesh.position.y myGeometry.boundingBox.min.y myOffsetY;// 将字母模型添加到场景中使其显示在屏幕上 myScene.add(myTextMesh);});//渲染绘制的字母animate();function animate() {requestAnimationFrame(animate);myCamera.lookAt(new THREE.Vector3(0, 150, 0));myRenderer.render(myScene, myCamera);} /script /body /html 演示链接 示例链接