1. Three.js official website

background:

threejs is a foreign website, and access is sometimes laggy, so it is recommended to start the localized deployment to facilitate access and learning at any time.

Deployment plan:

1. Visit Threejs official website

2. Click on github to select the dev version to download

3. After downloading, unzip it. Open with Visual Studio Code.

4. Visual Studio Code runs the terminal terminal, first install Npm, and then view package.json to view the startup command.

//安装npm 
npm install
//启动
npm run dev

5. Start successfully, visit localhost:8080

docs is document explanation (Chinese and English)

In the examples case, you can find the html code according to the path to view the implementation plan.

editor editor, objects can be created and viewed and edited

2. Parcel introduction:

Parcel - Web application packaging tool |

Actual combat:

1. Create a new project: Open it in the terminal: npm init generates a package.json file

PS E:\study\WebGLThree\代码\01-THREE_BASIC> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (01-three_basic)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\study\WebGLThree\代码\01-THREE_BASIC\package.json:

{
  "name": "01-three_basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
PS E:\study\WebGLThree\代码\01-THREE_BASIC>

package name: (01-three_basic) project name
version: (1.0.0) version
description: description
entry point: (index.js)
test command:
git repository:
keywords:
author: author

2. Install Parcel dependencies

npm install parcel-bundler

3. Configure the package.json configuration file

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

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

3. Construction of project framework

Without further ado, let's go to the code

Install Three dependencies

npm install three --save

1. Home page display

<!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>Document</title>
    <link rel="stylesheet" href="./assets/css/style.css"> 
</head>
<body>
    <script src="./main/main.js" type="module"></script>
</body>
</html>

2. The main js creates the process of generating objects

import * as THREE from "three";

//console.log(THREE);
//1、创建场景
const scene = new THREE.Scene();

//2、创建相机
const camere = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//透视相机(角度，屏幕宽高比、近端、远端)
//3、设置相机位置（x,y,z）
camere.position.set(0,0,10);
//4、将相机添加到场景当中
scene.add(camere);

//5、添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xfff00});

//6、根据几何体和材质 创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//将几何体添加到场景当中
scene.add(cube);


//7、初始化渲染器
const renderer = new THREE.WebGLRenderer();
//8、设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//console.log(renderer);
//9、将webgl渲染的Canvas内容添加到body
document.body.appendChild(renderer.domElement);

//10、使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camere);

3. Style control

#取消全局边距
* {
    margin: 0;
    padding: 0;
}
#设置body的颜色天空蓝
body {
    background-color: skyblue;
}

4. package.json settings

{
  "name": "01-three_basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "three": "^0.148.0"
  }
}

2. Threejs official website localization deployment startup and Parcel hot loading: introduction and use of web application packaging tools