最近在学习three.js，为自己记录一下以防忘记
1.模块化方式引入three.js，引入的是three.module.js
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
2.手写一个红色方块
<script type="module">
import * as THREE from "three";
console.log(THREE.Scene);
//场景设置
const scene = new THREE.Scene();
//创建方块的长，宽，高
const geometry = new THREE.BoxGeometry(50, 50, 50);
//方块的材质
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
//形成方块
const mesh = new THREE.Mesh(geometry, material);
//设置方块的位置
mesh.position.set(0, 10, 0);
//把方块添加到场景中
scene.add(mesh);
//设置画布的大小
const width = 800;
const height = 500;
//相机设置
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
//相机位置
camera.position.set(200, 200, 200);
//相机往指向的方向拍照
camera.lookAt(0, 0, 0);
//渲染器设置
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);
//添加dom元素
document.body.appendChild(renderer.domElement);
</script>
3.打开网页就完成一个红色立体方块的渲染
