three.js开发环境搭建

1. 搭建官网环境

three.js官网在国外，访问速度可能会比较慢甚至无法访问。搭建官网的目的就是为了能够在本地实现快速访问资源。 访问github ,下载整个仓库到本地。

下载好资源后，找到对应的目录，执行 npm i,然后执行 npm run dev 就会在本地打开

2. 搭建本地开发环境

使用parcel快速搭建本地开发环境。

npm init -y
npm install parcel-bundler --save-dev

接着，通过修改你的package.json来添加这些任务脚本

{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

然后，你就能运行它了：

# 以开发模式运行
npm run dev
# 以生成模式运行
npm run build

下载three.js

npm i three

编写three.js的demo

import * as THREE from "three";

// 场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterail = new THREE.MeshBasicMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterail);
scene.add(cube);

// 渲染器
const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);
render.render(scene, camera);