How to render an object crossing another object v2

how-to-render-an-object-crossing-another-object-v2.markdown

How to render an object crossing another object v2

A Pen by Faked Weiss on CodePen.

License.

index.html

<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>

script.js

// https://discourse.threejs.org/t/how-to-render-an-object-crossing-another-object/52610

import * as THREE from "three";


// general setup, boring, skip to the next comment

var scene = new THREE.Scene();
    scene.background = new THREE.Color( 'gray' );

var camera = new THREE.PerspectiveCamera( 30, innerWidth/innerHeight );
    camera.position.set( 0, 0, 8 );
    camera.lookAt( scene.position );

var renderer = new THREE.WebGLRenderer( {antialias: true, preserveDrawingBuffer: !true} );
    renderer.setSize( innerWidth, innerHeight );
    renderer.setAnimationLoop( animationLoop );
		renderer.autoClear = false;
    document.body.appendChild( renderer.domElement );
			
window.addEventListener( "resize", (event) => {
    camera.aspect = innerWidth/innerHeight;
    camera.updateProjectionMatrix( );
    renderer.setSize( innerWidth, innerHeight );
});

var ambientLight = new THREE.AmbientLight( 'white', 0.5 );
    scene.add( ambientLight );

var light = new THREE.DirectionalLight( 'white', 0.5 );
    light.position.set( 1, 1, 1 );
    scene.add( light );


// next comment

var white = new THREE.Mesh(
			new THREE.BoxGeometry( 2, 0.1, 2 ),
    	new THREE.MeshLambertMaterial( {
					color: 'white',
			} )
    );	
		scene.add( white );


var blue = new THREE.Mesh(
			new THREE.SphereGeometry( 1 ),
    	new THREE.MeshLambertMaterial( {
					color: 'royalblue',
					transparent: true,
			} )
    );	
		blue.renderOrder = 5;
		blue.scale.set( 0.4, 0.8, 0.15 );
		scene.add( blue );


var red = new THREE.Mesh(
			new THREE.SphereGeometry( 1 ),
    	new THREE.MeshLambertMaterial( {
					color: 'crimson',
					transparent: true,
					opacity: 0.8,
					depthTest: false,
					polygonOffset: true,
					polygonOffsetFactor: 1,
					polygonOffsetUnits: 1,
			} )
    );	
		red.scale.set( 0.4, 0.8, 0.15 );
		scene.add( red );



function animationLoop( t )
{
		white.rotation.set(
			0.3*Math.sin( t/1500 ),
			t/2000,
			0.3*Math.cos( t/1300 )
		)

		blue.position.y = Math.sin( t/1000 );
		red.position.y = blue.position.y;
	
		camera.position.y = blue.position.y;

		renderer.render( scene, camera );
}

style.css

body {
  overflow: hidden;
  margin: 0;
}