1. 首页
  2. three.js

Three.jsgltf加载程序在尝试添加3D文本时出现异常行为

想法是加载Blender中制作的预构建gltf场景。然后使用ttf加载程序添加一些3D文本并对其进行操作。我尝试使用示例中的代码,当我单独使用它们时,每个加载程序都能完美地工作。但当我把它们组合成一个脚本时,真正奇怪的事情开始发生了。当我先添加gltf场景,然后再添加3D文本时,文本会神奇地消失。控制台什么也没说。我试图改变装载顺序。当我在gltf之后加载文本时,gltf的内容消失,唯一的文本保持可见。截图。1n控制台显示:nthree.module.js:16177 Uncaught TypeError: Cannot read property \”type\” of undefinedat WebGLIndexedBufferRenderer.setIndex (three.module.js:16177)at WebGLRenderer.renderBufferDirect (three.module.js:23910)at renderObject (three.module.js:24601)at renderObjects (three.module.js:24571)at WebGLRenderer.render (three.module.js:24350)at render (main.js:73)at onAnimationFrame (:116:3)at :85:5n通过逐项排除,我发现只有当gltf中有多个3D几何体对象时才会发生这种情况。当gltf中只有一个几何体对象时,一切正常。我认为有些东西和对象的内部顺序有关,但我不知道如何解决这个问题。有人能解释一下我做错了什么吗?n代码如下:n*import { GLTFLoader } from \”./jsm/loaders/GLTFLoader.js\”;import * as THREE from \”./libs/three.module.js\”;import { TTFLoader } from \”./jsm/loaders/TTFLoader.js\”;var container;var camera, cameraTarget, scene, renderer;var = = = = = = new THREE.MeshPhongMaterial({\”color\”: = new THREE.WebGLRenderer( { antialias: true} );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, = new THREE.TextBufferGeometry( text, {font: font,size: size,height: height,curveSegments: curveSegments,bevelThickness: bevelThickness,bevelSize: bevelSize,bevelEnabled: true} = =>n!!!TEST!!!nFull project with all dependencies is here 2 Solved by donmccurdy in post #2 Can\”t guarantee this is the cause, but you\”re importing libs/three.module.js while GLTFLoader and TTFLoader both depend on the copy in build/three.module.js. That means you\”ll have two copies of three.js on the page, and are adding objects loaded by one to a Scene created by the other, which could l…nCan\”t guarantee this is the cause, but you\”re importing libs/three.module.js,而GLTFLoader和TTFLoader都依赖于*build/three.module.js中的副本。这意味着你将有两份three.js在页面上,正在将一个加载的对象添加到另一个创建的场景中,这可能会导致许多奇怪的问题。尝试从build/导入三个?n问题解决了!非常感谢你!n Three.js gltf loader strange behavior when trying to add 3D textn

Three.jsgltf加载程序在尝试添加3D文本时出现异常行为 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-jsgltf%e5%8a%a0%e8%bd%bd%e7%a8%8b%e5%ba%8f%e5%9c%a8%e5%b0%9d%e8%af%95%e6%b7%bb%e5%8a%a03d%e6%96%87%e6%9c%ac%e6%97%b6%e5%87%ba%e7%8e%b0%e5%bc%82%e5%b8%b8%e8%a1%8c%e4%b8%ba/