Использование трафаретного буфера в три раза. js - PullRequest
Новая
       101

Использование трафаретного буфера в три раза. js

0 голосов
/ 08 февраля 2020

Я делаю трехмерную сцену, используя три. js, и пытаюсь использовать трафаретный буфер для вырезания отверстий в тетраэдре, для этого я считаю хорошей идеей использовать сферу, но для этого я не нахожу хороший пример, который объяснил бы мне, как это сделать, шаг за шагом?

enter image description here

HTML код 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D scene</title>
    <script src="js/script.js"></script>
    <script src="js/lib/three.min.js"></script>
    <script src="js/lib/dat.gui.min.js"></script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

JS Код 

window.onload = function() {

    var canvas = document.getElementById("canvas");

    var scene, camera, renderer;

    scene = new THREE.Scene();

    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);

    var light1 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light1);

    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);   

    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true, alpha: true, stencil: true});

    renderer.setClearColor(0x444444);

    renderer.setPixelRatio(window.devicePixelRatio);

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);


    var tetrahedron = new THREE.TetrahedronGeometry( 100, 0 );
    var tetrahedronMaterial = new THREE.MeshStandardMaterial( {color: 0xF3FFE2, roughness: 0.5, metalness: 0.5} );
    var tetrahedronMesh = new THREE.Mesh( tetrahedron, tetrahedronMaterial );
    tetrahedronMesh.position.set(-150, 0, -1000);
    scene.add( tetrahedronMesh );


    var sphere = new THREE.SphereGeometry( 50, 32, 32 );
    var sphereMaterial = new THREE.MeshStandardMaterial( {color: 0x000000, roughness: 0.5, metalness: 0.5} );
    var sphereMesh = new THREE.Mesh( sphere, sphereMaterial );
    sphereMesh.position.set(-150, 0, -1000);
    scene.add( sphereMesh );


    var cylinder = new THREE.CylinderGeometry( 25, 25, 75, 32 );
    var cylinderMaterial = new THREE.MeshStandardMaterial( {

                            color: 0xE91E63,
                            metalness: 0.1,
                            roughness: 0.75,


                            stencilWrite: true,
                            stencilRef: 0,
                            stencilFunc: THREE.NotEqualStencilFunc,
                            stencilFail: THREE.ReplaceStencilOp,
                            stencilZFail: THREE.ReplaceStencilOp,
                            stencilZPass: THREE.ReplaceStencilOp,

    } );
    var cylinderMesh = new THREE.Mesh( cylinder, cylinderMaterial );
    cylinderMesh.position.set( 100, 0, -1000);
    scene.add( cylinderMesh );



    var torus = new THREE.TorusGeometry( 31, 7, 16, 100 );
    var torusMaterial = new THREE.MeshStandardMaterial( {color: 0xADFF2F, roughness: 0.5, metalness: 0.5} );
    var torusMesh = new THREE.Mesh( torus, torusMaterial );
    torusMesh.position.set( 100, 0, -1000);
    torusMesh.rotation.x = 1.6;
    scene.add( torusMesh );

    camera.position.z = 300;

    function animate() {
        requestAnimationFrame( animate );

        tetrahedronMesh.rotation.x += 0.01;
        tetrahedronMesh.rotation.y += 0.01;

        // cylinderMesh.rotation.z += 0.01;
        // cylinderMesh.rotation.y += 0.01;
        cylinderMesh.rotation.x += 0.01;

        torusMesh.rotation.x += 0.01;
        // torusMesh.rotation.y += 0.01;

        renderer.render( scene, camera );
    }

    animate();
}

Этот код предназначен для воспроизведения созданной мною сцены.

...