Three.js奇怪的透明工件

Three.js odd transparency artifact

本文关键字：透明 js Three 更新时间：2023-09-26

我最近刚刚开始为我正在创建的网站创建3D模型。。由于某种原因，角色的一只手臂是透明的，但只能部分看到里面。如图所示：透明的手臂，我想不通。我试着回溯我的一些代码，但没有成功，我试着在blender中重新渲染它（因为它是.obj导入），但它仍然有同样的问题。有人知道这个问题的解决方法吗？

<body>
    <script src="./JS/three.js"></script>
    <script src="./JS/DDSLoader.js"></script>
    <script src="./JS/MTLLoader.js"></script>
    <script src="./JS/OBJLoader.js"></script>
    <script src="./JS/OrbitControls.js"></script>  
    <script src="./JS/Detector.js"></script>
    <script src="./JS/stats.min.js"></script>
    <script>
        var container, stats;
        var camera, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
             renderer = new THREE.WebGLRenderer( { 
              alpha: true,
              antialias: true
              } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( 200,300);
            container.appendChild( renderer.domElement );

            camera = new THREE.PerspectiveCamera( 14, window.innerWidth / window.innerHeight, .3, 1000 );
            camera.position.z = 1;
            camera.position.y = 8;
            //camera.rotation.y = -90*(180/3.14159265)

            var orbit = new THREE.OrbitControls( camera, renderer.domElement );
              orbit.enableZoom = false;
              orbit.enablePan = false;
              orbit.autoRotate = true;
            // scene
            scene = new THREE.Scene();
            var ambient = new THREE.AmbientLight( 0xffffff );
            scene.add( ambient );
             var dirLight = new THREE.DirectionalLight(0xffffff, .41);
            dirLight.position.set(100, 100, 50);
            scene.add(dirLight);

            var light = new THREE.PointLight( 0xf8f8ff, 0.25, 10000 );
            light.position.set( 0, 100,-75);
            scene.add( light );
            //var directionalLight = new THREE.DirectionalLight( 0xf8f8ff );
            //directionalLight.position.set( 0, 0, 1 ).normalize();
            //scene.add( directionalLight );
            // model
            var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };
            var onError = function ( xhr ) { };
            THREE.Loader.Handlers.add( /'.dds$/i, new THREE.DDSLoader() );
            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setBaseUrl( './Avatar/' );
            mtlLoader.setPath( './Avatar/' );
            mtlLoader.load( 'Avatar.mtl', function( materials ) {
                materials.preload();
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.setPath( './Avatar/' );
                objLoader.load( 'Avatar.obj', function ( object )
                 {
                    object.alphaTest = 0;
                    object.transparent = false;
                     object.side = THREE.DoubleSide;
                    //object.rotation.y = -25*(180/3.14159265)
                    //object.rotation.x = -35*(180/3.14159265)
                    object.position.y = 0;
                    scene.add( object );
                }, onProgress, onError );
            });
            //

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            //renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function onDocumentMouseMove( event ) {
            mouseX = ( event.clientX - windowHalfX ) / 2;
            mouseY = ( event.clientY - windowHalfY ) / 2;
        }
        //
        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render() {
            //camera.position.x += ( mouseX - camera.position.x ) * .005;
            //camera.position.y += ( - mouseY - camera.position.y ) * .005;
            camera.lookAt( scene.position );
            renderer.render( scene, camera );
        }
    </script>

在这一点上我有点不知所措，真的需要你的帮助！提前谢谢。如果您有任何问题，或者对我的代码中的某些内容不确定，请告诉我。

手臂的面法线可能向后翻转。如您所知，如果面法线面向背面，则不会对其进行渲染，只会对背面进行渲染，即使在三维建模器（如blender）中也是如此。

您也可以使用FaceNormalsHelper在three.js中检查法线方向。

帮助者的文档：

http://threejs.org/docs/#Reference/Extras.Helpers/FaceNormalsHelper
http://threejs.org/examples/#webgl_helpers

如果法线方向错误，请在三维建模应用程序中翻转它们。