首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >导入3D模型Threejs

导入3D模型Threejs
EN

Stack Overflow用户
提问于 2019-06-02 19:38:21
回答 1查看 405关注 0票数 0

我试着导入一个3D模型,但我不确定我这样做的方式是否正确。

代码语言:javascript
复制
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是

代码语言:javascript
复制
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript" src="js/GLTFLoader.js"></script>

我在这个页面下载了这个模型:

link

我特别下载了以下三个文件:

CesiumMilkTruck.gltf

CesiumMilkTruck.png

CesiumMilkTruck0.bin

我有这样的错误:

代码语言:javascript
复制
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。

EN

回答 1

Stack Overflow用户

发布于 2019-06-02 20:53:55

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

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

在下面的代码中,我加载了一个直升机模型,旋转它的线框,并将其添加到包含第一人称相机的组中,这样就好像你正在驾驶一架直升机。

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

代码语言:javascript
复制
const GLTFLoader = require('three-gltf-loader'),
      miniModelLoader = new GLTFLoader();
代码语言:javascript
复制
// 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 );
} )
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56414650

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档