<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container">
<!-- This div will hold our scene-->
</div>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
color: white;
text-align: center;
}
a {
color: white;
}
a:hover{
color: red;
}
#container {
position: absolute;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
// these need to be accessed inside more than one function so we'll declare them first
let container;
let camera;
let renderer;
let scene;
let silhouette;
let clippingPlane;
const planePosition = new THREE.Vector3( 0, 0, 1 );
function init() {
container = document.querySelector( '#container' );
initScene();
initCamera();
initControls();
initLights();
initSilhouettes();
initRenderer();
start();
}
function initScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x8FBCD4 );
}
function initCamera() {
camera = new THREE.PerspectiveCamera(
35,
container.clientWidth / container.clientHeight,
0.1,
100,
);
camera.position.set( -5, 5, 10 );
camera.lookAt( new THREE.Vector3() );
new THREE.OrbitControls( camera, container )
}
function initControls() {
// controls = new THREE.OrbitControls( camera, container );
}
function initLights() {
const ambientLight = new THREE.AmbientLight( 0xffffff, 1.0 );
scene.add( ambientLight );
const mainLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
camera.add( mainLight );
scene.add( camera );
}
function initSilhouettes() {
clippingPlane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
const helper = new THREE.PlaneHelper( clippingPlane, 10, 0x0000ff );
scene.add( helper );
const boxgeo = new THREE.BoxBufferGeometry( 2, 2, 2 );
const mainMaterial = new THREE.MeshStandardMaterial( {
color: "silver",
clippingPlanes: [ clippingPlane ],
onBeforeCompile: shader => {
console.log(shader.fragmentShader);
shader.fragmentShader = shader.fragmentShader
.replace(`#include <clipping_planes_fragment>`,``)
.replace(
`#include <color_fragment>`,
`#include <color_fragment>
float fe = fwidth(length(vClipPosition)) * 0.5;
vec4 plane = clippingPlanes[ 0 ];
float pDot = dot( vClipPosition, plane.xyz );
diffuseColor.rgb = mix(diffuseColor.rgb, vec3(0, 0.25, 1), smoothstep(pDot + fe, pDot - fe, plane.w));
`
);
}
} );
mainMaterial.extensions = {derivatives: true}
const mainMesh = new THREE.Mesh( boxgeo, mainMaterial );
silhouette = new THREE.Group();
silhouette.add( mainMesh );
scene.add( silhouette );
}
function initRenderer() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( container.clientWidth, container.clientHeight );
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
renderer.localClippingEnabled = true;
}
function start() {
renderer.setAnimationLoop( () => {
update();
render();
} );
}
function stop() {
renderer.setAnimationLoop( null );
}
function update() {
silhouette.rotation.x += 0.005;
silhouette.rotation.y += 0.005;
silhouette.rotation.z += 0.005;
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize( container.clientWidth, container.clientHeight );
}
window.addEventListener( 'resize', onWindowResize );
init();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.