基础学习

1.需要创建场景

 // 创建场景
const scene = new THREE.Scene();

2.创建相机

//  创建相机
const camera = new THREE.PerspectiveCamera()
// 相机的位置
camera.position.z = 18
camera.position.y = 0

3.创建物体

// 创建立方体
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

4.创建网格

// 创建网格(把立方体和材质放进去)
const cube = new THREE.Mesh(geometry, material)
// 把网格放到场景中
scene.add(cube)

5.创建渲染器

// 创建渲染器
const renderer = new THREE.WebGL1Renderer()

6.设置视图的宽高

//设置视图的宽高
renderer.setSize(window.innerWidth,window.innerHeight)  
this.$refs.container.appendChild(renderer.domElement);

7.进行渲染

// 渲染器进行渲染(添加场景和相机)
renderer.render(scene, camera)