Three.js基础入门：全屏控制

摘要这篇文章介绍了如何在 Vue 3 项目中使用 Three.js 创建一个基础的 3D 场景时实现一键全屏功能。文章重点演示了通过监听按钮点击事件调用renderer.domElement.requestFullscreen()实现画布全屏展示并解释了renderer其实就是Three.js的渲染器附有完整代码与效果演示适合 Three.js 初学者快速上手 Vue 与 3D 技术的结合应用。目录一. 编写代码只看核心代码即可二. 效果展示一. 编写代码template el-button styleposition: fixed; z-index: 10; top: 20px; left: 20px; clickgoToAll点击全屏/el-button /template script setup //导入three.js import * as THREE from three; //导入轨道控制器 import {OrbitControls} from three/examples/jsm/controls/OrbitControls.js //创建场景,场景Scene是所有物体的容器相当于一个三维世界相机和渲染器都基于它工作。 const scene new THREE.Scene() //创建相机 //PerspectiveCamera透视相机模拟人眼透视效果参数依次为 // ①视角fov—— 视野宽度越大看到范围越广类似广角镜头 // ②宽高比aspect—— 通常设为窗口宽/高防止画面变形 // ③近平面near和远平面far—— 相机能看到的最近和最远距离超出范围被裁剪。 const camera new THREE.PerspectiveCamera( 45, //视角视角越大视野越宽看的范围越宽 window.innerWidth / window.innerHeight,//宽高比 0.1,//近平面 1000//远平面 ) //创建渲染器 // 渲染器Renderer负责将场景和相机的内容绘制到 canvas 元素上最终显示在网页中。 // setSize 设置渲染尺寸appendChild 将 canvas 添加到 body 中。 const renderer new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 1. 定义形状这是一个边长为1的立方体数据蓝图 const geometry new THREE.BoxGeometry(1, 1, 1); // 2. 定义外观 const material new THREE.MeshBasicMaterial({color:0x00ff00});//这是一个绿色的材质皮肤 const parentMaterial new THREE.MeshBasicMaterial({color:0xff0000});//这是一个红色的材质皮肤 // 3. 组装成物体(创建网格)将形状和材质结合生成可操作的游戏对象 const cube new THREE.Mesh(geometry, material);//这是一个绿色的立方体 const parentCube new THREE.Mesh(geometry, parentMaterial);//这是一个红色的立方体 // 4. 设置父子关系 parentCube.add(cube);//将cube添加到parentCube构成父子关系 //父元素放大2倍 //parentCube.scale.set(2,2,2);//父元素也放大2倍 //父元素绕着X轴旋转45度 parentCube.rotation.x Math.PI / 4;//PI180度PI/445度 // 5. 设置父、子cube的位置 parentCube.position.set(-3,0,0);//父元素在世界坐标的X轴的-3处 cube.position.set(3,0,0);//子元素在父元素的X轴的3处即世界坐标的原点 //子元素放大2倍 //cube.scale.set(2,2,2); //子元素绕着X轴旋转45度 cube.rotation.x Math.PI / 4;//PI180度PI/445度 // 6. 将网格添加到场景中只有将网格加入场景相机和渲染器才能捕捉到它并显示在屏幕上。 scene.add(parentCube); //scene.add(cube);//注意:由于此时cube包含在父元素parentCube中所以只需要添加parentCube就行了 //设置相机位置 camera.position.z 5;//设置相机在Z轴上的位置为5即相机沿Z轴正方向屏幕外移动5个单位 camera.position.y 2;//设置相机在Y轴上的位置为2即相机沿Y轴正方向向上移动2个单位 camera.position.x 2;//设置相机在X轴上的位置为2即相机沿X轴正方向右侧移动2个单位 camera.lookAt(0, 0, 0);//看向坐标系原点 //添加世界坐标辅助器 const axesHelper new THREE.AxesHelper(5);//5从原点向x,y,z轴三个方向分别伸出5个单位长度 //添加到场景中 scene.add(axesHelper);//将坐标辅助器添加到场景我们就能在页面场景中看到了 //添加轨道控制器 const controls new OrbitControls(camera, renderer.domElement);//将相机、渲染器传入 //设置阻尼惯性 controls.enableDamping true; //渲染函数 // animate 使用 requestAnimationFrame 实现连续动画每帧调用自身形成循环。 // 每帧让立方体绕 X 和 Y 轴旋转 0.01 弧度产生旋转效果。 // renderer.render 执行真正的绘制将当前帧的场景通过相机渲染到屏幕。 function animate(){ requestAnimationFrame(animate); //旋转 //cube.rotation.x 0.01; //cube.rotation.y 0.01; //渲染渲染到页面才能被我们看到 //更新控制器启用阻尼时必须每帧调用,这样才能产生惯性的视觉效果 controls.update(); renderer.render(scene, camera); } //打开页面就触发上述自定义的渲染函数这样就能看到一个旋转的立方体 animate(); //点击进入全屏 const goToAll () { //alert(进入全屏); renderer.domElement.requestFullscreen();//调用“渲染器”的全屏方法 } /script style scoped /* 全局样式重置移除所有元素默认的外边距和内边距确保布局从零开始 */ *{ margin: 0; padding: 0; } /* canvas元素样式作为固定定位的块级元素铺满整个视口 */ canvas{ display: block;/* 将canvas设为块级元素消除行内元素默认的基线间隙 */ position: fixed;/* 固定定位相对于浏览器窗口进行定位滚动时不会移动 */ left: 0;/* 距离窗口左侧0像素 */ top: 0;/* 距离窗口顶部0像素 */ width: 100vw;/* 宽度占满整个视口宽度viewport width */ height: 100vh;/* 高度占满整个视口高度viewport height */ } /style只看核心代码即可二. 效果展示以上就是本篇文章的全部内容喜欢的话可以留个免费的关注呦~~~