three.js 添加viewCUbe/视图控制/视角指示

最新推荐文章于 2025-11-07 19:28:30 发布

原创最新推荐文章于 2025-11-07 19:28:30 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #可视化 #three.js

本文档展示了如何使用Three.js库创建一个透视相机并设置坐标轴显示，同时介绍了viewCube的实现，包括坐标方向显示及后续视角控制、重置和恢复功能的计划。代码中详细说明了相机、viewCube以及坐标轴的创建和渲染过程。

效果：

功能：

目前实现了viewCube的坐标方向显示

后续实现viewCube视角控制/重置/恢复

代码：

//【相机】主相机
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000000000);//创建一个透视相机 可视角度45度 浏览器的全屏的宽高 水平视锥 最近1 最远2000
			camera.position.set(3000, 4000, 3000);
			camera.lookAt(scene.position);
			scene.add(camera);
			//次相机
			var aspect = window.innerWidth / window.innerHeight;
			var frustumSize = 200;
			cameraOrtho = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.1, 20000000000);
			sceneOrtho.add(cameraOrtho);
//【viewCube】
			var materialArr = [];
			materialArr.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
			materialArr.push(new THREE.MeshBasicMaterial({ color: 0x0051ba }));
			materialArr.push(new THREE.MeshBasicMaterial({ color: 0xffd500 }));
			materialArr.push(new THREE.MeshBasicMaterial({ color: 0xff5800 }));
			materialArr.push(new THREE.MeshBasicMaterial({ color: 0xc41e3a }));
			materialArr.push(new THREE.MeshBasicMaterial({ color: 0xff00ff }));
			var viewBox = new THREE.Mesh(new THREE.BoxBufferGeometry(90, 70, 90, 1, 1, 1), materialArr);
			sceneOrtho.add(viewBox);
			//【坐标轴】
			var axes = new THREE.AxesHelper(100);
			viewBox.add(axes);
//【渲染】
renderScene()；
function renderScene() {
			orbitControls.update();//相机控制刷新
			requestAnimationFrame(renderScene);//动画循环渲染起来
			//主场景
			renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);//主场景视区
			renderer.autoClear = false;//【scene.autoClear一定要关闭】
			renderer.render(scene, camera);//渲染
			//次场景:1.复制主场景相机的位置、四元数，2.设置场景视区，3.渲染
			cameraOrtho.position.copy(camera.position);
			cameraOrtho.quaternion.copy(camera.quaternion);//Quaternion（表示对象局部旋转的四元数)
			cameraOrtho.lookAt(scene.position);
			renderer.setViewport(window.innerWidth - 150, window.innerHeight - 150, 150, 150);//【设置次场景视区视口，(x, y,width,height)，用来显示viewCube】
			renderer.render(sceneOrtho, cameraOrtho);
		};