场景

场景

场景 就是 three.js 提供的一个地方，让你来放置任何你想放的物体，比如 对象、光源、物体等。

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

属性：

属性	描述
children	返回场景中所有对象的列表，包括摄像机和光源
fog	给场景添加雾化效果
overrideMaterial	强制场景中的所有物体使用相同的材质

方法：

方法	描述
add	向场景中添加对象
remove	将对象从场景中移除
traverse	返回场景中的所有物体，包括场景自身
getObjectByName	查找特定名字的对象

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
cube.name = "绿色正方形"

// 添加对象
scene.add(cube)

// 移除对象
setTimeout(() => {
  scene.remove(cube)
  renderer.render(scene, camera)
}, 1000)

// 返回场景中所有物体
scene.traverse(item => console.log(item))

// 查找特定名称的对象
scene.getObjectByName("绿色正方形")

雾化效果

fog 可以给场景添加雾化效果，远处的物体会被淡淡的隐藏。参考掘金博客。

雾有两种方式创建：线性雾 和 指数雾。

const box = new THREE.BoxGeometry(1, 1, 100)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(box, material)
scene.add(cube)

// 设置场景背景颜色
scene.background = new THREE.Color(0xffffff)
// 线性雾
scene.fog = new THREE.Fog(0xffffff, 0.1, 50)
// 指数雾
scene.fog = new THREE.FogExp2(0xffffff, 0.1)

相同材质

overrideMaterial 属性可以把当前场景中的物体材质，全部设置同一个材质。

const scene = new THREE.Scene()

// 所有物体全部设置为 白色
scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff })

渲染器

渲染器（WebGLRenderer）就是通过 WebGL 将我们的物体渲染到浏览器中。

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

document.body.appendChild(renderer.domElement)

页面自适应

默认情况下，页面是不带有页面自适应的，当浏览器屏幕缩小或放大的时候，会有白边出现，可以通过添加浏览器 onSize 事件，更新相机和渲染器尺寸来解决。

function onResize() {
  // 调整渲染器的大小以填充整个窗口
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新相机的纵横比以反映窗口大小的变化
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机的投影矩阵以应用新的纵横比
  camera.updateProjectionMatrix()
}

window.addEventListener("resize", onResize)

全屏/退出全屏

// 全屏
const openFullScreen = () => renderer.domElement.requestFullscreen()

// 退出全屏，默认使用 ESC 也可以退出
const exitFullScreen = () => document.exitFullscreen()