JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://threejs.org/examples/jsm/loaders/PLYLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/models/ply/ascii/dolphins.ply"></script>
<script src="https://threejs.org/build/three.js"></script>

<script id="vs" type="x-shader/x-vertex">
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec3 position;

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script id="fs" type="x-shader/x-fragment">
void main() {
    gl_FragColor = vec4(1, 0, 0, 0.3);
}
</script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer, lines, obj, m, m2;
let count = 0;
init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 4;

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xffffff );
    
/* 	  var geo = new THREE.BoxBufferGeometry( 1, 1, 1, 5, 5, 5 );
	      const mat = new THREE.MeshBasicMaterial({color: 'red'})
	      m = new THREE.Mesh(geo, mat)
	      m.position.x = 2
	      scene.add(m)
	      
	          var geo2 = new THREE.BoxBufferGeometry( 1, 1, 1, 5, 5, 5 );
	      const mat2 = new THREE.MeshBasicMaterial({color: 'red'})
	      m2 = new THREE.Mesh(geo2, mat2)
	      m2.position.x = 2
	  //    scene.add(m2)
	   */
    var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 5, 5, 5 );
		var wireframeGeometry = new THREE.WireframeGeometry( geometry );
		
		var material = new THREE.RawShaderMaterial( {
        transparent: true,
				vertexShader: document.getElementById( 'vs' ).textContent,
				fragmentShader: document.getElementById( 'fs' ).textContent
        
		} );
    
     obj = new THREE.Object3D()
     
//    obj.position.set(
//      camera.position.x,
//      camera.position.y,
//      camera.position.z,
//    )

    obj.add(camera)
//    obj.position.z = -1
//	  obj.position.y = 10
//	  obj.position.x = -10
    scene.add(obj)
//    camera.position.z -= 1
    

    lines = new THREE.Mesh( wireframeGeometry, material );

    scene.add( lines );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
    count += 0.1
  lines.position.x = count % 20 - 10
  
    
    
//		obj.rotation.x += 1.01
///k	  obj.rotation.y += 1.01
//    obj.rotation.z += 0.11
//	  obj.position.x -= 0.1
camera.lookAt(lines.position)
     obj.lookAt(
          ...