JSFiddle - React, Tailwind, and code Playground

by avatar_studio

HTML

<div name="container"></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.131.3/build/three.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/controls/OrbitControls.js"></script>
<style>
    body { margin: 0; }
</style>

JavaScript

//  --- ---     env

    let instances = 100;
    let container = document.querySelector( '[name=container]' );
    let scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x999999 );
    let camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(0, 10, 10);
    camera.lookAt( new THREE.Vector3( 0, 1, 0 ) );

    let renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    scene.add( new THREE.GridHelper(10, 10, "white", "white") );
    let controls = new THREE.OrbitControls( camera, renderer.domElement );



    //  --- ---     objects.


    const plant = new THREE.PlaneGeometry(1, 2);
    plant.translate(0, 1, 0);

    var uniforms = {
        camQ: {value: new THREE.Vector4()}
    }

    let plantTexture = new THREE.TextureLoader().load("https://i.imgur.com/zN1Hrkq.png", t=>{
        t.minFilter = THREE.NearestFilter;
        t.magFilter = THREE.NearestFilter;
    });
    let plantMat = new THREE.MeshBasicMaterial({
        map:plantTexture,
        alphaTest: 0.5,
        onBeforeCompile: shader => {
            shader.uniforms.camQ = uniforms.camQ;
            shader.vertexShader = `
                uniform vec4 camQ;
            
                // https://discourse.threejs.org/t/instanced-geometry-vertex-shader-question/2694/3
                vec3 applyQuaternionToVector( vec4 q, vec3 v ){
                    return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );
                }
            
            ${shader.vertexShader}
            `.replace(
                `#include <begin_vertex>`,
                `#include <begin_vertex>
            
                transformed = applyQuaternionToVector(camQ, transformed);
            `);
            console.log(shader.vertexShader);
        }
    });
    var planes = new...