JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
var container, stats;
var camera, scene, renderer, particles, geometry, material, positions, colors, alphas,sizes, sumDisplacement, x,y,z;
var mouseX = 0,
mouseY = 0;
var newPosition = 0;
var uniforms = {
color: { value: new THREE.Color( 0xffffff ) },
texture: { value: new THREE.TextureLoader().load("http://i.imgur.com/HMjPT3I.png") }
};
function getMoleculeMaterialInstanced() {
var material = new THREE.MeshLambertMaterial( {
vertexColors: THREE.VertexColors,
} );
material.onBeforeCompile = function( shader ) {
shader.vertexShader = `
#define LAMBERT
// instanced
attribute vec3 offset;
// attribute vec3 instanceColor;
// attribute float instanceScale;
varying vec3 vLightFront;
varying vec3 vIndirectFront;
#ifdef DOUBLE_SIDED
varying vec3 vLightBack;
varying vec3 vIndirectBack;
#endif
#include <common>
#include <uv_pars_vertex>
#include <uv2_pars_vertex>
#include <envmap_pars_vertex>
#include <bsdfs>
#include <lights_pars_begin>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
#include <uv_vertex>
#include <uv2_vertex>
#include <color_vertex>
// vertex colors instanced
// #ifdef USE_COLOR
// vColor.xyz = instanceColor.xyz;
// #endif
#include <beginnormal_vertex>
#include <morphnormal_vertex>
#include <skinbase_vertex>
#include <skinnormal_vertex>
#include <defaultnormal_vertex>
#include <begin_vertex>
// position instanced
// transformed *= instanceScale;
// transformed = transformed + instanceOffset;
transformed = transformed + offset;
#include <morphtarget_vertex>
#include <skinning_vertex>
#include <project_vertex>
#include...