这是初始化的模型,上面哪一部分不知道为什么不显示
这是放大一点,或者鼠标调整视角后的模型,这是正常的样子
请问一下是哪里设置的有问题嘛?
这是 js代码
// 初始化场景
init() {
let container = document.getElementById("container");
/* 场景 */
this.scene = new THREE.Scene();
/* 相机 */
this.camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 1, 1000);
this.camera.position.z = 571.389;
this.camera.position.x = 27.845;
this.camera.position.y = 682.565;
/* 渲染器 */
this.renderer = new THREE.WebGLRenderer({ antialias: true});
this.renderer.setClearAlpha(0.0);
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.toneMappingExposure = 1;
this.renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(this.renderer.domElement);
new OrbitControls(this.camera, this.renderer.domElement);
// 辅助线
var axisHelper = new THREE.AxisHelper(500);
this.scene.add(axisHelper);
},
// 加载模型
loadObj() {
this.manager = new THREE.LoadingManager();
this.manager.addHandler( /\.dds$/i, new DDSLoader());
new GLTFLoader(this.manager).load("../../static/glb/map-01.glb", (obj) => {
console.log(obj);
this.mapObj = obj;
this.scene.add(this.mapObj.scene);
this.mapObj.scene.scale.set(1, 1, 1);
this.mapObj.scene.translateX(120);//沿着x轴正方向平移距离120
this.mapObj.scene.translateZ(-100);//沿着z轴正方向平移距离-100
this.animate();
});
},
// 灯光效果
light() {
var ambientLight = new THREE.AmbientLight(0x222222, 0.3);
ambientLight.position.set(0, 0, 0);
this.scene.add(ambientLight);
var pointColor = new THREE.Color(0x0040ef);
var directionalLight = new THREE.DirectionalLight(pointColor);
directionalLight.position.set(5.000, 162.615, -585.440);
directionalLight.castShadow = true;
directionalLight.shadow.bias = 0.0;
directionalLight.shadow.radius = 1.0;
directionalLight.intensity = 1;
this.scene.add(directionalLight);
},
// 动画效果
animate() {
this.renderer.render(this.scene, this.camera);
var self = this;
this.animateFrame = requestAnimationFrame(function() {
self.animate();
});
},