+
3D model
Assignment 5
Bonus
Due 11/21!
Mesh Fileformats
Let's make an OBJ file
v 0 0 0
v 0 10 0
v 10 0 0
v 0 0 10
f 1 2 3
f 1 2 4
f 1 4 3
f 2 4 3
save as tetrahedron.obj and drag into Slicedrop.com
var loader = new PLYLoader();
loader.load('beethoven.ply', function (geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( {
color: 'red'
} );
scene.add( new THREE.Mesh( geometry, material ) );
} );
Assignment 5
connect Three.js with Tweakpane!
Mesh
Geometry
+ Material
var geometry = new THREE.BoxGeometry( 20, 20, 20);
var material = new THREE.MeshStandardMaterial({ color: 0xffffff });
var mesh = new THREE.Mesh( geometry, material);
var loader = new PLYLoader();
loader.load('beethoven.ply', function (geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( {
color: 'red'
} );
scene.add( new THREE.Mesh( geometry, material ) );
} );
Assignment 5
<script type="module">
// ...
import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
let effect;
// ...
effect = new AnaglyphEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
// ...
function animate() {
// ...
effect.render( scene, camera ); // replace renderer. with effect.
// ...
}
</script>
Oculus Quest 2
Light Simulations
N (x, y, z)
Material
Scattering
controls the physical appearance
BRDF
magic mode uses (x, y, z) as color
Physically Based Rendering
Shiny with highlights
Non-Shiny without highlights
roughness 0 .. 1
metalness 0 .. 1
THREE.MeshStandardMaterial
submit your music
Quiz 9 due tomorrow!