three.js 第三节 - 父子层级、位移、放大、旋转、全屏、取消全屏

// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10) // 设置相机位置

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
document.body.appendChild(renderer.domElement)


------------------------------------------父子层级、位移、放大、旋转-------------------------------------------------------

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }) // 创建材质
const cube = new THREE.Mesh(geometry, material)
cube.position.set(3, 0, 0) `子元素的位移，是以父元素parentCube为基准的`
// cube.scale.set(2, 2, 2) `放大（父元素有放大的话，子元素最终放大的倍数是：子元素放大倍数 * 父元素放大倍数）`
cube.rotation.x = Math.PI/4 `绕着x轴旋转（父元素有旋转的话，子元素最终旋转的度数是：子元素旋转度数 * 父元素旋转度数）`

`创建cube的父元素`
const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const parentCube = new THREE.Mesh(geometry, parentMaterial)
parentCube.add(cube)
parentCube.position.set(-3, 0, 0) `父元素的位置`
// parentCube.scale.set(2, 2, 2) // 放大
parentCube.rotation.x = Math.PI / 4 // 旋转

scence.add(parentCube)

------------------------------------------父子层级、位移、放大、旋转-------------------------------------------------------


// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

/*
  创建轨道控制器
    参数一：相机，让哪一个相机围绕目标运动；默认目标是原点；立方体在原点处
    参数二：渲染的画布dom对象，用于监听鼠标事件控制相机的围绕运动
*/
const controls = new OrbitControls(camera, document.body)
// 设置带阻尼的惯性
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.01
// 开启后，相机绕着y轴，顺时针自动旋转
// controls.autoRotate = true

// 每一帧根据控制器更新画面
function render() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()

  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(render)

  // 几何体的旋转
  // cube.rotation.x += 0.01
  // cube.rotation.y += 0.01

  renderer.render(scence, camera)
}
render()


-------------------------------------------------------------------------------------------

// 监听窗口的变化
window.addEventListener('resize', () => {
  // 重置渲染器的宽高比
  renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
  // 重置相机宽高比
  camera.aspect = window.innerWidth / 2 / (window.innerHeight / 2)
  // 更新相机投影矩阵
  camera.updateProjectionMatrix()
})

// 添加按钮、全屏的点击事件
let btn = document.createElement('button')
btn.innerHTML = '点击全屏'
btn.style.position = 'absolute'
btn.style.top = '10px'
btn.style.left = '10px'
btn.style.zIndex = '1'
btn.onclick = () => {
  console.log('点击按钮，调用请求全屏的方法')
  // 调用，请求全屏的方法
  // renderer.domElement.requestFullscreen() // 让画布全屏
  document.body.requestFullscreen() // 让body全屏
}
document.body.appendChild(btn)

// 退出全屏的按钮
let cancelBtn = document.createElement('button')
cancelBtn.innerHTML = '退出全屏'
cancelBtn.style.position = 'absolute'
cancelBtn.style.top = '10px'
cancelBtn.style.left = '100px'
cancelBtn.style.zIndex = '1'
cancelBtn.onclick = () => {
  console.log('点击按钮，调用请求全屏的方法')
  // 调用，退出全屏的方法
  document.exitFullscreen()
}
document.body.appendChild(cancelBtn)