// 引入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)
three.js 第三节 - 父子层级、位移、放大、旋转、全屏、取消全屏
于 2024-06-12 14:21:41 首次发布