JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js';
import { GUI } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/controls/OrbitControls.js';
import { BufferGeometryUtils } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/utils/BufferGeometryUtils.js';
let camera, scene, renderer, mesh;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x8FBCD4 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
camera.position.z = 10;
scene.add( camera );
scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
const pointLight = new THREE.PointLight( 0xffffff, 1 );
camera.add( pointLight );
const geometry = createGeometry();
const material = new THREE.MeshPhongMaterial( {
color: 0xff0000,
flatShading: true,
morphTargets: true
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
setTimeout( () =>{
console.log( BufferGeometryUtils.computeMorphedAttributes( mesh ) );
}, 5000 );
initGUI();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
} );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
window.addEventListener( 'resize', onWindowResize );
}
function createGeometry() {
const geometry = new THREE.BoxGeometry( 2, 2, 2, 32, 32, 32 );
// create an empty array to hold targets for the attribute we want to morph
// morphing positions and normals is supported
geometry.morphAttributes.position = [];
// the original positions of the cube's vertices
const...