Three.js png图片透明问题

用threejs 做了一个圆环,然后用一张png当材质,然后一直旋转,但是有一些角度透明的地方居然不透明了,这是什么原因,各位大佬

image
上图注意左边的箭头,是透明的

image
旋转到右边的时候却不透明了

image
原图

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - loaders - OBJ loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="/css/main.css">
    </head>

    <body>

        <script type="module">

            import * as THREE from '/js/three.module.js';

            var container;

            var camera, scene, renderer;

            var cube;

            init();
            animate();


            function init() {

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

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.set( 40, 10, 40 );
                camera.lookAt( 0, 0, 0 );

                // scene

                scene = new THREE.Scene();

                var pointLight = new THREE.PointLight( 0xffffff, 1 );
                camera.add( pointLight );
                scene.add( camera );

                var axesHelper = new THREE.AxesHelper( 150 );
                // 和网格模型Mesh一样,AxesHelper你也可以理解为一个模型对象,需要插入到场景中
                scene.add( axesHelper );


                var texture = THREE.ImageUtils.loadTexture('/js/yuan2.png', {}, function() {
                    renderer.render(scene, camera);
                });

                // 材质
                var material = new THREE.MeshLambertMaterial({
                    map: texture,
                    color:0xffff00,
                });

                material.side = THREE.DoubleSide
                material.transparent = true

                // 几何体
                cube = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 3, 32, 1, true), material);
                scene.add(cube);

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setClearColor(0xeeeeee,1.0);
                container.appendChild( renderer.domElement );


            }

            function animate() {

                requestAnimationFrame( animate );
                render();

            }

            function render() {

                if (cube !== undefined) {
                    // console.log(1);
                    cube.rotation.y += 0.005
                }

                renderer.render( scene, camera );

            }

        </script>

    </body>
</html>
阅读 381
评论
    0 个回答
    撰写回答

    登录后参与交流、获取后续更新提醒

    相似问题
    推荐文章