如何将 env 映射添加到 gltf 对象上

问题描述

我在将环境贴图添加到加载的 GLTF / GLB 文件时遇到了很多麻烦，到目前为止，我得到了某种反射，而不是带有光点的黑点，

我正在阅读有关三个 js 的一些文档，并认为我可以使用标准网格材料将其拉下来，并将其以某种方式应用于对象（gltf）并将网格添加到场景中。我尝试了一个类似的模型，但该项目消失了。我不知道该怎么办，帮帮忙。

这是我试图应用的环境贴图，（或类似的东西） https://hdrihaven.com/files/hdri_images/tonemapped/8192/venice_sunset.jpg

这是我正在开发的代码笔 https://codepen.io/8AD/pen/XWpxmpO

HTML

<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/build/three.min.js"></script>
<!-- OrbitControls.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/controls/OrbitControls.js"></script>
<!-- DRACOLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/DRACOLoader.js"></script>
<!-- GLTFLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/GLTFLoader.js"></script>

<div id="3dmain">

  
</div>

JS

var gltf = null;
var mixer = null;
var clock = new THREE.Clock();
var controls;
var camera;
init();
animate();

var renderCalls = [];
function render () {
requestAnimationFrame( render );
renderCalls.forEach((callback)=>{ callback(); });
}
render();

  
function init() {
    width = window.innerWidth;
    height = window.innerHeight;
    
    scene = new THREE.Scene();
    
  var light = new THREE.PointLight( 0xffffcc,20,200 );
light.position.set( 4,30,80 );
scene.add( light );

var light2 = new THREE.AmbientLight( 0x20202A,100 );
light2.position.set( 30,-10,30 );
scene.add( light2 );

  
    camera = new THREE.PerspectiveCamera( 60,width / height,0.01,10000 );
    camera.position.set(0,3,10);


    window.addEventListener( 'resize',function () {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth,window.innerHeight );
    },false );
    
    var geometry = new THREE.BoxGeometry(100,5,100);
    var material = new THREE.MeshLambertMaterial({
        color: "#707070"
    });
    
 
    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item,loaded,total ) {
        console.log( item,total );
    };

    var loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' ); 
    
    
    var scale = 0.01;
    var url = "https://8ad.studio/wp-content/uploads/3D%20Assets/blimp.glb";
    
    loader.load(url,function (data) {
        gltf = data;
        var object = gltf.scene;
        object.scale.set(scale,scale,scale);
        //object.position.y = -5;
        //object.position.x = 4;
        object.castShadow = true;
        object.receiveShadow = true;

        var animations = gltf.animations;
        if ( animations && animations.length ) {
            mixer = new THREE.AnimationMixer( object );
            for ( var i = 0; i < animations.length; i ++ ) {
                var animation = animations[ i ];
                mixer.clipAction( animation ).play();
            }
        }
        scene.add(object);
    });

    

    renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true } );
    renderer.setClearColor( 0x000000,0 );
    renderer.shadowMap.enabled = true;
    
    controls = new THREE.OrbitControls( camera,);
      controls.rotateSpeed = 0.3;
controls.zoomSpeed = 0.9;

controls.minDistance = 14;
controls.maxDistance = 14;

controls.minPolarAngle = 0; // radians
controls.maxPolarAngle = Math.PI /2; // radians

controls.enableDamping = true;
controls.dampingFactor = 0.05;

var renderCalls = [];
renderCalls.push(function(){
  controls.update()
});

    renderer.setSize( width,height );
    renderer.gammaOutput = true;
    document.getElementById('3dmain').appendChild( renderer.domElement );
}

function animate() {
    requestAnimationFrame( animate );
    if (mixer) mixer.update(clock.getDelta());
    controls.update();
    render();
}

function render() {
    renderer.render( scene,camera );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）