前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >threejs ArrayCamera子摄像机设置lookAt无效

threejs ArrayCamera子摄像机设置lookAt无效

作者头像
路过君
发布2023-11-22 12:43:41
2540
发布2023-11-22 12:43:41
举报

问题

代码语言:javascript
复制
// 创建一个ArrayCamera
var arrayCamera = new THREE.ArrayCamera();
// 设置视角
var cameras = [];
cameras.push(new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100));
cameras.push(new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100));
cameras.push(new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100));
// 设置相机位置
for (var i = 0; i < cameras.length; i++) {
  cameras[i].position.set(Math.sin(i * Math.PI * 2 / cameras.length) * 3, 0, Math.cos(i * Math.PI * 2 / cameras.length) * 3);
  // 此设置无效
  cameras[i].lookAt(0,0,0);
}
// 将相机添加到ArrayCamera中
arrayCamera.setCameras(cameras);
// 创建一个场景
var scene = new THREE.Scene();
// 创建一个立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);
// 将ArrayCamera添加到场景中
scene.add(arrayCamera);
// 调用渲染函数
renderer.render(scene, arrayCamera);

代码中设置子相机朝向不会生效

代码语言:javascript
复制
cameras[i].lookAt(0,0,0);

解决

设置子相机位置和朝向后更新子相机世界变换矩阵

代码语言:javascript
复制
cameras[i].updateMatrixWorld()

分析

Object3D对象的matrixWorldAutoUpdate属性默认值为true

  • three/src/core/Object3D.js
代码语言:javascript
复制
Object3D.DEFAULT_MATRIX_WORLD_AUTO_UPDATE = true;

在renderer渲染时,会自动对scene和camera执行updateMatrixWorld更新其全局变换矩阵 并递归更新其所有子元素的全局变换矩阵

  • three/src/renderers/WebGLRenderer.js
代码语言:javascript
复制
// Rendering
this.render = function ( scene, camera ) {
	...
	// 更新场景图形
	if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
	// 更新相机矩阵和视锥体
	if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
  • three/src/core/Object3D.js
代码语言:javascript
复制
updateMatrixWorld( force ) {
	if ( this.matrixAutoUpdate ) this.updateMatrix();
	if ( this.matrixWorldNeedsUpdate || force ) {
		if ( this.parent === null ) {
			this.matrixWorld.copy( this.matrix );
		} else {
			this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );
		}
		this.matrixWorldNeedsUpdate = false;
		force = true;
	}
	// 递归更新子元素
	const children = this.children;
	for ( let i = 0, l = children.length; i < l; i ++ ) {
		const child = children[ i ];
		if ( child.matrixWorldAutoUpdate === true || force === true ) {
			child.updateMatrixWorld( force );
		}
	}
}

但是ArrayCamera并没有将子相机加入其children成员中,导致无法自动更新

  • three/src/cameras/ArrayCamera.js
代码语言:javascript
复制
class ArrayCamera extends PerspectiveCamera {
	constructor( array = [] ) {
		super();
		this.isArrayCamera = true;
		this.cameras = array;
	}
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-11-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题
  • 解决
  • 分析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档