WebGL-three.js基本场景搭建

// 引入基本three.js模块包
import * as THREE from 'three'

// 创建3D场景scene
const scene = new THREE.Scene()
// 给三维场景添加物体

// 给一个几何体 长方体 长宽高都是100
const geometry = new THREE.BoxGeometry( 100, 100, 100 )
// 创建一个材质对象
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000, // 红色材质
})
// 创建一个网格模型：表示生活中的物体
const mesh = new THREE.Mesh(geometry,material)
mesh.position.set(0,10,0)
// 把物体mesh添加到场景中
scene.add(mesh)


// 定义相机输出画布的尺寸（单位：像素px）
const width = 800
const height = 500

    // 设置相机的四个参数

// 创建一个透视投影相机
const camera = new THREE.PerspectiveCamera(30,width/height,0.1,3000)
// 设置相机的位置
camera.position.set(200,200,200)
// 相机的视线 观察目标点的坐标
camera.lookAt(mesh.position)

// 创建WebGL渲染器对象
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height) //canvas画布宽高度
renderer.render(scene,camera) //执行一个渲染操作,咔
// 添加至页面
document.body.appendChild(renderer.domElement)