|
文章目录
前言一、问题描述二、解决方法三、代码总结
前言
在Vue项目中创建一个天空盒子，解决盒子对应的6个面图片不显示问题，对于模型不加载问题也可能是相同原因造成的。
一、问题描述
刚开始在目录里添加了一个static文件夹存放图片 
在App.vue中加载图片
// 天空盒子纹理图
let materialArray = [];
let texture_ft = new Three.TextureLoader().load("../static/skyBox/ft.jpg");
let texture_bk = new Three.TextureLoader().load("../static/skyBox/bk.jpg");
let texture_up = new Three.TextureLoader().load("../static/skyBox/up.jpg");
let texture_dn = new Three.TextureLoader().load("../static/skyBox/dn.jpg");
let texture_rt = new Three.TextureLoader().load("../static/skyBox/rt.jpg");
let texture_lf = new Three.TextureLoader().load("../static/skyBox/lf.jpg");
 发现盒子加载成功，但是盒子颜色为黑色，没有图片加载。
二、解决方法
原因是是图片加载的路径问题，该解决方法也适用于面模型加载不出来。
图片加载有一个默认地址public文件夹，把图片和模型放在该文件夹下 
// 天空盒子纹理图
let materialArray = [];
let texture_ft = new Three.TextureLoader().load("static/skyBox/ft.jpg");
let texture_bk = new Three.TextureLoader().load("static/skyBox/bk.jpg");
let texture_up = new Three.TextureLoader().load("static/skyBox/up.jpg");
let texture_dn = new Three.TextureLoader().load("static/skyBox/dn.jpg");
let texture_rt = new Three.TextureLoader().load("static/skyBox/rt.jpg");
let texture_lf = new Three.TextureLoader().load("static/skyBox/lf.jpg");
三、代码
import * as Three from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { mergeUniforms } from 'three';
export default {
name: 'ThreeTest',
data() {
return {
camera: null,
scene: null,
renderer: null,
loader:null,
light:null,
controls:null
// mesh: null
}
},
methods: {
init: function() {
let container = document.getElementById('container');
this.camera = new Three.PerspectiveCamera(45, container.clientWidth/container.clientHeight, 0.01, 10000);
this.camera.position.set(-350,50,70);
this.scene = new Three.Scene();
let _this=this
this.loader = new GLTFLoader()// 设置默认路径
// 创建时钟
// clock = new THREE.Clock()
this.loader.load("static/caifuxingyuan.glb", function (gltf) {
console.log(gltf)
_this.scene.add(gltf.scene)
})
this.scene.add(this.mesh);
this.light = new Three.PointLight(0xffffff)// 半球形光源
this.light.position.set(0, 200, 0);// 光源位置
this.scene.add(this.light)// 将光源添加到场景
// 添加平行
var directionalLight = new Three.DirectionalLight( 0xf2f2f2, 3 );
directionalLight.position.set(-40, 60, -10);
directionalLight.shadow.camera.near = 20; //产生阴影的最近距离
directionalLight.shadow.camera.far = 200; //产生阴影的最远距离
//这两个值决定使用多少像素生成阴影 默认512
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.mapSize.width = 1024;
// 设置计算阴影的区域，最好刚好紧密包围在对象周围
// 计算阴影的区域过大：模糊 过小：看不到或显示不完整
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 100;
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.bottom = -10;
this.scene.add( directionalLight );
this.renderer = new Three.WebGLRenderer({antialias: true});
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.renderer.setClearColor(0xcccccc, 1); //设置背景颜色
container.appendChild(this.renderer.domElement);
this.controls = new OrbitControls(this.camera,this.renderer.domElement)
this.controls.minDistance = 200;
this.controls.maxDistance = 1000;
this.controls.update()
var line = new Three.AxesHelper(500)//辅助线
this.scene.add(line)
// 天空盒子纹理图
let materialArray = [];
let texture_ft = new Three.TextureLoader().load("static/skyBox/ft.jpg");
let texture_bk = new Three.TextureLoader().load("static/skyBox/bk.jpg");
let texture_up = new Three.TextureLoader().load("static/skyBox/up.jpg");
let texture_dn = new Three.TextureLoader().load("static/skyBox/dn.jpg");
let texture_rt = new Three.TextureLoader().load("static/skyBox/rt.jpg");
let texture_lf = new Three.TextureLoader().load("static/skyBox/lf.jpg");
materialArray.push(new Three.MeshBasicMaterial({ map: texture_ft }));
materialArray.push(new Three.MeshBasicMaterial({ map: texture_bk }));
materialArray.push(new Three.MeshBasicMaterial({ map: texture_up }));
materialArray.push(new Three.MeshBasicMaterial({ map: texture_dn }));
materialArray.push(new Three.MeshBasicMaterial({ map: texture_rt }));
materialArray.push(new Three.MeshBasicMaterial({ map: texture_lf }));
for (let i = 0; i |