Three初始化

1、创建场景

2、创建相机

3、创建物体；添加到场景

4、创建渲染器；加入页面；渲染场景和相机

1.创建场景

const scene = new THREE.Scene();

2.创建相机

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

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

3.创建物体；添加到场景

// 创建物体
const gemotry = new THREE.BoxGeometry(1,1,1);
const material =  new THREE.MeshBasicMaterial({color:0x00ff00})
const cube = new THREE.Mesh(gemotry,material);
scene.add(cube);

4.创建渲染器；加入页面；渲染场景和相机

// 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight );

// 添加到body页面
document.body.appendChild( renderer.domElement );
renderer.render(scene,camera);

完整代码：

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);
scene.add(camera)

// 创建物体
const gemotry = new THREE.BoxGeometry(1,1,1);
const material =  new THREE.MeshBasicMaterial({color:0x00ff00})
const cube = new THREE.Mesh(gemotry,material);
scene.add(cube);

// 物体2
var geometry1 = new THREE.CapsuleGeometry( 1, 1, 4, 8 ); 
geometry1.translate(2,2,1)
geometry1.rotateX (360);
const material2 = new THREE.MeshBasicMaterial( {color: 0xea8685} ); 
const capsule = new THREE.Mesh( geometry1, material2 ); scene.add( capsule );

// 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight );
// 添加到body页面
document.body.appendChild( renderer.domElement );
renderer.render(scene,camera);