1.对立方体进行面的反转，实现房间的效果，设置物体的缩放为沿某一轴负方向
2.若贴图方向可通过旋转贴图来到正确的位置
3.贴图是二维且朝向固定的，不能设置旋转轴
4.设置贴图的中心 texture.center=new Vector(x,y)，会绕着这个中心旋转
5.当取值为 (0, 0) 时，贴图的中心点坐标是纹理坐标系的原点。而当取值为 (1, 1) 时，贴图的中心点坐标就是纹理坐标系的右上角点
<template>
<!-- ref 的功能很强大，可以用于获取任何响应式的数据、元素实例等。
需要注意的是，在使用 ref 获取元素实例时，只有在元素渲染后才能获取到正确的实例。
-->
<div class="container" ref="container"></div>
</template>
<!--
setup
为我们提供一个新的组件配置项，用来替代 Vue
2.x 中的 created、mounted、updated、destroyed
等生命周期函数。 setup 函数是可选的，
可以用来完成组件的数据处理，也可以 返回渲染时需
要的数据、组件选项等数据。
-->
<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { ref, onMounted } from "vue";
// import {a} from '../public/imgs/living/'
const w = window.innerWidth;
const h = window.innerHeight;
const loader = new THREE.TextureLoader();
let arrs = ["4_l", "4_r", "4_u", "4_d", "4_b", "4_f"];
let boxMaterial = [];
arrs.forEach((item) => {
//创建纹理
let texture = loader.load(`imgs/living/${item}.jpg`);
//创建材质
if (item === "4_u" || item === "4_d") {
//贴图本身是二维的，它的朝向是固定的，不能指定轴来旋转
texture.rotation = Math.PI;
//用于指定贴图的中心点坐标，默认值是 (0, 0)
//texture.center 属性的取值范围必须在 [0, 1] 之间。
//当取值为 (0, 0) 时，贴图的中心点坐标仍然是纹理坐标系的原点。
//而当取值为 (1, 1) 时，贴图的中心点坐标就是纹理坐标系的右上角点。
texture.center = new THREE.Vector2(0.5, 0.5);
boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture }));
} else {
boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture }));
}
});
//场景
const scene = new THREE.Scene();
//物体
const geometry = new THREE.BoxGeometry(10, 10, 10);
const cube = new THREE.Mesh(geometry, boxMaterial);
cube.geometry.scale(-1, 1, 1);
scene.add(cube);
//光源
//相机
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 300);
camera.position.set(0, 2, 4);
camera.lookAt(0, 0, 0);
//渲染器
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(w, h);
//轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
// orbitControls.enableDamping = true;
//封装一个渲染函数
const render = () => {
orbitControls.update();
//阻尼
//将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。
// 请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。
orbitControls.enableDamping = true;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
/**
* 在 Vue 3 中，ref 是一个新增的函数，主要用于在模板或者
* setup 函数中获取一个响应式对象或者值。在使用 ref 函数时，
* 会将传入的数据进行处理并返回一个对象，这个对象会在原数据的
* 基础上增加一个 value 属性用于存储数据。
*/
const container = ref(null);
// 挂载完毕后通过onMounted获取dom
onMounted(() => {
container.value.appendChild(renderer.domElement);
render();
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: #f0f0f0;
}
</style>
