three.js（JS 三维模型库）介绍和入门

介绍：

three.js是一个基于WebGL的JavaScript 3D库。它封装了WebGL API，为开发者提供了简单易用的API，以便在Web浏览器中展示3D图形。three.js提供了几个组件、方法和工具，用于创建和处理3D图形，使得开发者可以在Web浏览器中快速创建3D图形和动画，而不需要深入了解WebGL的底层实现。

three.js支持多种类型的3D对象，例如几何体、材质、灯光和相机等。它还提供了许多常用的几何体，例如球体、立方体、圆锥体和圆柱体，这些几何体可以进行旋转、平移和缩放等变换操作。同时，three.js可以创建多种类型的材质，例如基础材质、Lambert材质和Phong材质等，它们可以与几何体组合，形成具有不同表面效果的3D对象。另外，three.js还提供了多种灯光类型，例如环境光、半球光和点光源等，它们可以为场景中的对象添加实际的阴影和光照。

对于初学者来说，three.js提供了基础的例子和代码模板，以便快速入门。同时，three.js社区非常活跃，该社区中有很多的资源和教程，可以帮助新手了解three.js及其应用。如果您对WebGL或3D图形编程感兴趣，并且想要创建出色的3D应用程序，那么学习three.js是一个很好的选择。

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）。

入门：

1. 了解基础知识：在开始使用之前，请确保您已经熟悉JavaScript和基本的3D数学知识。Three.js是一个3D库，它需要一些3D图形的基础知识。

2. 下载并引入three.js：您可以在three.js的官方网站上下载最新的版本。下载后，将three.js文件添加到您的项目中，并通过script标签引入。

   <script src="three.min.js"></script>
   

3. 创建一个场景：使用Three.js，您需要创建一个包含所有3D元素的“场景”。

   const scene = new THREE.Scene();
   

4. 创建一个相机：创建相机是视觉体验的核心部分。通过渲染3D场景，相机创建了一个图像，它可以被渲染和呈现给用户。

   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   

5. 创建一个渲染器：渲染器将3D场景呈现为二维图像，它是通往屏幕上看起来像真实的3D世界的重要一步。

   const renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);
   

6. 创建一个3D对象：使用three.js，可以创建各种3D对象，例如：球体、立方体、圆柱体等，您可以在three.js官方网站上找到完整的对象列表。

   const geometry = new THREE.BoxGeometry();
   const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);
   

7. 渲染场景：最后一步是将视图渲染到屏幕上，实现这一目标的方法是使用我们之前创建的渲染器。

   function animate() {
       requestAnimationFrame(animate);
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;
       renderer.render(scene, camera);
   }
   animate();

怎样在vue项目里使用three.js？

要在Vue项目中使用three.js，您可以按照以下步骤：

1. 创建一个Vue项目：通过Vue CLI，在您的计算机上创建一个Vue项目。

   vue create my-project
   cd my-project
   npm run serve
   

2. 安装three.js：使用npm在您的项目中安装three.js。

   npm install three
   

3. 创建一个Vue组件：在src/components/目录下，创建一个新的Vue组件文件。例如，MyScene.vue。

4. 在Vue组件中引入three.js：在Vue组件中导入three.js，以便在组件中使用它。同时，创建需要在场景中使用的对象、材质和纹理等。

   <template>
     <div id="container"></div>
   </template>
   
   <script>
   import * as THREE from 'three';
   
   export default {
     name: "MyScene",
     mounted() {
       const container = document.getElementById("container");
       const scene = new THREE.Scene();
       const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
       const renderer = new THREE.WebGLRenderer();
       renderer.setSize(container.clientWidth, container.clientHeight);
       container.appendChild(renderer.domElement);
   
       const geometry = new THREE.BoxGeometry(1, 1, 1);
       const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
       const cube = new THREE.Mesh(geometry, material);
       scene.add(cube);
   
       function animate() {
         requestAnimationFrame(animate);
         cube.rotation.x += 0.01;
         cube.rotation.y += 0.01;
         renderer.render(scene, camera);
       }
   
       animate();
     },
   };
   </script>
   

5. 在Vue组件中使用three.js：将上面创建的场景渲染到Vue组件中。

   <style>
     #container {
       width: 100%;
       height: 100%;
       position: fixed;
       top: 0;
       left: 0;
       z-index: -1;
     }
   </style>
   

6. 在App.vue中使用组件：将MyScene.vue组件添加到App.vue组件中。

   <template>
     <div id="app">
       <MyScene />
     </div>
   </template>
   
   <script>
   import MyScene from './components/MyScene.vue';
   
   export default {
     name: 'App',
     components: {
       MyScene,
     },
   };
   </script>
   

7. 运行Vue项目：通过运行npm run serve，您的Vue项目应该能够在浏览器中渲染three.js场景。

   npm run serve

使用three.js写一个最简单的3d图像：

<!-- 引入three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

<!-- 创建一个空白的div -->
<div id="canvas"></div>

<!-- 创建JavaScript代码 -->
<script>
  // 获取div元素
  const container = document.getElementById("canvas");

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

  // 创建一个相机
  const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
  camera.position.z = 5;

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.clientWidth, container.clientHeight);
  container.appendChild(renderer.domElement);

  // 创建一个立方体
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 渲染场景
  function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  render();
</script>