JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CSS
body {
margin: 0;
overflow: hidden;
}
JavaScript
var mixer,
camera,
scene,
obj,
mat,
point_indices,
points,
pt_mts,
ptmat,
renderer,
mouseX = 0,
mouseY = 0;
var windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 4;
scene = new THREE.Scene();
// new geometry definition
geometry = new THREE.BufferGeometry();
geometry.morphAttributes.position = [];
var vertices = [];
vertices.push( 2, 2.5, 3 );
vertices.push( 1, 2.5, 3 );
vertices.push( 0, 2.5, 3 );
var positionAttribute = new THREE.Float32BufferAttribute( vertices, 3 );
geometry.addAttribute( 'position', positionAttribute );
var morphTarget0 = [];
morphTarget0.push( 2, 2.5, 4 );
morphTarget0.push( 1, 2.5, 4 );
morphTarget0.push( 0, 2.5, 4 );
var morphTarget0Attribute = new THREE.Float32BufferAttribute( morphTarget0, 3 );
morphTarget0Attribute.name = 'morphTarget0';
geometry.morphAttributes.position.push( morphTarget0Attribute );
var morphTarget1 = [];
morphTarget1.push( 2, 2.5, 5 );
morphTarget1.push( 1, 2.5, 5 );
morphTarget1.push( 0, 2.5, 5 );
var morphTarget1Attribute = new THREE.Float32BufferAttribute( morphTarget1, 3 );
morphTarget1Attribute.name = 'morphTarget1';
geometry.morphAttributes.position.push( morphTarget1Attribute );
//
material = new THREE.PointsMaterial({
morphTargets: true,
color: 0xff0000
});
points = new THREE.Points( geometry, material...