金长 2021-07-30 11:40 采纳率: 0%
浏览 56
已结题

Three.js 模型导入问题,初始化后感觉有部分模型未显示

img
这是初始化的模型,上面哪一部分不知道为什么不显示

img
这是放大一点,或者鼠标调整视角后的模型,这是正常的样子

请问一下是哪里设置的有问题嘛?
这是 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();
        });
      },

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 8月7日
    • 修改了问题 7月30日
    • 创建了问题 7月30日

    悬赏问题

    • ¥15 为啥画版图在Run DRC会出现Connect Error?可我Calibre的hostname和计算机的hostname已经设置成一样的了。
    • ¥20 网站后台使用极速模式非常的卡
    • ¥20 Keil uVision5创建project没反应
    • ¥15 mmseqs内存报错
    • ¥15 vika文档如何与obsidian同步
    • ¥15 华为手机相册里面的照片能够替换成自己想要的照片吗?
    • ¥15 陆空双模式无人机飞控设置
    • ¥15 sentaurus lithography
    • ¥100 求抖音ck号 或者提ck教程
    • ¥15 关于#linux#的问题:子进程1等待子进程A、B退出后退出(语言-c语言)