关于threejs按照官网示例无法加载GLTF问题

今天没事干,尝试做一个threejs的小demo出来。

卡在了第一步,没法加载GLTFLoader。

官网上是这样加载的:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

我看到的教程里也是这么加载的

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

。但是当本人刚写进去就爆红,提示在这里插入图片描述
这个文件没了吗?经过一通查找,发现现在根本就没有‘three/addons’这个文件夹。中文教程不更新一下就算了,官网都没更新??

后续是追查到了GitHub仓库,全局搜索了一下,发现该文件在GitHub的源代码中已经更改位置了,现在的位置是在这里插入图片描述

所以出现同样错误的同学,你需要这么导入:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
three.js是一个基于WebGL的JavaScript库,用于创建和展示3D图形。它包含了许多函数和类,可用于和操作3D模型以及创建动画效果。 要gltf示例,我们首先需要在项目中引入three.js库。可以通过在HTML文件中添以下代码来实现: ```html <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script> ``` 接下来,我们需要在JavaScript文件中编写gltf示例的代码。首先,我们需要创建一个场景(scene)和摄像机(camera),用于渲染和观察3D模型。可以使用以下代码创建场景和摄像机: ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; ``` 接下来,我们需要创建一个渲染器(renderer)来将3D场景渲染到屏幕上。可以使用以下代码创建渲染器: ```javascript const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 现在,我们可以开始gltf模型了。可以使用`THREE.GLTFLoader`类来实现。首先,我们需要创建一个loader对象并使用`load`方法来gltf文件。完成后,我们可以获取到模型的场景(scene)并将其添到我们之前创建的场景中,如下所示: ```javascript const loader = new THREE.GLTFLoader(); loader.load('path/to/your/model.gltf', function(gltf) { const model = gltf.scene; scene.add(model); }); ``` 最后,我们需要添一个动画循环来更新场景和渲染器。可以使用以下代码创建一个动画循环: ```javascript function animate() { requestAnimationFrame(animate); // 在此处更新模型的位置、旋转或其他动画效果 renderer.render(scene, camera); } animate(); ``` 通过以上步骤,我们可以成功gltf示例并在网页中展示出来。当然,在此基础上还可以进行更多的操作和定制,例如添灯光、调整模型的外观和材质等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值