1.需要創(chuàng)建場景

 // 創(chuàng)建場景
const scene = new THREE.Scene();

2.創(chuàng)建相機(jī)

//  創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera()
// 相機(jī)的位置
camera.position.z = 18
camera.position.y = 0

3.創(chuàng)建物體

// 創(chuàng)建立方體
const geometry = new THREE.BoxGeometry();
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

4.創(chuàng)建網(wǎng)格

// 創(chuàng)建網(wǎng)格(把立方體和材質(zhì)放進(jìn)去)
const cube = new THREE.Mesh(geometry, material)
// 把網(wǎng)格放到場景中
scene.add(cube)

5.創(chuàng)建渲染器

// 創(chuàng)建渲染器
const renderer = new THREE.WebGL1Renderer()

6.設(shè)置視圖的寬高

//設(shè)置視圖的寬高
renderer.setSize(window.innerWidth,window.innerHeight)  
this.$refs.container.appendChild(renderer.domElement);

7.進(jìn)行渲染

// 渲染器進(jìn)行渲染(添加場景和相機(jī))
renderer.render(scene, camera)