THreeJS 快速入门

THreeJS 快速入门

因为 threejs 迭代太快，所有我们需要去下载特定版本的 threejs 包，然后本地启动，查看 API。
THreejs 源码包

1. 本地快速启动 threejs 的方法 vsCode
2. 学习借鉴

THreejs 引入

<script type="module">
  import * as THREE from "../../three.js-r139/build/three.module.js";
  console.log(THREE);
</script>

创建 3D 场景 Scene并创建一个长方体

1. 你可以 Scene 他理解为虚拟的 3D 场景，用来表示模拟生活中的真实三维场景，或者说三维世界。

import * as THREE from "../../three.js-r139/build/three.module.js"; // 模块化导入要加上 type="module"

// 创建一个虚拟的场景
const scene = new THREE.Scene();

/* 创建一个长方形 */
const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个几何图形，几何模型默认在原点
// 材质：几何图形的颜色等
const material = new THREE.MeshBasicMaterial({
    color: 0xff00ff }); // 网格基础材质
// 用几何图形和材质合并出来
const mesh = new THREE.Mesh(geometry, material);
// 把几何图形添加到scene中
scene.add(mesh);

/* 光源 */
const light = new THREE.AmbientLight(0xffffff, 0.5)