vue使用threejs加载模型问题整理

1 如果出现错误 "THREE.WebGLRenderer: Error creating WebGL context.需要开启浏览器的gpu加速(GPU-acceleration);地址栏输入:chrome://flags/#ignore-gpu-blacklist,将GPU-acceleration设置可用2 出现错误:Uncaught Error: THREE.OBJLoader: Unex

杨大大28

7176人浏览 · 2021-09-29 20:08:52

杨大大28 · 2021-09-29 20:08:52 发布

1 如果出现错误 "THREE.WebGLRenderer: Error creating WebGL context.

需要开启浏览器的gpu加速(GPU-acceleration);地址栏输入:chrome://flags/#ignore-gpu-blacklist,将GPU-acceleration设置可用

2 出现错误:Uncaught Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"

该错误出现在vue脚手架项目中，使用objloader加载obj模型路径时候，错误路径如下:

let path="/statics/models/obj/IronMan/";

正确方式:

const assetsUrl = process.env.BASE_URL + process.env.VUE_APP_ASSETS;
const path=assetsUrl+"/models/obj/IronMan/";

3 出现解析失败错误:

解析失败 TypeError: Class constructor Loader cannot be invoked without 'new'

出现该问题，是加载器引入不正确，用以下方式解决

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

天启AI社区

GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。

更多推荐