THREE.NodeMaterial example / Don McCurdy

view = {

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(width, height);

renderer.setPixelRatio(devicePixelRatio);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.enableZoom = false;

const clock = new THREE.Clock();

let st = 1;

renderer.setAnimationLoop(() => {

// Increment time, reverse direction every 10s.

time.value += st * clock.getDelta();

time.value = Math.max( Math.min( time.value, 10 ), 0 );

if (time.value === 10 || time.value === 0) st *= -1;

// Render.

renderer.render(scene, camera)

});

invalidation.then(() => (controls.dispose(), renderer.dispose()));

return renderer.domElement;

}

content = {

const geometry = new THREE.SphereBufferGeometry( 1, 64, 32 );

const material = new THREE.StandardNodeMaterial();

// Basic material properties.

material.color = new THREE.ColorNode( 0xffffff * Math.random() );

material.metalness = new THREE.FloatNode( 0.0 );

material.roughness = new THREE.FloatNode( 1.0 );

// Modulate vertex position based on time and height.

// GLSL: vPosition *= sin( vPosition.y * time ) * 0.2 + 1.0;

const { MUL, ADD } = THREE.OperatorNode;

const localPosition = new THREE.PositionNode();

const localY = new THREE.SwitchNode( localPosition, 'y' );

let offset = new THREE.Math1Node( new THREE.OperatorNode( localY, time, MUL ), THREE.Math1Node.SIN );

offset = new THREE.OperatorNode( offset, new THREE.FloatNode( 0.2 ), MUL );

offset = new THREE.OperatorNode( offset, new THREE.FloatNode( 1.0 ), ADD );

material.position = new THREE.OperatorNode( localPosition, offset, MUL );

return new THREE.Mesh( geometry, material );

}

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.