代码之家 › 专栏 › 技术社区 › gonnavis

三js点材料添加借出工件

blending three.js

3

gonnavis · 技术社区 · 9 年前

<html>
<head>
    <title>My first three.js app</title>
    <style>
        html
        ,body
        {height: 100%;}
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>

    <script src="/lib/threejs/three.js-master/build/three.js"></script>
    <script src="/lib/threejs/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );


        var buffer_geometry=new THREE.BufferGeometry();
        var vertices=new Float32Array([
            -1.0,  0.0,  0.0,
             1.0,  0.0,  0.0,
        ])
        buffer_geometry.addAttribute('position',new THREE.BufferAttribute(vertices,3));


        var controls=new THREE.OrbitControls(camera, renderer.domElement);

        var material = new THREE.PointsMaterial({
            color:0x330000,
            transparent:true,
            // depthTest:false,
            blending:THREE.AdditiveBlending,
            size:.3,
        })

        var mesh = new THREE.Points( buffer_geometry, material );
        scene.add( mesh );

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame( animate );

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>

1 回复 | 直到 9 年前

1

5

WestLangley 9 年前

具有 Three.Points

由于您使用的是加法混合,因此解决方法可以是最后渲染点,并禁用深度写入。

var material = new THREE.PointsMaterial( {
     depthWrite: false,
     blending: THREE.AdditiveBlending
} )

mesh.renderOrder = 999;

三js r.86