时间戳

首页 > 解决方案 > 导入 3D 模型 Threejs

three.js - 导入 3D 模型 Threejs

问题描述

我尝试导入 3D 模型，但我不确定我是否以正确的方式进行操作。

var loader = new THREE.GLTFLoader();

    loader.load('./CesiumMilkTruck.gltf', 
        function (gltf) {

            scene.add(gltf.scene);
            gltf.animations; 
            gltf.scene;
            gltf.scenes; 
            gltf.cameras; 
            gltf.asset;


        },

        function (xhr) {
            console.log((xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },

        function (error) {
            console.log( 'An error happened = ', error );
        }
    );

我的 html 是

  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript" src="js/GLTFLoader.js"></script>

我在此页面上下载模型：

关联

特别是我下载了三个文件：

CesiumMilkTruck.gltf
CesiumMilkTruck.png

CesiumMilkTruck0.bin

我有这个错误：

An error happened =  SyntaxError: "JSON.parse: unexpected character at 
line 7 column 1 of the JSON data" parse 

file:///C:/Users/an/Desktop/master/js/GLTFLoader.js:157
load file:///C:/Users/an/Desktop/master/js/GLTFLoader.js:75
load file:///C:/Users/an/Desktop/master/js/three.min.js:715

我错了什么？

抱歉我的问题，但这是我第一次使用 Threejs。

标签： three.js

解决方案

可能您的 GLTF 模型有问题，可能已损坏？错误消息会让我相信 GLTF 文件的格式不正确（都是数字）。

这是我使用 Threejs 和 Konva.js 构建的飞行模拟器的代码摘录：https ://github.com/mpaccione/everest_flight_sim

在下面的代码中，我加载了一个直升机模型，将其转为线框，并将其添加到包含第一人称摄像机的组中，这样您就好像在驾驶直升机。

我正在为这个项目使用带有 browserfy 的 commonJS 模块。

const GLTFLoader = require('three-gltf-loader'),
      miniModelLoader = new GLTFLoader();

// Load Helicopter Model
miniModelLoader.load( './src/models/helicopter/scene.gltf', function(gltf){
    miniModel = gltf.scene;
    miniModel.name = "miniHeli"
    miniModel.rotation.y = -90 * Math.PI / 180; // Radians
    miniModel.position.set( 0, 0, 0 );

    let miniModelMesh = miniModel.children[0].children[0].children[0],
        miniModelMeshArr = [ miniModelMesh.children[0], miniModelMesh.children[1], miniModelMesh.children[2] ];

    for (var i = miniModelMeshArr.length - 1; i >= 0; i--) {
        miniModelMeshArr[i].material.wireframe = true;
    }

    miniHeliGroup.add( miniModel );
} )

推荐阅读