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)

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值