ThreeJS 官方案例学习（webgl_camera）

已于 2024-05-24 11:52:14 修改
阅读量532 收藏 7
点赞数 5
分类专栏： three 文章标签： webgl 数码相机
于 2024-05-24 11:44:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59315646/article/details/139171085
版权

ThreeJS 官方案例学习（webgl_camera）

1.效果图

在这里插入图片描述

2.源码

<template>
	<div>
		<div id="container"></div>
	</div>
</template>
<script>
import * as THREE from 'three';
// 导入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入房间环境，创建一个室内环境
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
// 导入性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js';
// 导入gltf载入库、模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 引入模型解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
//GUI界面
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import gsap from 'gsap';
export default {
	data() {
		return {
			container: null, //界面需要渲染的容器
			scene: null,	// 场景对象
			camera: null, //相机对象
			renderer: null, //渲染器对象
			controller: null,	// 相机控件对象
			stats: null,// 性能监听器
			mixer: null,//动画混合器
			model: null,//导入的模型
			cameraRig: null,//相机组、相机集合
			activeCamera: null,// 当前活跃的相机
			activeHelper: null,// 当前活跃的相机辅助对象
			cameraPerspective: null, //透视相机
			cameraOrtho: null, //正交相机
			cameraPerspectiveHelper: null,	// 透视相机辅助对象
			cameraOrthoHelper: null,// 正交相机辅助对象
			mesh: null, //
			frustumSize: 600,
			clock: new THREE.Clock()// 创建一个clock对象，用于跟踪时间
		};
	},
	mounted() {
		this.init()
		this.animate()  //如果引入了模型并存在动画，可在模型引入成功后加载动画
		window.addEventListener("resize", this.onWindowSize)
		document.addEventListener('keydown', this.onKeyDown);
	},
	beforeUnmount() {
		console.log('beforeUnmount===============');
		// 组件销毁时置空
		this.container = null
		this.scene = null
		this.camera = null
		this.renderer = null
		this.controller = null
		this.stats = null
		this.mixer = null
		this.model = null//导入的模型
	},
	methods: {
		/**
		* @description 初始化
		 */
		init() {
			this.container = document.getElementById('container')
			this.setScene()
			this.setCamera()
			this.setRenderer()
			this.setController()
			this.addHelper()
			this.setPMREMGenerator()
			this.setLight()
			// this.setGltfLoader()
			this.addStatus()
			this.setMesh()
		},
		/**
		 * @description 创建场景
		 */
		setScene() {
			// 创建场景对象Scene
			this.scene = new THREE.Scene()
			// 设置场景背景
			// this.scene.background = new THREE.Color(0xbfe3dd);
		},
		/**
		 * @description 创建相机
		*/
		setCamera() {
			const aspect = this.container.clientWidth / this.container.clientHeight
			// 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
			this.camera = new THREE.PerspectiveCamera(50, 0.5 * aspect, 1, 10000)
			// 设置相机位置
			this.camera.position.set(0, 0, 2500)
			// 设置相机宽高比例
			this.camera.aspect = aspect;
			// 设置相机投影矩阵
			this.camera.updateProjectionMatrix();
			// 设置相机视线方向
			this.camera.lookAt(new THREE.Vector3(0, 0, 0))// 0, 0, 0 this.scene.position
			// 将相机加入场景
			this.scene.add(this.camera)

			// 透视相机的视角
			this.cameraPerspective = new THREE.PerspectiveCamera(50, 0.5 * aspect, 150, 1000);
			// 透视相机辅助对象
			this.cameraPerspectiveHelper = new THREE.CameraHelper(this.cameraPerspective);
			this.scene.add(this.cameraPerspectiveHelper);
			// 正交相机的视角
			this.cameraOrtho = new THREE.OrthographicCamera(0.5 * this.frustumSize * aspect / - 2, 0.5 * this.frustumSize * aspect / 2, this.frustumSize / 2, this.frustumSize / - 2, 150, 1000);
			// 正交相机辅助对象
			this.cameraOrthoHelper = new THREE.CameraHelper(this.cameraOrtho);
			this.scene.add(this.cameraOrthoHelper);

			// 当前活跃的相机和相机辅助对象，初始化为透视相机的视角
			this.activeCamera = this.cameraPerspective;
			this.activeHelper = this.cameraPerspectiveHelper;


			// counteract different front orientation of cameras vs rig
			// 抵消不同的相机与钻机的正面方向
			this.cameraOrtho.rotation.y = Math.PI;
			this.cameraPerspective.rotation.y = Math.PI;

			this.cameraRig = new THREE.Group();
			//相机组、相机平台集合
			this.cameraRig.add(this.cameraPerspective);
			this.cameraRig.add(this.cameraOrtho);

			this.scene.add(this.cameraRig);


		},
		/**
		 * @description 创建渲染器
		 */
		setRenderer() {
			// 初始化渲染器
			this.renderer = new THREE.WebGLRenderer({
				antialias: true,// 设置抗锯齿
				logarithmicDepthBuffer: true,  // 是否使用对数深度缓存
			})
			// 设置渲染器宽高
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			this.renderer.setPixelRatio(window.devicePixelRatio);
			// 定义渲染器是否在渲染每一帧之前自动清除其输出
			this.renderer.autoClear = false;
			// 是否需要对对象排序
			// this.renderer.sortObjects = false;
			// 将渲染器添加到页面
			this.container.appendChild(this.renderer.domElement);

		},
		/**
		 * @description 添加创建控制器
		 */
		setController() {
			this.controller = new OrbitControls(this.camera, this.renderer.domElement);
			// 控制缩放范围
			// this.controller.minDistance = 1;
			// this.controller.maxDistance = 5;
			//是否开启右键拖拽
			// this.controller.enablePan = false;
			// 阻尼（惯性）
			this.controller.enableDamping = true; //启用阻尼（惯性）
			this.controller.dampingFactor = 0.04; //阻尼惯性有多大
			// this.controller.autoRotate = true; //自动围绕目标旋转
			// this.controller.minAzimuthAngle = -Math.PI / 3; //能够水平旋转的角度下限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
			// this.controller.maxAzimuthAngle = Math.PI / 3;//水平旋转的角度上限,其有效值范围为[-2 * Math.PI，2 * Math.PI],默认值为无穷大
			// this.controller.minPolarAngle = 1; //能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0。
			// this.controller.maxPolarAngle = Math.PI - 0.1; //能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。
			// 修改相机的lookAt是不会影响THREE.OrbitControls的target的
			// 由于设置了控制器，因此只能改变控制器的target以改变相机的lookAt方向
			this.controller.target.set(0, 0, 0); //控制器的焦点
		},
		/**
		* @description 添加创建模型
		*/
		setGltfLoader() {
			let that = this
			// 添加模型
			// 实例化gltf载入库
			const loader = new GLTFLoader();
			// 实例化draco载入库
			const dracoLoader = new DRACOLoader();
			// 添加draco载入库
			dracoLoader.setDecoderPath("./draco/gltf/");
			// 添加draco载入库
			loader.setDRACOLoader(dracoLoader);
			loader.load('./model/gltf/LittlestTokyo.glb', (gltf) => {
				that.model = gltf.scene
				that.model.position.set(1, 1, 0)
				that.model.scale.set(0.01, 0.01, 0.01)
				that.scene.add(that.model)
				// 绑定model的动画混合器
				// 动画混合器(AnimationMixer)是用于场景中特定对象的动画的播放器。
				// 当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。
				that.mixer = new THREE.AnimationMixer(that.model)
				//设置剪辑动画
				that.mixer.clipAction(gltf.animations[0]).play()
				// 执行动画
				that.animate();
			}, undefined, (err => {
				console.error(err)
			}))
		},
		/**
		 * @description 创建辅助坐标轴
		 */
		addHelper() {
			// 模拟相机视锥体的辅助对象
			let helper = new THREE.CameraHelper(this.camera);
			// this.scene.add(helper);
			//创建辅助坐标轴、轴辅助 （每一个轴的长度）
			let axisHelper = new THREE.AxesHelper(150);  // 红线是X轴，绿线是Y轴，蓝线是Z轴
			this.scene.add(axisHelper)
			// 坐标格辅助对象
			let gridHelper = new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888);
			this.scene.add(gridHelper);
		},
		/**
		 * @description 给场景添加环境光效果
		 */
		setPMREMGenerator() {
			// 预过滤的Mipmapped辐射环境贴图
			const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
			this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
		},
		/**
		 * @description 设置光源
		 */
		setLight() {
			// 环境光
			const ambientLight = new THREE.AmbientLight(0x404040, 4);
			// this.scene.add(ambientLight);
			// 平行光
			const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
			this.scene.add(directionalLight);
			// 点光源 - 照模型
			const test = new THREE.PointLight("#ffffff", 10, 2);
			// test.position.set(0, 0, 0);
			// this.scene.add(test);
			//点光源 - 辅助对象
			const testHelperMap = new THREE.PointLightHelper(test);
			// this.scene.add(testHelperMap);
		},
		/**
		 * @description 创建性能监听器
		*/
		addStatus() {
			// 创建一个性能监听器
			this.stats = new Stats();
			// 将性能监听器添加到容器中
			this.container.appendChild(this.stats.dom);
		},

		/**
		 * @description 设置球体
		 */
		setMesh() {
			// 设置球体
			// 将wireframe属性设置为true时会被渲染成线框，默认为false渲染为实心物体
			this.mesh = new THREE.Mesh(
				new THREE.SphereGeometry(100, 16, 8),
				new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true })
			)
			this.scene.add(this.mesh)

			const mesh2 = new THREE.Mesh(
				new THREE.SphereGeometry(50, 16, 8),
				new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
			)
			mesh2.position.y = 150;
			this.mesh.add(mesh2);

			const mesh3 = new THREE.Mesh(
				new THREE.SphereGeometry(5, 16, 8),
				new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true })
			)
			mesh3.position.z = 150;
			this.cameraRig.add(mesh3);

			// 创建10000个随机点
			const geometry = new THREE.BufferGeometry(); // 缓冲几何体
			const vertices = []; // 坐标点 x、y、z
			const colorList = []; // 颜色值
			for (let i = 0; i < 10000; i++) {
				// THREE.MathUtils.randFloatSpread( 2000 )生成-1000~1000之间的随机数
				vertices.push(THREE.MathUtils.randFloatSpread(2000)); // x
				vertices.push(THREE.MathUtils.randFloatSpread(2000)); // y
				vertices.push(THREE.MathUtils.randFloatSpread(2000)); // z
				// 颜色是0~1，不是0~255
				colorList.push(THREE.MathUtils.randInt(0, 1)); // r
				colorList.push(THREE.MathUtils.randInt(0, 1)); // g
				colorList.push(THREE.MathUtils.randInt(0, 1)); // b
			}
			// 设置位置，itemSize = 3 因为每个顶点都是一个三元组。
			geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
			// 设置颜色
			geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorList, 3));
			const particles = new THREE.Points(
				geometry,
				new THREE.PointsMaterial({
					//  color: 0x888888
					size: 2,
					// vertexColors: true, // 使用点设置的颜色，旧版本值是THREE.VertexColors
					// sizeAttenuation: false // 设置为false后，点的大小一致
				}));
			this.scene.add(particles);
		},
		/**
		 * @description 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
		*/
		// 窗口变化
		onWindowSize() {
			// 更新相机视锥体的长宽比
			const aspect = this.container.clientWidth / this.container.clientHeight
			this.camera.aspect = aspect;
			// 更新摄像机的投影矩阵
			this.camera.updateProjectionMatrix();

			this.cameraPerspective.aspect = 0.5 * aspect;
			this.cameraPerspective.updateProjectionMatrix();
			// left — 摄像机视锥体左侧面。
			// right — 摄像机视锥体右侧面。
			// top — 摄像机视锥体上侧面。
			// bottom — 摄像机视锥体下侧面。
			this.cameraOrtho.left = - 0.5 * this.frustumSize * aspect / 2;
			this.cameraOrtho.right = 0.5 * this.frustumSize * aspect / 2;
			this.cameraOrtho.top = this.frustumSize / 2;
			this.cameraOrtho.bottom = - this.frustumSize / 2;
			this.cameraOrtho.updateProjectionMatrix();

			//更新渲染器
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			this.renderer.setPixelRatio(window.devicePixelRatio)
		},
		/**
		* @description 动画执行函数
		*/
		animate() {
			const delta = this.clock.getDelta();
			// mixer 动画更新
			if (this.mixer) {
				this.mixer.update(delta);
			}
			// 引擎自动更新渲染器
			requestAnimationFrame(this.animate);
			//update()函数内会执行camera.lookAt(x, y, z)
			// this.controller.update(delta);

			this.render()
			// 更新性能监听器
			this.stats.update();
			// 重新渲染场景
			this.renderer.render(this.scene, this.camera);
		},
		render() {
			const SCREEN_WIDTH = this.container.clientWidth
			const SCREEN_HEIGHT = this.container.clientHeight

			// 让球体旋转起来
			const r = Date.now() * 0.0005;
			this.mesh.position.x = 700 * Math.cos(r);
			this.mesh.position.z = 700 * Math.sin(r);
			this.mesh.position.y = 700 * Math.sin(r);

			this.mesh.children[0].position.x = 70 * Math.cos(2 * r);
			this.mesh.children[0].position.z = 70 * Math.sin(r);

			// 切换视角
			if (this.activeCamera === this.cameraPerspective) {
				// 相机更新
				this.cameraPerspective.fov = 35 + 30 * Math.sin(0.5 * r);//摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示
				this.cameraPerspective.far = this.mesh.position.length();//摄像机的远端面
				this.cameraPerspective.updateProjectionMatrix(); //相机投影更新

				// 相机辅助对象更新
				this.cameraPerspectiveHelper.update();  ///相机辅助投影更新
				this.cameraPerspectiveHelper.visible = true; //显示透视相机辅助

				this.cameraOrthoHelper.visible = false; //影藏正交相机辅助

			} else {
				// 相机更新
				this.cameraOrtho.far = this.mesh.position.length();//摄像机视锥体远端面
				this.cameraOrtho.updateProjectionMatrix(); //相机投影更新

				// 相机辅助对象更新
				this.cameraOrthoHelper.update();///相机辅助投影更新
				this.cameraOrthoHelper.visible = true; //显示正交相机辅助

				this.cameraPerspectiveHelper.visible = false;//影藏透视相机辅助
			}

			// 相机聚焦
			this.cameraRig.lookAt(this.mesh.position);

			this.renderer.clear();


			// 设置视口大小，左侧为活跃视角，右侧为窗口视角

			// .setViewport(x : Integer, y : Integer, width : Integer, height : Integer)
			// 将视口大小设置为(x, y)到(x + width, y + height).
			this.activeHelper.visible = false;
			this.renderer.setViewport(0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
			this.renderer.render(this.scene, this.activeCamera);


			this.activeHelper.visible = true;
			this.renderer.setViewport(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
			this.renderer.render(this.scene, this.camera);
		},
		onKeyDown(event) {

			switch (event.keyCode) {

				case 79: /*O*/

					this.activeCamera = this.cameraOrtho;
					this.activeHelper = this.cameraOrthoHelper;

					break;

				case 80: /*P*/

					this.activeCamera = this.cameraPerspective;
					this.activeHelper = this.cameraPerspectiveHelper;

					break;

			}

		},
	},
};
</script>
<style>
#container {
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>
ThreeJS官方示例
weixin_44208404的博客
01-26 559
【代码】ThreeJS官方示例。
three.js官方案例（animation / keyframes）webgl_animation_keyframes.html学习
hemiaoyuan1989的专栏
06-01 1144
这允许不同的级别 的模糊，可根据材质粗糙度快速访问。不像 传统的MIPMAP链，它只下到LOD_MIN级别（上图）， 然后在同一LOD_MIN创建额外甚至更多过滤的“MIP” 分辨率，与更高的粗糙度水平相关。的粗糙度取决于 提供的纹理的大小。如果您的渲染尺寸较小，或者 闪亮的部分有很多曲率，你也许仍然可以逃脱 具有较小的纹理尺寸。- （可选）指定在PMREM生成之前应用于场景的以弧度为单位的模糊半径。- （可选）近平面值，默认值为0.1。- （可选）远平面值。
Threejs示例一
weixin_46415189的博客
11-17 2319
three.js教程demo
离线创建第一个threejs项目
lmryBC49的博客
03-06 956
本文讲解了如何获取threejs源码，以及如何在本地使用html创建首个threejs项目
THREE.js 3D看房案例 (一)
最新发布
weixin_44286800的博客
03-08 1044
THREEJS 3d看房demo
【源码分享】threejs小项目：萌蠢的小羊
w2sft的博客
12-03 322
JS代码可以用JShaman、JSJiami.Online、JS-Obfuscator等进行。
threejs官方案例
03-22
包含各种模型和动画加载，以及其他特效案例，功能案例。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在CSDN，方便大家学习，发扬IT开源共享精神，共同促进IT进步。
ThreeJS 官方案例学习（webgl_animation_keyframes）
木木开发屋的博客
05-24 394
【代码】ThreeJS 官方案例学习（webgl_animation_keyframes）
ThreeJs官方案例源码
07-20
ThreeJs官方案例源码
threejs简单例子,threejs中文实例,JavaScript
09-10
three.js开发例子，代码实现了创建3D场景，导入一个3D楼房模型并呈现。
three.js官方案例webgl_loader_fbx.html学习
hemiaoyuan1989的专栏
05-27 1410
先创建必要的场景scene,相机camera，渲染器webrenderer，控制器controls和灯光DirectionalLight. 性能检测stars， 地面， 网格。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。针对后缀的anim的动画文件，目前是需要这么解决。这里模型加载进去小，所以进行了放大100。加上这个光后，模型明显变量了。
threejs 源码和demo示例
05-06
threejs 是轻量级的开发3d web模型网页程序的javascript类库，资源中包含了threejs的源码和demo示例。demo中包含了几十个js示例程序。是开发3d 程序最好的入门材料
threeJS 3D效果实例
04-14
通过js实现页面的3D效果，可以放大缩小，旋转，隐藏部分内容等
threejs-example:Three.js 的简单例子
06-08
Three.js 示例 从 Three.js 教程创建的 Three.js 的简单示例：
webgl_solar:[JS]使用ThreeJS库建立地球，月亮和太阳的模型
05-13
总的来说，`webgl_solar`项目是一个很好的实践案例，可以帮助开发者深入理解Three.js库以及WebGL在浏览器中的3D图形编程。通过研究这个项目，不仅可以掌握创建3D模型的基础知识，还能了解到高级的动画和交互技巧。
three.js官方案例（animation / skinning / ik）webgl_animation_skinning_ik.html学习记录
hemiaoyuan1989的专栏
07-13 1155
target、effector 和 link-index 是 .sculptor.bones 中的索引整数。骨骼关系从父级到子级的顺序应为“links[ n ]、 links[ n - 1 ]、...、 links[ 0 ]、effector”。CCDIKSolver 用 CCD 算法解决逆运动学问题。CCDIKSolver 设计用于与。用于 CCDIKSolver 解决 IK 问题。— 指定 IK 参数的对象。
three.js官方案例webgpu_reflection.html学习记录
hemiaoyuan1989的专栏
07-12 2660
默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……宽度、高度无需相等，但每个维度的长度必须都是2的幂。使用RepeatWrapping，纹理将简单地重复到无穷大 使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时。如果在材质已使用纹理后更改了颜色空间类型， 您需要将。
ThreeJS 官方案例学习（webgl_clipping）
木木开发屋的博客
05-30 317
【代码】ThreeJS 官方案例学习（webgl_clipping）
three.js官方案例（animation / skinning / additive / blendin）animation_skinning_additive_blending.html学习记录
hemiaoyuan1989的专栏
07-12 2176
这一篇的主要是介绍用到的SkeletonHelper（模拟骨骼），AnimationUtils（一个提供各种动画辅助方法的对象），本片案例的重点在于动画处理部分。
ThreeJS实用案例解析：如何加载glb模型
标题中提到的“ThreeJS加载glb模型实用案例”指向的是如何在使用Three.js这个流行的JavaScript 3D库时，加载glb格式的模型。Three.js是一个轻量级的3D库，它封装了WebGL的复杂性，使得开发者可以更简单地在网页上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值