ThreeJS-纹理加载进度(十四)

Posted 2023-04-03 不穿铠甲的穿山甲

使用纹理加载器对纹理加载进度进行监控

关键代码：

//创建加载管理器

    const manager = new THREE.LoadingManager(

      () =>

        console.log("加载完成");

      ,

      (url, loaded, total) =>

        console.log("当前正在加载资源" + url);

        console.log("总资源数" + total + "已加载" + loaded);

      ,

      (e) =>

        console.log("加载失败");

     

    );

    //纹理加载器

    const textureLoader = new THREE.TextureLoader(manager);

完整代码：

 

<template>

  <div id="three_div"></div>

</template>

  <script>

import * as THREE from "three";

import OrbitControls from "three/examples/jsm/controls/OrbitControls";

export default

  name: "HOME",

  components:

    // vueQr,

    // glHome,

  ,

  data()

    return ;

  ,

  mounted()

    //使用控制器控制3D拖动旋转OrbitControls

    //控制3D物体移动

    //1.创建场景

    const scene = new THREE.Scene();

    console.log(scene);

    //2.创建相机

    const camera = new THREE.PerspectiveCamera(

      75,

      window.innerWidth / window.innerHeight,

      0.1,

      1000

    );

    //设置相机位置

    camera.position.set(0, 0, 10);

    //将相机添加到场景

    scene.add(camera);

    //添加物体

    //创建几何体

    const cubeGeometry = new THREE.BoxBufferGeometry(2, 2, 2);

    //创建加载管理器

    const manager = new THREE.LoadingManager(

      () =>

        console.log("加载完成");

      ,

      (url, loaded, total) =>

        console.log("当前正在加载资源" + url);

        console.log("总资源数" + total + "已加载" + loaded);

      ,

      (e) =>

        console.log("加载失败");

     

    );

    //纹理加载器

    const textureLoader = new THREE.TextureLoader(manager);

    //纹理加载器加载图片

    const docColorLoader = textureLoader.load("three/door.webp");

    const menColorLoader = textureLoader.load("three/men_k.webp");

    const cubeMaterial = new THREE.MeshStandardMaterial(

      color: 0xffff00,

      transparent: true,

      map: docColorLoader, //黑色重叠区域完全透明，白色重叠区域完全不透明

      alphaMap: menColorLoader, //黑色重叠区域被覆盖，白色重叠区域不被覆盖

      side: THREE.DoubleSide,

    );

    //根据几何体和材质创建物体

    const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);

    //将物体加入到场景

    scene.add(mesh);

    //添加坐标轴辅助器

    const axesHepler = new THREE.AxesHelper(5);

    scene.add(axesHepler);

    //标准材质需要借助灯光

    //添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）

    const light = new THREE.AmbientLight(0xffffff, 0.5);

    scene.add(light);

    //初始化渲染器

    const render = new THREE.WebGLRenderer();

    //设置渲染器的尺寸

    render.setSize(window.innerWidth, window.innerHeight);

    //使用渲染器，通过相机将场景渲染进来

    //创建轨道控制器，可以拖动,控制的是摄像头

    const controls = new OrbitControls(camera, render.domElement);

    //设置控制阻尼，让控制器有更真实的效果

    controls.enableDamping = true;

    //将webgl渲染的canvas内容添加到body上

    document.getElementById("three_div").appendChild(render.domElement);

    //渲染下一帧的时候就会调用回调函数

    let renderFun = () =>

      //更新阻尼数据

      controls.update();

      //需要重新绘制canvas画布

      render.render(scene, camera);

      //监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数

      //但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果

      window.requestAnimationFrame(renderFun);

    ;

    // window.requestAnimationFrame(renderFun);

    renderFun();

    //画布全屏

    window.addEventListener("dblclick", () =>

      if (document.fullscreenElement)

        document.exitFullscreen();

      else

        //document.documentElement.requestFullscreen();

        render.domElement.requestFullscreen();

     

    );

    //监听画面变化，更新渲染画面，（自适应的大小）

    window.addEventListener("resize", () =>

      //更新摄像机的宽高比

      camera.aspect = window.innerWidth / window.innerHeight;

      //更新摄像机的投影矩阵

      camera.updateProjectionMatrix();

      //更新渲染器宽度和高度

      render.setSize(window.innerWidth, window.innerHeight);

      //设置渲染器的像素比

      render.setPixelRatio(window.devicePixelRatio);

      // console.log("画面变化了");

    );

  ,

  methods:

    paush(animate)

      animate.pause();

    ,

  ,

;

</script>

<style scoped lang="scss">

</style>

效果图：

 

 

ThreeJS .dae 不加载纹理

【中文标题】ThreeJS .dae 不加载纹理

【英文标题】：ThreeJS .dae Not loading textures

【发布时间】：2016-03-05 13:23:22

【问题描述】：

<library_images>
    <image id="ID9">
        <init_from>
            ./textures/Seats_Lvl2b_2k.jpg
        </init_from>
    </image>

在通过 ThreeJS 网站为 Collada 提供的默认皮肤示例中，我看到这应该保存我的图像，然后 for 循环会将它们打印出来，但是它们不会显示我的 .dae 文件中的纹理，它会导致我的 DAE 文件加载在浏览器中，但没有应用纹理。

skin = collada.skins[ 0 ];

如果我打印出来：

skin = collada.dae['images'];

日志显示：

日志中的其他警告是：

THREE.MeshPhongMaterial：“漫反射”不是该材质的属性。 11: ColladaLoader.js:3020 未处理的 Sampler2D 道具：instance_image three.min.js:381 THREE.MeshPhongMaterial: 'diffuse' 不是该材质的属性。

所有图像都相对放置在服务器上。

欢迎咨询

【问题讨论】：

我通过加载将 FBX 转换为 JSON 和支持的工具来进一步实现这一点，但是图像永远不会针对 json 文件加载。我现在使用 threeJS 的 Dev 分支进行最新构建

【参考方案1】：

如果您可以分享 COLLADA 模型，您可以获得更具体的建议，但如果没有这些建议，我建议您转换为 FBX 或 glTF 并分别使用 FBXLoader 或 glTFLoader。