0基础学three.js环境搭建(2)

news2024/11/18 23:25:40

这是0基础学three.js系列中的第二篇，在这篇里面我会带着大家把开发环境搭建起来，关于开发环境，方式很多，如果你没有基础，就跟着我的步骤一步一步来，保你不出错。

首先安装node环境，关于node是干啥的，先不要管，装上就行了，只需要这一个环境，别的都不需要。

安装node环境：Node.js 安装配置 | 菜鸟教程

安装好node环境之后，开始搭建three.js项目。

首先创建一个文件夹three_day01。然后在命令行界面打开该文件夹。然后在命令行界面运行npm init -y初始化文件，先不要管这个命令是干嘛的，运行就行了。运行完之后，会在day01文件夹下面生成一个package.json文件。先不要管这个文件是干嘛，别动他就行了。然后在回到命令行界面安装three.js环境。

npm install three//安装three环境。

运行命令

npm install -D parcel-bundler

然后打开three_day01文件夹，首先创建index.html文件，在创建一个app.js文件，上述操作全部完成之后，文件夹内容如下

现在开始，首先编辑app.js文件，放入以下内容。

import * as THREE from 'three';

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

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.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);

camera.position.z = 5;

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

animate();

编辑index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js project</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

更新package.json，将package.json文件夹里面的代码替换如下

{
  "name": "three_day01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html"
},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "three": "^0.156.1"
  }
}

然后回到命令行运行npm start启动项目。至此项目搭建完毕，已经可以运行了，关于上面的代码先不要注重，先把环境搭建起来，后面每一行代码我都会详细的讲解的，关于上面的代码我也是从别的地方借鉴的，只要是运行起来，是一个绿色的正方体，项目就完成了。