当前位置：首页 > news >正文

01-three.js vite基础示例

news 2025/5/15 12:28:50

创建Node.js项目

如果使用 vscode 作为编写工具，那么在英文命名的文件夹中开启终端，通过运行 npm init -y 创建node.js项目。注意，Vite 目前适用于 node 14.18 及以上版本。

创建项目完成后，通过 npm install 在其中添加：

1. Vite

2. Three.js

【文件夹目录格式】

文件补全

【package.json】

{"name": "threejs-test","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"devDependencies": {"vite": "^4.5.0"},"dependencies": {"three": "^0.158.0"}
}

【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</title><link rel="stylesheet" href="./style.css">
</head>
<body><canvas class="webgl"></canvas><script type="module" src="./script.js"></script>
</body>
</html>

【scripts】

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

【效果图】