【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景
文章目录
- 环境
- 创建一个项目
- 安装依赖
- 基础 Web 页面
- 概念解释
- 编写代码
- 运行项目
环境
我的环境是 node version 22
创建一个项目
首先，新建一个空的文件夹，然后 npm init -y , 此时会快速生成好默认的 package.json
安装依赖
在新建的项目下用 npm 安装依赖
npm install vitenpm install three
基础 Web 页面
在项目下新建 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Three.js Project</title>
</head>
<body>
<canvas class="webgl"></canvas>
<script type="module" src="./script.js"></script>
</body>
</html>
概念解释
想要使用 ThreeJS 实现一些场景，以下的对象是必要的
- A scene that will contain objects
- Some objects
- A camera
- A renderer
大概的思路是
- 新建场景
- 新建一个立方体，把他加入场景
- 新建一个照相机，加入场景
- 创建渲染器，配置渲染尺寸，说明渲染那个场景，以及用那个摄像头渲染
以下就是在脚本中如何定义并使用这四种对象
编写代码
新建 script.js
import * as THREE from 'three'
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
/**
* Object
*/
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
/**
* Sizes
*/
const sizes = {
width: 800,
height: 600
}
/**
* Camera
*/
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)
运行项目
通过 npm run dev 跑起来看一看
也许你会觉得它并不像个空间上的物体，这是因为，我们的照相机跟物体是水平的
所有的元素，添加到场景时候，位置坐标都是
( 0，0，0 )
我们修改一下材质 wireframe
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
你就会得到如下的画面
