Three.js - Hello Cube 应用程序

与任何其他编程语言一样，让我们​​通过创建“Hellocube!”来开始学习 Three.js。应用程序。

超文本标记语言

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charset="UTF-8" />
      <title>Three.js - Hello cube</title>
      <style>
         /* Our CSS goes here */
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>
   </head>
   <body>
      <div id="threejs-container">
         <!-- Our output to be rendered here →
      </div>
      <script type="module">
         // our JavaScript code goes here
      </script>
   </body>
</html>

正如您所看到的，它只是一个带有 Three.js CDN 的简单 HTML 文件。

CSS

<style>
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
   Oxygen,
   Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
html,
body {
   height: 100vh;
   width: 100vw;
}
#threejs-container{
   position: block;
   width: 100%;
   height: 100%;
}
</style>

上面的CSS只是HTML页面的基本样式。Threejs-容器占据了整个屏幕。

JavaScript

这就是我们的 Three.js 应用程序发挥作用的地方。下面的代码在屏幕中间渲染一个立方体。所有这些代码都将进入 HTML 中的空 <script> 标记。

const width = window.innerWidth
const height = window.innerHeight
// Scene
const scene = new THREE.Scene()
scene.background = new THREE.Color('#00b140')
// Camera
const fov = 45 // AKA Field of View
const aspect = window.innerWidth / window.innerHeight
const near = 0.1 // the near clipping plane
const far = 100 // the far clipping plane
const camera = new PerspectiveCamera(fov, aspect, near, far)
camera.position.set(0, 0, 10)
// Renderer
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// Creating a cube
const geometry = new THREE.BoxGeometry(2, 2, 2)
const material = new THREE.MeshBasicMaterial({ wireframe: true })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
// Rendering the scene
const container = document.querySelector('#threejs-container')
container.append(renderer.domElement)
renderer.render(scene, camera)

让我们一次一步地讨论代码，然后您可以在接下来的章节中获得有关每个元素的更多信息。我们需要做的第一件事是创建场景、相机和渲染器。这些是构成每个 Three.js 应用程序的基本组件。

现场

const scene = new THREE.Scene()
scene.background = new THREE.Color('#262626')

场景作为我们在屏幕上看到的所有内容的容器，如果没有 THREE.Scene 对象，Three.js 就无法渲染任何内容。背景颜色是深灰色，这样我们就可以看到立方体。

相机

const camera = new PerspectiveCamera(fov, aspect, near, far)
camera.position.set(0, 0, 10)

相机对象定义了渲染场景时我们将看到的内容。相机的类型不多，但类型不同，但在本例中，您将使用 PerspectiveCamera，它与我们的眼睛观察世界的方式相匹配。

渲染器

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

渲染器对象负责根据相机计算场景在浏览器中的外观。渲染器有不同类型，但我们主要使用 WebGLRenderer，因为大多数浏览器都支持 WebGL。

除了创建渲染器实例之外，我们还需要设置渲染应用程序的大小。最好使用我们想要用我们的应用程序 The Cube 填充的区域的宽度和高度 - 在本例中是浏览器窗口的宽度和高度。

立方体

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

上面的代码在屏幕中央创建了一个简单的立方体。我们可以使用 THREE.Mesh 制作任何物体。网格需要两个对象：几何体和材质。网格的几何形状定义了其形状，材料决定了对象的表面属性。

要创建立方体，我们需要 BoxGeometry 和颜色为 0xffffff 的主要材质 (MeshBasicMaterial)。如果将wireframe属性设置为true，它会告诉Three.js向我们显示一个线框而不是一个实体对象。

渲染场景

const container = document.querySelector('#threejs-container')
container.append(renderer.domElement)
renderer.render(scene, camera)

例子

最后但并非最不重要的一点是，我们将渲染器元素添加到 HTML 文档中。渲染器使用 <canvas> 元素向我们显示场景。在这种情况下，渲染器将 <canvas> 元素附加到 HTML 中的引用容器。

你好-cube-app.html

现场演示 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js – Hello cube</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
            Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            overflow: hidden;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Hello Cube App
         // Your first Three.js application
         // sizes
         const width = window.innerWidth
         const height = window.innerHeight
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // camera
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         // cube
         const geometry = new THREE.BoxGeometry(2, 2, 2)
         const material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true
         })
         const cube = new THREE.Mesh(geometry, material)
         scene.add(cube)
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // rendering the scene
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
      </script>
   </body>
</html>

输出

如果一切正常，输出看起来像这样。尝试一下代码以更好地理解它的工作原理。

您现在已经完成了第一个 Three.js 应用程序的创建。让我们继续为应用程序添加更多美感。