three.js使用模板 引用下载步骤

npm install three --save

在main.js引入

import * as THREE from "three"

模板  会出来一个黑方块

import * as THREE from 'three';
// 创建场景
const scene=new THREE.Scene();
// 创建相机
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
// 设置相机位置
camera.position.set(0,0,10);
// SourceBuffer.add(camera);
scene.add(camera)
// 添加物体
// 创建几何体
const cubeGeometry=new THREE.BoxGeometry(1,1,1);
const cubeMaterial=new THREE.MeshBasicMaterial({color:0xffff00});
// 根据几何体材质创建物体
const cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
// 将几何体添加到场景
scene.add(cube);
// 初始化渲染器
const renderer=new THREE.WebGLRenderer();
// 设置渲染尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
// console.log(renderer);
document.body.appendChild(renderer.domElement);
// 使用渲染器将，通过相机场景渲染进来
renderer.render(scene,camera);

扩展

使用vscode编辑工具，安装three自动补全插件。

1、确定你安装了node；

2、在终端输入如下命令，安装插件；

npm install --save @types/three

3、插件安装完成后，在js文件同级建立文件jsconfig.json空文件

4、js文件就可以自动补全。