Three 探索 01

🌂

要在浏览器中显示 3D 模型，在 Three.js 中需要以下的基本元素：

場景（Scene）：供其他元素設置的空間。
相機（Camera）：在場景中建立觀察點，並確定觀察方向、角度。
物體（Objects）：在場景中添加被觀察的物體。
光源（Light）：在場景中用來照亮物體的光。
渲染器（Renderer）：將所要呈現的場景渲染到畫面上。

//创建舞台
const scene = new THREE.Scene()
//🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝
//创建一个几何体，它包含材料
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000
})
//几何体是不能被渲染的，只有几何体和材质结合成网格才能被渲染到屏幕上
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
//🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝
//面积
const sizes = {
    width: 800,
    height: 600
}


//创建相机 这个参数1我们称之为视野 参数2称之为宽高比
const camera = new THREE.PerspectiveCamera(75,sizes.width/sizes.height)

//调整相机位置
camera.position.z=4
camera.position.x=1.5

scene.add(camera)

//🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝🥝

// 创建渲染器

const canvas = document.querySelector('.webgl')

const renderer = new THREE.WebGLRenderer({
    canvas:canvas
})
renderer.setSize(sizes.width,sizes.height)
renderer.render(scene,camera)

---

相机位置变化