I am making a 3D scene using three.js, and try to use stencil buffer for cutting holes in the tetrahedron, for that I think a good idea to use the sphere, but for that, I don't find a good example which would explain to me how to do it, step by step?
HTML code
<!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 Code
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();
}
This code is for playing back the scene I created.
