three.js gltfloader不用react渲染

发布于 2025-02-12 03:12:26 字数 1520 浏览 0 评论 0 原文

对react和three.js都是很新的，我试图使用方法 const loader = new Gltfloader（）呈现.gltf文件，但是当呈现网站时，我会在浏览器中查看它错误消息，发生了一个错误SyntaxError：意外的令牌＆lt;在位置0 的JSON中，如果有人知道将我指向什么方向，那就太好了。

这是代码

rende.js：

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
export default class Rende extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x424242, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("scene").appendChild(renderer.domElement);

    const loader = new GLTFLoader();
    loader.load(
      "untitled.gltf",
      (gltf) => {
        scene.add(gltf.scene);
      },
      (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
      },
      (error) => {
        console.error("An error happened", error);
      }
    );
 
  }
  render() {
    return <div id="scene" className="potato"></div>;
  }
}

和corexpents组件页面

home.jsx：

export default function Home() {
  return (
    <Fragment>
      {" "}
      <div key={1} className="class">
        tagline
      </div>
      <Rende />
    </Fragment>
  );
}

如果有人可以提供帮助，那将是很多重新计算的。谢谢

原文

am quite new to both react and three.js, im trying to render a .gltf file using the method const Loader = new GLTFLoader() however when the website is rendered and i view it in browser i see the error message, An error happened SyntaxError: Unexpected token < in JSON at position 0, if anyone would know what direction to point me in that would be great.

here's the code

rende.js:

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
export default class Rende extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x424242, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("scene").appendChild(renderer.domElement);

    const loader = new GLTFLoader();
    loader.load(
      "untitled.gltf",
      (gltf) => {
        scene.add(gltf.scene);
      },
      (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
      },
      (error) => {
        console.error("An error happened", error);
      }
    );
 
  }
  render() {
    return <div id="scene" className="potato"></div>;
  }
}

and the coresponding component page

home.jsx:

export default function Home() {
  return (
    <Fragment>
      {" "}
      <div key={1} className="class">
        tagline
      </div>
      <Rende />
    </Fragment>
  );
}

if anyone can help that would be much apreciated.
Thank you