Materials
Video Lecture
Description
An introduction to the Three.js Material base class.
All these classes below inherit methods and properties from the Material base class.
- LineBasicMaterial
- LineDashedMaterial
- MeshBasicMaterial
- MeshDepthMaterial
- MeshDistanceMaterial
- MeshLambertMaterial
- MeshMatcapMaterial
- MeshNormalMaterial
- MeshPhongMaterial
- MeshPhysicalMaterial
- MeshStandardMaterial
- MeshToonMaterial
- PointsMaterial
- RawShaderMaterial
- ShaderMaterial
- ShadowMaterial
- SpriteMaterial
Start Code
This is the code at the beginning of the lesson.
./dist/client/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>Three.js TypeScript Tutorials by Sean Bradley</title> <style> body { overflow: hidden; margin: 0px; } </style> </head> <body> <script type="module" src="client.js"></script> </body> </html> |
./src/client/client.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | // If using Relative Import References import * as THREE from '/build/three.module.js' import { OrbitControls } from '/jsm/controls/OrbitControls' import Stats from '/jsm/libs/stats.module' import { GUI } from '/jsm/libs/dat.gui.module' // If using Module Specifiers //import * as THREE from 'three' //import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //import Stats from 'three/examples/jsm/libs/stats.module' //import { GUI } from 'three/examples/jsm/libs/dat.gui.module' const scene: THREE.Scene = new THREE.Scene() const axesHelper = new THREE.AxesHelper(5) scene.add(axesHelper) const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) const controls = new OrbitControls(camera, renderer.domElement) //controls.addEventListener('change', render) const boxGeometry: THREE.BoxGeometry = new THREE.BoxGeometry() const sphereGeometry: THREE.SphereGeometry = new THREE.SphereGeometry() const icosahedronGeometry: THREE.IcosahedronGeometry = new THREE.IcosahedronGeometry(1,0) const planeGeometry: THREE.PlaneGeometry = new THREE.PlaneGeometry() const torusKnotGeometry: THREE.TorusKnotGeometry = new THREE.TorusKnotGeometry() const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }) //const material: THREE.MeshNormalMaterial = new THREE.MeshNormalMaterial() const cube: THREE.Mesh = new THREE.Mesh(boxGeometry, material) cube.position.x = 5 scene.add(cube) const sphere: THREE.Mesh = new THREE.Mesh(sphereGeometry, material) sphere.position.x = 3 scene.add(sphere) const icosahedron: THREE.Mesh = new THREE.Mesh(icosahedronGeometry, material) icosahedron.position.x = 0 scene.add(icosahedron) const plane: THREE.Mesh = new THREE.Mesh(planeGeometry, material) plane.position.x = -2 scene.add(plane) const torusKnot: THREE.Mesh = new THREE.Mesh(torusKnotGeometry, material) torusKnot.position.x = -5 scene.add(torusKnot) camera.position.z = 3 window.addEventListener('resize', onWindowResize, false) function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) render() } const stats = Stats() document.body.appendChild(stats.dom) // var options = { // side: { // "FrontSide": THREE.FrontSide, // "BackSide": THREE.BackSide, // "DoubleSide": THREE.DoubleSide, // } // } const gui = new GUI() const materialFolder = gui.addFolder('THREE.Material') // materialFolder.add(material, 'transparent') // materialFolder.add(material, 'opacity', 0, 1, 0.01) // materialFolder.add(material, 'depthTest') // materialFolder.add(material, 'depthWrite') // materialFolder.add(material, 'alphaTest', 0, 1, 0.01).onChange(() => updateMaterial()) // materialFolder.add(material, 'visible') // materialFolder.add(material, 'side', options.side).onChange(() => updateMaterial()) materialFolder.open() // function updateMaterial() { // material.side = Number(material.side) // material.needsUpdate = true // } var animate = function () { requestAnimationFrame(animate) render() stats.update() }; function render() { renderer.render(scene, camera) } animate(); |
Final Code
./src/client/client.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | // If using Relative Import References import * as THREE from '/build/three.module.js' import { OrbitControls } from '/jsm/controls/OrbitControls' import Stats from '/jsm/libs/stats.module' import { GUI } from '/jsm/libs/dat.gui.module' // If using Module Specifiers //import * as THREE from 'three' //import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //import Stats from 'three/examples/jsm/libs/stats.module' //import { GUI } from 'three/examples/jsm/libs/dat.gui.module' const scene: THREE.Scene = new THREE.Scene() const axesHelper = new THREE.AxesHelper(5) scene.add(axesHelper) const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) const controls = new OrbitControls(camera, renderer.domElement) //controls.addEventListener('change', render) const boxGeometry: THREE.BoxGeometry = new THREE.BoxGeometry() const sphereGeometry: THREE.SphereGeometry = new THREE.SphereGeometry() const icosahedronGeometry: THREE.IcosahedronGeometry = new THREE.IcosahedronGeometry(1,0) const planeGeometry: THREE.PlaneGeometry = new THREE.PlaneGeometry() const torusKnotGeometry: THREE.TorusKnotGeometry = new THREE.TorusKnotGeometry() const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial() //const material: THREE.MeshNormalMaterial = new THREE.MeshNormalMaterial() const cube: THREE.Mesh = new THREE.Mesh(boxGeometry, material) cube.position.x = 5 scene.add(cube) const sphere: THREE.Mesh = new THREE.Mesh(sphereGeometry, material) sphere.position.x = 3 scene.add(sphere) const icosahedron: THREE.Mesh = new THREE.Mesh(icosahedronGeometry, material) icosahedron.position.x = 0 scene.add(icosahedron) const plane: THREE.Mesh = new THREE.Mesh(planeGeometry, material) plane.position.x = -2 scene.add(plane) const torusKnot: THREE.Mesh = new THREE.Mesh(torusKnotGeometry, material) torusKnot.position.x = -5 scene.add(torusKnot) camera.position.z = 3 window.addEventListener('resize', onWindowResize, false) function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) render() } const stats = Stats() document.body.appendChild(stats.dom) var options = { side: { "FrontSide": THREE.FrontSide, "BackSide": THREE.BackSide, "DoubleSide": THREE.DoubleSide, } } const gui = new GUI() const materialFolder = gui.addFolder('THREE.Material') materialFolder.add(material, 'transparent') materialFolder.add(material, 'opacity', 0, 1, 0.01) materialFolder.add(material, 'depthTest') materialFolder.add(material, 'depthWrite') materialFolder.add(material, 'alphaTest', 0, 1, 0.01).onChange(() => updateMaterial()) materialFolder.add(material, 'visible') materialFolder.add(material, 'side', options.side).onChange(() => updateMaterial()) materialFolder.open() function updateMaterial() { material.side = Number(material.side) material.needsUpdate = true } var animate = function () { requestAnimationFrame(animate) render() stats.update() }; function render() { renderer.render(scene, camera) } animate(); |