帝国cms地方门户网站模板,网站设计团队,周口高端网站建设,专业做pc+手机网站一、创建vue项目 新建一个项目目录#xff0c;在集成终端打开#xff0c;输入
npm init vitelatest
回车后#xff0c;依次输入项目名#xff0c;选择vue和js开发 然后安装依赖并运行项目 二、安装three
接下来我们开始安装three
npm install three 三、Three.js 的…一、创建vue项目 新建一个项目目录在集成终端打开输入
npm init vitelatest
回车后依次输入项目名选择vue和js开发 然后安装依赖并运行项目 二、安装three
接下来我们开始安装three
npm install three 三、Three.js 的运行需要4个条件
场景 (scenes)渲染器 (renderers)相机 (cameras)对象 (objects)
什么是场景
在 Three.js 中场景是一个非常重要的概念。它类似于一个容器或者说世界可以包含各种对象、模型、粒子和灯光等。场景是 Three.js 中的一个核心组件它是构建一个 3D 场景所必需的。通过将不同的对象添加到场景中我们可以创建一个复杂的 3D 环境从而实现更加生动、吸引人的 3D 体验。
什么是渲染器
渲染器是一个非常重要的组件它的工作是将我们的代码与设计渲染到我们的web中。在threejs中我们通常使用 WebGLRenderer 类来进行渲染。WebGL是一种3D绘图标准它允许我们在web上呈现复杂的3D图形而不需要插件这是非常棒的。 WebGLRenderer的一个伟大之处在于它提供了丰富的功能例如对材质、灯光、阴影和反射的支持。这使得我们能够创建出更加逼真的场景和模型从而提高用户体验。总之渲染器是任何三维场景的重要组成部分也是threejs中不可或缺的组件。
什么是对象
在 Three.js 中所有的元素都是对象包括几何体、模型、粒子和灯光等。这些对象可以应用不同的材质和纹理并使用相机和光源进行渲染。 Three.js 还提供了许多扩展和库例如 MeshStandardMaterial 和 dat.gui可以让你创建更高级的渲染效果和用户界面。
什么是相机
在 Three.js 中相机是非常重要的一个元素用来决定我们观察场景的角度和位置。相机被用来模拟人眼对场景的观察因此非常重要。在 Three.js 中创建相机非常简单我们可以使用 PerspectiveCamera 类来创建。这个类允许我们设置许多参数例如视角、宽高比、近截面和远截面等等因此我们可以完全控制相机的行为。
另外在 Three.js 中相机本身是不可见的它仅用于计算和确定场景中物体的位置和角度。因此我们只能看到相机所观察到的内容而不能看到相机本身。这意味着我们需要在场景中加入其他可见的对象例如物体、灯光等等才能看到场景。因此在使用 Three.js 时不仅需要了解相机的使用还需要了解如何创建和操作其他类型的对象。 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面 在Three.js中我们可以拥有多个相机但通常情况下只需要一个。
相机在Three.js中类似于一个锥形体它受到视野范围和纵横比的影响。
视野范围
视野是你的视角有多大。如果你使用一个非常大的角度你将能够同时看到各个方向但会失真很多因为结果将绘制在一个小矩形上。如果使用小角度则物体看起来会被放大。 概念图示相机在场景中的位置示意图 那么如何将渲染到指定的位置呢
在这种情况下我们需要理解笛卡尔坐标系这个比较难解释所以这里我们使用图片来解释通过xyz三个坐标轴在三维空间中进行定位。在WebGL与Threejs中使用的是正交右手坐标系
正交右手坐标系右手拇指代表X轴食指代表Y轴中指代表Z轴。手臂和拇指代表Y轴。与地面平行的是Z轴。拇指代表X轴。 四、创建3d物体
在App.vue中
script setup
// 引入three
import * as THREE from three;// 创建场景
const scene new THREE.Scene();// 创建相机
const camera new THREE.PerspectiveCamera(45, //视角,视角越大看的东西越多window.innerWidth / window.innerHeight, //宽高比0.1, //近平面相机最近看到的物体1000 //远平面相机最远看到的物体
);// 创建渲染器,最终由渲染器渲染到canvas画布上
const renderer new THREE.WebGL1Renderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置好大小之后将画布添加到页面的body上
document.body.appendChild(renderer.domElement);// 创建几何体,下面创建的是正方体
const geometry new THREE.BoxGeometry(1, 1, 1);
// 创建材质,不同材质效果是不同的,下面设置的是基础的黄色的材质
const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格,将几何体和材质都传进去形成物体
const cube new THREE.Mesh(geometry, material);// 最后将网格添加到场景当中我们才能看到它
scene.add(cube);
// 设置相机位置表示我们要在哪个位置看这个物体
camera.position.z 5; //xy轴不设置默认为0
// 设置相机看向原点
camera.lookAt(0, 0, 0);// 渲染函数
function animate() {requestAnimationFrame(animate);// 旋转,对立方体进行旋转cube.rotation.x 0.01;cube.rotation.y 0.01;// 渲染每次旋转后都调用这个渲染函数renderer.render(scene, camera);
}
animate();
/scripttemplate/templatestyle
* {margin: 0;padding: 0;
}
canvas {display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;
}
/style效果由于我们设置的是从z轴看这个正方体因此正对z轴看到的是平面
如果我们想要不断的渲染让它动起来看到它不同方位的形状需要调用渲染函数如下所示
将上面的静态渲染改为下面的旋转动画渲染
// 渲染函数
function animate() {requestAnimationFrame(animate)// 旋转,对立方体进行旋转cube.rotation.x 0.01cube.rotation.y 0.01// 渲染每次旋转后都调用这个渲染函数renderer.render(scene, camera)
}
animate() 效果如下 此时就完成了在vue中开发的一个简单的3d页面 ~
