Three.js入门教程：使用代码实现引入模型的例子

最新推荐文章于 2024-04-28 16:56:29 发布

给钱，谢谢！

最新推荐文章于 2024-04-28 16:56:29 发布

阅读量1.1k

点赞数

分类专栏： threejs 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43073383/article/details/131000683

版权

threejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Three.js是一款基于WebGL的JavaScript 3D图形库，它可以让开发者在浏览器中创建和展示3D图形，包括模型、动画、场景等。本文将介绍如何使用Three.js入门，并通过一个实例来演示如何引入一个模型。

一、环境搭建

在使用Three.js之前，需要先搭建好开发环境。首先，需要在HTML文件中引入Three.js库：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

然后，需要在JavaScript文件中创建一个场景、相机和渲染器：

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

二、创建模型

在Three.js中，可以通过加载外部模型文件来创建模型。常见的模型文件格式包括OBJ、FBX、GLTF等。本文以GLTF格式为例，演示如何引入一个模型。

首先，需要在HTML文件中引入GLTFLoader.js库：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>

然后，在JavaScript文件中创建一个GLTFLoader对象，并使用它加载模型文件：

// 创建GLTFLoader对象
const loader = new THREE.GLTFLoader();

// 加载模型文件
loader.load('model.gltf', function(gltf) {
  scene.add(gltf.scene);
}, undefined, function(error) {
  console.error(error);
});

其中，'model.gltf’是模型文件的路径，gltf.scene是模型的根节点，可以通过scene.add()方法将其添加到场景中。

三、渲染场景

最后，需要在JavaScript文件中添加一个渲染函数，用于在每一帧更新场景并渲染：

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

render();

至此，一个简单的Three.js场景就创建完成了。完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js入门</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
    <script>
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 创建GLTFLoader对象
      const loader = new THREE.GLTFLoader();

      // 加载模型文件
      loader.load('model.gltf', function(gltf) {
        scene.add(gltf.scene);
      }, undefined, function(error) {
        console.error(error);
      });

      // 渲染场景
      function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }

      render();
    </script>
  </body>
</html>

需要注意的是，由于Three.js是基于WebGL的，因此需要浏览器支持WebGL才能正常运行。如果浏览器不支持WebGL，可以考虑使用其他的3D图形库，如Babylon.js等。

给钱，谢谢！

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Three.js入门教程：使用代码实现引入模型的例子

Three.js是一款基于WebGL的JavaScript 3D图形库，它可以让开发者在浏览器中创建和展示3D图形，包括模型、动画、场景等。本文将介绍如何使用Three.js入门，并通过一个实例来演示如何引入一个模型。需要注意的是，由于Three.js是基于WebGL的，因此需要浏览器支持WebGL才能正常运行。在Three.js中，可以通过加载外部模型文件来创建模型。其中，'model.gltf’是模型文件的路径，gltf.scene是模型的根节点，可以通过scene.add()方法将其添加到场景中。
复制链接

扫一扫