,

ThreeJS实现立方体看房

贴图 现在墙纸贴在外边的,需要贴到里面 设置相机位置,让视觉在屋内 增加事件

贴图

//材质-贴图
const materials: THREE.MeshBasicMaterial[] = [];
const texture_right = new THREE.TextureLoader().load( './images/livingRoom/living_r.jpg' );
materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

const texture_left = new THREE.TextureLoader().load( './images/livingRoom/living_l.jpg' );
materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

const texture_up = new THREE.TextureLoader().load( './images/livingRoom/living_u.jpg' );
materials.push(new THREE.MeshBasicMaterial({ map: texture_up }));

const texture_down = new THREE.TextureLoader().load( './images/livingRoom/living_d.jpg' );
materials.push(new THREE.MeshBasicMaterial({ map: texture_down }));

const texture_front = new THREE.TextureLoader().load( './images/livingRoom/living_f.jpg' );
materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

const texture_back = new THREE.TextureLoader().load( './images/livingRoom/living_b.jpg' );
materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

//创建网格
const cube  = new THREE.Mesh( geometry, materials );

现在墙纸贴在外边的,需要贴到里面

cube.geometry.scale( 1, 1, -1 ); 

设置相机位置,让视觉在屋内

//设置相机位置
//camera.position.z = 30;
camera.position.set( 0, 0, 0.01 ); //视角放到了盒子里边轨道不能设置0

增加事件

//事件,处理调试或者窗口变动后重新渲染
window.addEventListener('resize', () => {
  //更新相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  //更新相机投影矩阵
  camera.updateProjectionMatrix();
  //更新渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
});

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

About the Author

每个人都有自己得时区,在自己得时区里,一切都是准时的。

BlockSpare — News, Magazine and Blog Addons for (Gutenberg) Block Editor