个人中心
gpt4 book ai didi

javascript - 如何动态叠加来自 GLTF 模型的纹理 - Three.js

转载 作者：行者123 更新时间：2023-11-29 10:28:34 24 4
gpt4 key购买 nike

我想覆盖/打开和关闭来自 GLTF 模型的纹理，但找不到如何或是否可行。我能够完美地加载它，但是当我尝试重新加载或覆盖纹理时，什么也没有发生，或者出现了一些错误。我尝试的最后一件事没有给我任何错误，但模型保留了原始纹理。我还尝试卸载模型并使用其他纹理重新加载，也没有成功。

我正在使用 three.js 文档中的标准 THREE.GLTFLoader 示例，只是更改了 3d 加载模型并添加了一个函数来在一段时间后执行此更改。我可能把所有事情都弄糊涂了，如果你能提供帮助，我将不胜感激，在此先感谢。

访问的链接对我没有帮助: ThreeJS: Remove object from scene ; three.js Switching objects on click ; How do I change the texture of a GLTF model dynamically? ; Change texture of loaded .obj in three.js at runtime ; Import another Texture at runtime within THREE.JS and GLTF

我正在使用的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - glTF loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;
        }
        #info a {
            color: #75ddc1;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="info"><!--
        <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
        Battle Damaged Sci-fi Helmet by
        <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br /> -->
    </div>

    <script src="build/three.js"></script>

    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/loaders/GLTFLoader.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats, controls;
        var camera, scene, renderer, light;
        var globalObject;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 2000 );
            camera.position.set( -250.8, 260.9, 262.7 );


            controls = new THREE.OrbitControls( camera );
            controls.target.set( 0, -0.2, -0.2 );
            controls.update();

            // envmap
            var path = 'textures/cube/Bridge2/';
            var format = '.jpg';
            var envMap = new THREE.CubeTextureLoader().load( [
                path + 'posx' + format, path + 'negx' + format,
                path + 'posy' + format, path + 'negy' + format,
                path + 'posz' + format, path + 'negz' + format
            ] );

            scene = new THREE.Scene();
            scene.background = envMap;

            light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
            light.position.set( 0, 1, 0 );
            scene.add( light );

            // model
            var loader = new THREE.GLTFLoader();
            loader.load( 'models/testeFinal2-1/testeFinal2-1.gltf', function ( gltf ) {

                globalObject = gltf.scene;

                gltf.scene.traverse( function ( child ) {

                    if ( child.isMesh ) {

                        child.material.envMap = envMap;

                    }

                } );

                scene.add( gltf.scene );

            } );

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.gammaOutput = true;
            container.appendChild( renderer.domElement );

            window.addEventListener( 'resize', onWindowResize, false );

            // stats
            stats = new Stats();
            container.appendChild( stats.dom );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

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

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            renderer.render( scene, camera );

            stats.update();

        }

        setTimeout(newTexture(), 7000); //Do the changes after 7s.

        function newTexture() {

            scene.remove( globalObject ); //This don't give me any error, but does nothing.

            // envmap
            var path = 'textures/cube/Bridge2/';
            var format = '.jpg';
            var envMap = new THREE.CubeTextureLoader().load( [
                path + 'posx' + format, path + 'negx' + format,
                path + 'posy' + format, path + 'negy' + format,
                path + 'posz' + format, path + 'negz' + format
            ] );

            var loader = new THREE.GLTFLoader(); //Trying to reload the second time, does nothing either.
            loader.load( 'models/testeFinal2-1/2/testeFinal2-1.gltf', function ( gltf ) {

                gltf.scene.traverse( function ( child ) {

                    if ( child.isMesh ) {

                        child.material.envMap = envMap;

                    }

                } );

                scene.add( gltf.scene );

            } );
        }           

    </script>

</body>

UPDATE1(删除了 newTexture 函数并编辑了模型的加载器):

// model
            var loader = new THREE.GLTFLoader();
            loader.load( 'models/testeFinal2-1/testeFinal2-1.gltf', function ( gltf ) {

                globalObject = gltf.scene;

                gltf.scene.traverse( function ( child ) {

                    if ( child.isMesh ) {

                        child.material.envMap = envMap;

                        setTimeout(function () {
                            child.material.map.image.currentSrc = "/models/testeFinal2-1/2/finalTest2_ORTO2.jpg";
                            child.material.map.image.src = "/models/testeFinal2-1/2/finalTest2_ORTO2.jpg";
                        }, 5000);

                    }

                } );

                scene.add( gltf.scene );

            } );

最佳答案

加载模型后，可以使用THREE.TextureLoader将新纹理附加到模型。这样做时，请务必设置 texture.flipY=false 以匹配 glTF 模型的 UV 方向。

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( 'foo.png' );
texture.flipY = false;

var loader = new THREE.GLTFLoader();
loader.load( 'foo.glb', ( gltf ) => {
  var model = gltf.scene;
  model.traverse ( ( o ) => {
    if ( o.isMesh ) {
      // note: for a multi-material mesh, `o.material` may be an array,
      // in which case you'd need to set `.map` on each value.
      o.material.map = texture;
    }
  } );
  scene.add( model );
} );

关于javascript - 如何动态叠加来自 GLTF 模型的纹理 - Three.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52236033/

24 4 0
文章推荐： ios - 无法上传新的构建文件 XCode 6.3.2
文章推荐： mysql - 如何进行计数查询并连接两个表
文章推荐： ios - UITableViewCell中如何实现滚动动画？
文章推荐： c# - EF 代码优先外键关系
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com