HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Three.js - Hello Cube 应用程序

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

HTML

<!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 应用发挥作用的地方。下面的代码在屏幕中间渲染一个立方体。所有这些代码都将放入空的 <script>标签在 HTML 中。

const width = window.innerWidth
const height = window.innerHeight
// 场景
const scene = new THREE.Scene()
scene.background = new THREE.Color('#00b140')
// 相机
const fov = 45 // 又称​​视场
const aspects = window.innerWidth / window.innerHeight
const near = 0.1 // 近裁剪面
const far = 100 // 远裁剪面
const camera = new PerspectiveCamera(fov, aspect, near, far)
camera.position.set(0, 0, 10)
// 渲染器
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)
// 渲染场景
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, aspects, 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)
constmaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: true,
})
const cube = new THREE.Mesh(geometry,material)
scene.add(cube)

上面的代码在屏幕中心创建了一个简单的立方体。我们可以使用 THREE.Mesh 制作任何对象。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 中的引用容器。

hello-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
         // 尺寸
         const width = window.innerWidth
         const height = window.innerHeight
         // 场景
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // 相机
         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)
         // 渲染器
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // 渲染场景
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
      </script>
   </body>
</html>

输出

如果一切正常，输出结果如下所示。尝试使用代码以更好地了解其工作原理。

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

❮ 上一节 下一节 ❯