28:null 29:["$","title",null,{"children":"Three.js fundamentals | Sylvain Lesage | Observable"}] 2e:Tafb,{ const canvas = html`

`; const canvas = html`

`; const renderer = new THREE.WebGLRenderer({ canvas }); // Four elements to define the frustum // Anything inside the defined frustum will be be drawn. Anything outside will not // 1. field of view (in vertical degrees) const fov = 40; // 2. aspect ratio (width / height) const aspect = 2; // the canvas default // 3 and 4. limits of what will be rendered (after near, and before far) const near = 0.1; const far = 1000; // Create the camera const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // Move the camera back on the z axis camera.position.z = 120; // Create the scene const scene = new THREE.Scene(); // clear to lightish gray scene.background = new THREE.Color(0xAAAAAA); // objects const objects = []; const spread = 15; // takes an x, y position and an Object3D and adds the object to the scene function addObject(x, y, obj) { obj.position.x = x * spread; obj.position.y = y * spread; scene.add(obj); objects.push(obj); } // create a random colored material, setting a color based on hue, saturation, and luminance. function createMaterial() { const material = new THREE.MeshPhongMaterial({ // draw both sides of the triangles, for PlaneBufferGeometry and ShapeBufferGeometry side: THREE.DoubleSide }); // random hue const hue = Math.random(); // most saturated const saturation = 1; // maximum amount of color const luminance = .5; material.color.setHSL(hue, saturation, luminance); return material; } // create a random colored material and add it to the scene function addSolidGeometry(x, y, geometry) { const mesh = new THREE.Mesh(geometry, createMaterial()); addObject(x, y, mesh); } // Add objects { const width = 8; const height = 8; const depth = 8; addSolidGeometry(-2, 2, new THREE.BoxBufferGeometry(width, height, depth)); } { const radius = 7; const segments = 24; addSolidGeometry(-1, 2, new THREE.CircleBufferGeometry(radius, segments)); } { const radius = 6; const height = 8; const segments = 16; addSolidGeometry( 0, 2, new THREE.ConeBufferGeometry(radius, height, segments) ); } { const radiusTop = 4; const radiusBottom = 4; const height = 8; const radialSegments = 12; addSolidGeometry( 1, 2, new THREE.CylinderBufferGeometry( radiusTop, radiusBottom, height, radialSegments ) ); } { const radius = 7; addSolidGeometry(2, 2, new THREE.DodecahedronBufferGeometry(radius)); } { const shape = new THREE.Shape(); const x = -2.5; const y = -5; shape.moveTo(x + 2.5, y + 2.5); shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y); shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5); shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5); shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5); shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y); shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5); const extrudeSettings = { steps: 2, depth: 2, bevelEnabled: true, bevelThickness: 1, bevelSize: 1, bevelSegments: 2 }; addSolidGeometry( -2, 1, new THREE.ExtrudeBufferGeometry(shape, extrudeSettings) ); } { const radius = 7; addSolidGeometry(-1, 1, new THREE.IcosahedronBufferGeometry(radius)); } { const points = []; for (let i = 0; i < 10; ++i) { points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * .8)); } addSolidGeometry(0, 1, new THREE.LatheBufferGeometry(points)); } { const radius = 7; addSolidGeometry(1, 1, new THREE.OctahedronBufferGeometry(radius)); } { /* from: https://github.com/mrdoob/three.js/blob/b8d8a8625465bd634aa68e5846354d69f34d2ff5/examples/js/ParametricGeometries.js The MIT License Copyright © 2010-2018 three.js authors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ function klein(v, u, target) { u *= Math.PI; v *= 2 * Math.PI; u = u * 2; let x; let z; if (u < Math.PI) { x = 3 * Math.cos(u) * (1 + Math.sin(u)) + 2 * (1 - Math.cos(u) / 2) * Math.cos(u) * Math.cos(v); z = -8 * Math.sin(u) - 2 * (1 - Math.cos(u) / 2) * Math.sin(u) * Math.cos(v); } else { x = 3 * Math.cos(u) * (1 + Math.sin(u)) + 2 * (1 - Math.cos(u) / 2) * Math.cos(v + Math.PI); z = -8 * Math.sin(u); } const y = -2 * (1 - Math.cos(u) / 2) * Math.sin(v); target.set(x, y, z).multiplyScalar(0.75); } const slices = 25; const stacks = 25; addSolidGeometry( 2, 1, new THREE.ParametricBufferGeometry(klein, slices, stacks) ); } { const width = 9; const height = 9; const widthSegments = 2; const heightSegments = 2; addSolidGeometry( -2, 0, new THREE.PlaneBufferGeometry( width, height, widthSegments, heightSegments ) ); } { const verticesOfCube = [ -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1 ]; const indicesOfFaces = [ 2, 1, 0, 0, 3, 2, 0, 4, 7, 7, 3, 0, 0, 1, 5, 5, 4, 0, 1, 2, 6, 6, 5, 1, 2, 3, 7, 7, 6, 2, 4, 5, 6, 6, 7, 4 ]; const radius = 7; const detail = 2; addSolidGeometry( -1, 0, new THREE.PolyhedronBufferGeometry( verticesOfCube, indicesOfFaces, radius, detail ) ); } { const innerRadius = 2; const outerRadius = 7; const segments = 18; addSolidGeometry( 0, 0, new THREE.RingBufferGeometry(innerRadius, outerRadius, segments) ); } { const shape = new THREE.Shape(); const x = -2.5; const y = -5; shape.moveTo(x + 2.5, y + 2.5); shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y); shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5); shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5); shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5); shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y); shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5); addSolidGeometry(1, 0, new THREE.ShapeBufferGeometry(shape)); } { const radius = 7; const widthSegments = 12; const heightSegments = 8; addSolidGeometry( 2, 0, new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments) ); } { const radius = 7; addSolidGeometry(-2, -1, new THREE.TetrahedronBufferGeometry(radius)); } { const loader = new THREE.FontLoader(); // promisify font loading function loadFont(url) { return new Promise((resolve, reject) => { loader.load(url, resolve, undefined, reject); }); } async function doit() { const font = await loadFont( 'https://threejsfundamentals.org/threejs/resources/threejs/fonts/helvetiker_regular.typeface.json' ); const geometry = new THREE.TextBufferGeometry('three.js', { font: font, size: 3.0, height: .2, curveSegments: 12, bevelEnabled: true, bevelThickness: 0.15, bevelSize: .3, bevelSegments: 5 }); const mesh = new THREE.Mesh(geometry, createMaterial()); geometry.computeBoundingBox(); geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1); const parent = new THREE.Object3D(); parent.add(mesh); addObject(-1, -1, parent); } doit(); } { const radius = 5; const tubeRadius = 2; const radialSegments = 8; const tubularSegments = 24; addSolidGeometry( 0, -1, new THREE.TorusBufferGeometry( radius, tubeRadius, radialSegments, tubularSegments ) ); } { const radius = 3.5; const tube = 1.5; const radialSegments = 8; const tubularSegments = 64; const p = 2; const q = 3; addSolidGeometry( 1, -1, new THREE.TorusKnotBufferGeometry( radius, tube, tubularSegments, radialSegments, p, q ) ); } { class CustomSinCurve extends THREE.Curve { constructor(scale) { super(); this.scale = scale; } getPoint(t) { const tx = t * 3 - 1.5; const ty = Math.sin(2 * Math.PI * t); const tz = 0; return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale); } } const path = new CustomSinCurve(4); const tubularSegments = 20; const radius = 1; const radialSegments = 8; const closed = false; addSolidGeometry( 2, -1, new THREE.TubeBufferGeometry( path, tubularSegments, radius, radialSegments, closed ) ); } function addLineGeometry(x, y, geometry) { const material = new THREE.LineBasicMaterial({ color: 0x000000 }); const mesh = new THREE.LineSegments(geometry, material); addObject(x, y, mesh); } { const width = 8; const height = 8; const depth = 8; const thresholdAngle = 15; addLineGeometry( -1, -2, new THREE.EdgesGeometry( new THREE.BoxBufferGeometry(width, height, depth), thresholdAngle ) ); } { const width = 8; const height = 8; const depth = 8; addLineGeometry( 1, -2, new THREE.WireframeGeometry( new THREE.BoxBufferGeometry(width, height, depth) ) ); } { // Points const radius = 7; const widthSegments = 12; const heightSegments = 8; const geometry = new THREE.SphereBufferGeometry( radius, widthSegments, heightSegments ); const material = new THREE.PointsMaterial({ color: 'red', size: 2 // in world units }); const points = new THREE.Points(geometry, material); addObject(0, -2, points); } // Create a light const color = 0xFFFFFF; const intensity = 1; const light = new THREE.DirectionalLight(color, intensity); // position the light - note that the target has not been defined, it defaults to the origin (0,0,0) // left, above, and behind our camera light.position.set(-1, 2, 4); // add the light to the scene scene.add(light); // render the scene, as viewed from the camera, onto the canvas function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const pixelRatio = window.devicePixelRatio; const width = (canvas.clientWidth * pixelRatio) | 0; const height = (canvas.clientHeight * pixelRatio) | 0; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } // animated function render(time) { time *= 0.001; // convert time to seconds // Resize if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } objects.forEach((obj, ndx) => { const speed = .1 + ndx * .05; const rot = time * speed; obj.rotation.x = rot; obj.rotation.y = rot; }); renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); resizableDiv.append(canvas); return resizableDiv; }31:T1a0e,{ const resizableDiv = html`

`; const canvas = html`

`; const infoElem = html`

`; infoElem.style.setProperty('position', 'absolute'); infoElem.style.setProperty('left', '1em'); infoElem.style.setProperty('top', '1em'); infoElem.style.setProperty('background', 'rgba(0,0,0,.8)'); infoElem.style.setProperty('padding', '.5em'); infoElem.style.setProperty('color', 'white'); infoElem.style.setProperty('font-family', 'monospace'); const renderer = new THREE.WebGLRenderer({ canvas }); renderer.setClearColor(0xAAAAAA); renderer.shadowMap.enabled = true; function makeCamera(fov = 40) { const aspect = 2; // the canvas default const zNear = 0.1; const zFar = 1000; return new THREE.PerspectiveCamera(fov, aspect, zNear, zFar); } // Detached camera, that shows nearly all the ground const camera = makeCamera(); camera.position.set(8, 4, 10).multiplyScalar(3); camera.lookAt(0, 0, 0); // Create the scene const scene = new THREE.Scene(); // Create two lights { const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 20, 0); scene.add(light); light.castShadow = true; light.shadow.mapSize.width = 2048; light.shadow.mapSize.height = 2048; const d = 50; light.shadow.camera.left = -d; light.shadow.camera.right = d; light.shadow.camera.top = d; light.shadow.camera.bottom = -d; light.shadow.camera.near = 1; light.shadow.camera.far = 50; light.shadow.bias = 0.001; } { const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 2, 4); scene.add(light); } // Add the ground const groundGeometry = new THREE.PlaneBufferGeometry(50, 50); const groundMaterial = new THREE.MeshPhongMaterial({ color: 0xCC8866 }); const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial); groundMesh.rotation.x = Math.PI * -.5; groundMesh.receiveShadow = true; scene.add(groundMesh); // Add the tank // For the tank there's an Object3D called tank which is used to move everything below it around. const tank = new THREE.Object3D(); scene.add(tank); // Add the tank body to the tank const carWidth = 4; const carHeight = 1; const carLength = 8; const bodyGeometry = new THREE.BoxBufferGeometry( carWidth, carHeight, carLength ); const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x6688AA }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 1.4; bodyMesh.castShadow = true; tank.add(bodyMesh); // Add a camera "fixed" to the body of the tank const tankCameraFov = 75; const tankCamera = makeCamera(tankCameraFov); tankCamera.position.y = 3; tankCamera.position.z = -6; tankCamera.rotation.y = Math.PI; bodyMesh.add(tankCamera); // Add the 6 wheels to the body const wheelRadius = 1; const wheelThickness = .5; const wheelSegments = 6; const wheelGeometry = new THREE.CylinderBufferGeometry( wheelRadius, // top radius wheelRadius, // bottom radius wheelThickness, // height of cylinder wheelSegments ); const wheelMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 }); const wheelPositions = [ [-carWidth / 2 - wheelThickness / 2, -carHeight / 2, carLength / 3], [carWidth / 2 + wheelThickness / 2, -carHeight / 2, carLength / 3], [-carWidth / 2 - wheelThickness / 2, -carHeight / 2, 0], [carWidth / 2 + wheelThickness / 2, -carHeight / 2, 0], [-carWidth / 2 - wheelThickness / 2, -carHeight / 2, -carLength / 3], [carWidth / 2 + wheelThickness / 2, -carHeight / 2, -carLength / 3] ]; const wheelMeshes = wheelPositions.map(position => { const mesh = new THREE.Mesh(wheelGeometry, wheelMaterial); mesh.position.set(...position); mesh.rotation.z = Math.PI * .5; mesh.castShadow = true; bodyMesh.add(mesh); return mesh; }); // Add a dome to the tank body const domeRadius = 2; const domeWidthSubdivisions = 12; const domeHeightSubdivisions = 12; const domePhiStart = 0; const domePhiEnd = Math.PI * 2; const domeThetaStart = 0; const domeThetaEnd = Math.PI * .5; const domeGeometry = new THREE.SphereBufferGeometry( domeRadius, domeWidthSubdivisions, domeHeightSubdivisions, domePhiStart, domePhiEnd, domeThetaStart, domeThetaEnd ); const domeMesh = new THREE.Mesh(domeGeometry, bodyMaterial); domeMesh.castShadow = true; bodyMesh.add(domeMesh); domeMesh.position.y = .5; // Add a turret to the dome const turretWidth = .1; const turretHeight = .1; const turretLength = carLength * .75 * .2; const turretGeometry = new THREE.BoxBufferGeometry( turretWidth, turretHeight, turretLength ); const turretMesh = new THREE.Mesh(turretGeometry, bodyMaterial); const turretPivot = new THREE.Object3D(); turretMesh.castShadow = true; turretPivot.scale.set(5, 5, 5); turretPivot.position.y = .5; turretMesh.position.z = turretLength * .5; turretPivot.add(turretMesh); bodyMesh.add(turretPivot); // Add a camera on the turret const turretCamera = makeCamera(); turretCamera.position.y = .75 * .2; turretMesh.add(turretCamera); // Create a flying target // For the target, the thing the tank is aiming at, there is a targetOrbit (Object3D) which just rotates similar to the earthOrbit above. A targetElevation (Object3D) which is a child of the targetOrbit provides an offset from the targetOrbit and a base elevation. Childed to that is another Object3D called targetBob which just bobs up and down relative to the targetElevation. Finally there's the targetMesh which is just a cube we rotate and change it's colors const targetGeometry = new THREE.SphereBufferGeometry(.5, 6, 3); const targetMaterial = new THREE.MeshPhongMaterial({ color: 0x00FF00, flatShading: true }); const targetMesh = new THREE.Mesh(targetGeometry, targetMaterial); const targetOrbit = new THREE.Object3D(); const targetElevation = new THREE.Object3D(); const targetBob = new THREE.Object3D(); targetMesh.castShadow = true; scene.add(targetOrbit); targetOrbit.add(targetElevation); targetElevation.position.z = carLength * 2; targetElevation.position.y = 8; targetElevation.add(targetBob); targetBob.add(targetMesh); // Attach a camera to the target const targetCamera = makeCamera(); const targetCameraPivot = new THREE.Object3D(); targetCamera.position.y = 1; targetCamera.position.z = -2; targetCamera.rotation.y = Math.PI; targetBob.add(targetCameraPivot); targetCameraPivot.add(targetCamera); // Create a sine-like wave, drawn on the ground const curve = new THREE.SplineCurve([ new THREE.Vector2(-10, 0), new THREE.Vector2(-5, 5), new THREE.Vector2(0, 0), new THREE.Vector2(5, -5), new THREE.Vector2(10, 0), new THREE.Vector2(5, 10), new THREE.Vector2(-5, 10), new THREE.Vector2(-10, -10), new THREE.Vector2(-15, -8), new THREE.Vector2(-10, 0) ]); const points = curve.getPoints(50); const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); const splineObject = new THREE.Line(geometry, material); splineObject.rotation.x = Math.PI * .5; splineObject.position.y = 0.05; scene.add(splineObject); // render the scene, as viewed from the camera, onto the canvas function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const pixelRatio = window.devicePixelRatio; const width = (canvas.clientWidth * pixelRatio) | 0; const height = (canvas.clientHeight * pixelRatio) | 0; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } const targetPosition = new THREE.Vector3(); const tankPosition = new THREE.Vector2(); const tankTarget = new THREE.Vector2(); const cameras = [ { cam: camera, desc: 'detached camera' }, { cam: turretCamera, desc: 'on turret looking at target' }, { cam: targetCamera, desc: 'near target looking at tank' } // { cam: tankCamera, desc: 'above back of tank' } ]; // animated function render(time) { time *= 0.001; // convert time to seconds // Resize if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; cameras.forEach(cameraInfo => { const camera = cameraInfo.cam; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); }); } // move target targetOrbit.rotation.y = time * .27; targetBob.position.y = Math.sin(time * 2) * 4; targetMesh.rotation.x = time * 7; targetMesh.rotation.y = time * 13; targetMaterial.emissive.setHSL((time * 10) % 1, 1, .25); targetMaterial.color.setHSL((time * 10) % 1, 1, .25); // move tank // The code uses a SplineCurve which it can ask for positions along that curve. 0.0 is the start of the curve. 1.0 is the end of the curve. It asks for the current position where it puts the tank. It then asks for a position slightly further down the curve and uses that to point the tank in that direction using Object3D.lookAt. const tankTime = time * .05; curve.getPointAt(tankTime % 1, tankPosition); curve.getPointAt((tankTime + 0.01) % 1, tankTarget); tank.position.set(tankPosition.x, 0, tankPosition.y); tank.lookAt(tankTarget.x, 0, tankTarget.y); // face turret at target // The turret on top of the tank is moved automatically by being a child of the tank. To point it at the target we just ask for the target's world position and then again use Object3D.lookAt targetMesh.getWorldPosition(targetPosition); turretPivot.lookAt(targetPosition); // make the turretCamera look at target // There's a turretCamera which is a child of the turretMesh so it will move up and down and rotate with the turret. We make that aim at the target. turretCamera.lookAt(targetPosition); // make the targetCameraPivot look at the at the tank // There is also a targetCameraPivot which is a child of targetBob so it floats around with the target. We aim that back at the tank. It's purpose is to allow the targetCamera to be offset from the target itself. If we instead made the camera a child of targetBob and just aimed the camera itself it would be inside the target. tank.getWorldPosition(targetPosition); targetCameraPivot.lookAt(targetPosition); // Finally we rotate all the wheels wheelMeshes.forEach(obj => { obj.rotation.x = time * 3; }); // we cycle through our cameras at render time const camera = cameras[(time * .25) % cameras.length | 0]; infoElem.textContent = camera.desc; renderer.render(scene, camera.cam); requestAnimationFrame(render); } requestAnimationFrame(render); resizableDiv.append(canvas); resizableDiv.append(infoElem); return resizableDiv; }33:T1512,{ const resizableDiv = html`

`; const canvas = html`

`; const renderer = new THREE.WebGLRenderer({ canvas }); // To use the RectAreaLight we need to include some extra three.js optional data and we'll include the RectAreaLightHelper to help us visualize the light RectAreaLightUniformsLib.init(); // Four elements to define the frustum // Anything inside the defined frustum will be be drawn. Anything outside will not // 1. field of view (in vertical degrees) const fov = 45; // 2. aspect ratio (width / height) const aspect = 2; // the canvas default // 3 and 4. limits of what will be rendered (after near, and before far) const near = 0.1; const far = 100; // Create the camera const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 10, 20); // Add orbit control // OrbitControls let the user spin or orbit the camera around some point const controls = new OrbitControls(camera, canvas); controls.target.set(0, 5, 0); controls.update(); // Create the scene const scene = new THREE.Scene(); // an object (a plane) - defines the vertices const planeSize = 40; const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize); // Load a texture // First we load the texture, set it to repeating, set the filtering to nearest, and set how many times we want it to repeat. Since the texture is a 2x2 pixel checkerboard, by repeating and setting the repeat to half the size of the plane each check on the checkerboard will be exactly 1 unit large; const loader = new THREE.TextureLoader(); const texture = loader.load(checkerUrl); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.NearestFilter; const repeats = planeSize / 2; texture.repeat.set(repeats, repeats); // Create a material using the texture // The RectAreaLight only works with the MeshStandardMaterial and the MeshPhysicalMaterial so let's change all our materials to MeshStandardMaterial const planeMat = new THREE.MeshStandardMaterial({ map: texture, side: THREE.DoubleSide }); // a mesh: the combination of an object (geometry), to be rendered using a material (how it looks), and located at a specific place (here: default position) const mesh = new THREE.Mesh(planeGeo, planeMat); // Planes default to being in the XY plane but the ground is in the XZ plane so we rotate it. mesh.rotation.x = Math.PI * -.5; scene.add(mesh); // add a cube and a sphere so we have 3 things to light including the plane { const cubeSize = 4; const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize); // The RectAreaLight only works with the MeshStandardMaterial and the MeshPhysicalMaterial so let's change all our materials to MeshStandardMaterial const cubeMat = new THREE.MeshStandardMaterial({ color: '#8AC' }); const mesh = new THREE.Mesh(cubeGeo, cubeMat); mesh.position.set(cubeSize + 1, cubeSize / 2, 0); scene.add(mesh); } { const sphereRadius = 3; const sphereWidthDivisions = 32; const sphereHeightDivisions = 16; const sphereGeo = new THREE.SphereBufferGeometry( sphereRadius, sphereWidthDivisions, sphereHeightDivisions ); // The RectAreaLight only works with the MeshStandardMaterial and the MeshPhysicalMaterial so let's change all our materials to MeshStandardMaterial const sphereMat = new THREE.MeshStandardMaterial({ color: '#CA8' }); const mesh = new THREE.Mesh(sphereGeo, sphereMat); mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0); scene.add(mesh); } // The RectAreaLight represents exactly what it sounds like, a rectangular area of light like a long fluorescent light or maybe a frosted sky light in a ceiling. // Unlike the DirectionalLight and the SpotLight, the RectAreaLight does not use a target. It just uses its rotation. const color = 0xFFFFFF; const intensity = 5; const width = 12; const height = 4; const light = new THREE.RectAreaLight(color, intensity, width, height); light.position.set(0, 10, 0); light.rotation.x = THREE.MathUtils.degToRad(-90); scene.add(light); // Add RectAreaLightHelper // Notice that the helper needs to be a child of the light. It is not a child of the scene like other helpers. const helper = new RectAreaLightHelper(light); light.add(helper); class ColorGUIHelper { constructor(object, prop) { this.object = object; this.prop = prop; } get value() { return `#${this.object[this.prop].getHexString()}`; } set value(hexString) { this.object[this.prop].set(hexString); } } class DegRadHelper { constructor(obj, prop) { this.obj = obj; this.prop = prop; } get value() { return THREE.MathUtils.radToDeg(this.obj[this.prop]); } set value(v) { this.obj[this.prop] = THREE.MathUtils.degToRad(v); } } function makeXYZGUI(gui, vector3, name, onChangeFn) { const folder = gui.addFolder(name); folder.add(vector3, 'x', -10, 10).onChange(onChangeFn); folder.add(vector3, 'y', 0, 10).onChange(onChangeFn); folder.add(vector3, 'z', -10, 10).onChange(onChangeFn); folder.open(); } function updateLight() { helper.update(); } const gui = new dat.GUI(); gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color'); gui.add(light, 'intensity', 0, 10, 0.01); gui.add(light, 'width', 0, 20).onChange(updateLight); gui.add(light, 'height', 0, 20).onChange(updateLight); gui .add(new DegRadHelper(light.rotation, 'x'), 'value', -180, 180) .name('x rotation') .onChange(updateLight); gui .add(new DegRadHelper(light.rotation, 'y'), 'value', -180, 180) .name('y rotation') .onChange(updateLight); gui .add(new DegRadHelper(light.rotation, 'z'), 'value', -180, 180) .name('z rotation') .onChange(updateLight); makeXYZGUI(gui, light.position, 'position', updateLight); // render the scene, as viewed from the camera, onto the canvas function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const pixelRatio = window.devicePixelRatio; const width = (canvas.clientWidth * pixelRatio) | 0; const height = (canvas.clientHeight * pixelRatio) | 0; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } // animated function render(time) { time *= 0.001; // convert time to seconds // Resize if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); gui.domElement.style.setProperty('position', 'absolute'); gui.domElement.style.setProperty('right', '1em'); gui.domElement.style.setProperty('top', '1em'); resizableDiv.append(gui.domElement); resizableDiv.append(canvas); return resizableDiv; }3b:T1985,{ const resizableDiv = html`

`; const canvas = html`

`; const renderer = new THREE.WebGLRenderer({ canvas }); // There is a setting on the WebGLRenderer called physicallyCorrectLights. It effects how light falls off as distance from light. It only affects PointLight and SpotLight. RectAreaLight does this automatically. // For lights though the basic idea is you don't set a distance for them to fade out, and you don't set intensity. Instead you set the power of the light in lumens and then three.js will use physics calculations like real lights. The units of three.js in this case are meters and a 60w light bulb would have around 800 lumens. There's also a decay property. It should be set to 2 for realistic decay. // First we'll turn on physically correct lights renderer.physicallyCorrectLights = true; // Four elements to define the frustum // Anything inside the defined frustum will be be drawn. Anything outside will not // 1. field of view (in vertical degrees) const fov = 45; // 2. aspect ratio (width / height) const aspect = 2; // the canvas default // 3 and 4. limits of what will be rendered (after near, and before far) const near = 0.1; const far = 100; // Create the camera const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 10, 20); // Add orbit control // OrbitControls let the user spin or orbit the camera around some point const controls = new OrbitControls(camera, canvas); controls.target.set(0, 5, 0); controls.update(); // Create the scene const scene = new THREE.Scene(); // an object (a plane) - defines the vertices const planeSize = 40; const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize); // Load a texture // First we load the texture, set it to repeating, set the filtering to nearest, and set how many times we want it to repeat. Since the texture is a 2x2 pixel checkerboard, by repeating and setting the repeat to half the size of the plane each check on the checkerboard will be exactly 1 unit large; const loader = new THREE.TextureLoader(); const texture = loader.load(checkerUrl); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.NearestFilter; const repeats = planeSize / 2; texture.repeat.set(repeats, repeats); // Create a material using the texture const planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide }); // a mesh: the combination of an object (geometry), to be rendered using a material (how it looks), and located at a specific place (here: default position) const mesh = new THREE.Mesh(planeGeo, planeMat); // Planes default to being in the XY plane but the ground is in the XZ plane so we rotate it. mesh.rotation.x = Math.PI * -.5; scene.add(mesh); // add a cube and a sphere so we have 3 things to light including the plane { const cubeSize = 4; const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize); const cubeMat = new THREE.MeshPhongMaterial({ color: '#8AC' }); const mesh = new THREE.Mesh(cubeGeo, cubeMat); mesh.position.set(cubeSize + 1, cubeSize / 2, 0); scene.add(mesh); } { const sphereRadius = 3; const sphereWidthDivisions = 32; const sphereHeightDivisions = 16; const sphereGeo = new THREE.SphereBufferGeometry( sphereRadius, sphereWidthDivisions, sphereHeightDivisions ); const sphereMat = new THREE.MeshPhongMaterial({ color: '#CA8' }); const mesh = new THREE.Mesh(sphereGeo, sphereMat); mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0); scene.add(mesh); } // A PointLight is a light that sits at a point and shoots light in all directions from that point. // Set the power to 800 lumens, the decay to 2, and the distance to Infinity. const color = 0xFFFFFF; const intensity = 1; const light = new THREE.PointLight(color, intensity); light.power = 800; light.decay = 2; light.distance = Infinity; light.position.set(0, 10, 0); scene.add(light); // Note that at some level a PointLightHelper has no um, point. It just draws a small wireframe diamond. It could just as easily be any shape you want, just add a mesh to the light itself. const helper = new THREE.PointLightHelper(light); scene.add(helper); class ColorGUIHelper { constructor(object, prop) { this.object = object; this.prop = prop; } get value() { return `#${this.object[this.prop].getHexString()}`; } set value(hexString) { this.object[this.prop].set(hexString); } } function makeXYZGUI(gui, vector3, name, onChangeFn) { const folder = gui.addFolder(name); folder.add(vector3, 'x', -10, 10).onChange(onChangeFn); folder.add(vector3, 'y', 0, 10).onChange(onChangeFn); folder.add(vector3, 'z', -10, 10).onChange(onChangeFn); folder.open(); } function updateLight() { helper.update(); } const gui = new dat.GUI(); gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color'); gui.add(light, 'decay', 0, 4, 0.01); gui.add(light, 'power', 0, 2000); makeXYZGUI(gui, light.position, 'position', updateLight); // render the scene, as viewed from the camera, onto the canvas function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const pixelRatio = window.devicePixelRatio; const width = (canvas.clientWidth * pixelRatio) | 0; const height = (canvas.clientHeight * pixelRatio) | 0; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } // animated function render(time) { time *= 0.001; // convert time to seconds // Resize if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); gui.domElement.style.setProperty('position', 'absolute'); gui.domElement.style.setProperty('right', '1em'); gui.domElement.style.setProperty('top', '1em'); resizableDiv.append(gui.domElement); resizableDiv.append(canvas); return resizableDiv; }3c:T1c2e,{ const resizableDiv = html`

`; const canvas = html`

`; // Let's change the example so it has 2 cameras. One will show our scene as we see it above, the other will show another camera looking at the scene the first camera is drawing and showing that camera's frustum. // To do this we can use the scissor function of three.js. Let's change it to draw 2 scenes with 2 cameras side by side using the scissor function // First off let's use some HTML and CSS to define 2 side by side elements. This will also help us with events so both cameras can easily have their own OrbitControls. const view1Elem = html`

`; const view2Elem = html`

`; const splitDiv = html`

${view1Elem}${view2Elem}