2d:null 2e:["$","title",null,{"children":"Isometric logos created with three.js | Tom MacWright | Observable"}] 33:Tc52,notebookLogo = { const T = THREESVG; var scene = new T.Scene(); scene.background = new T.Color('#FFFCEB'); const cameraSquare = 2; var camera = new THREE.OrthographicCamera( -cameraSquare, cameraSquare, cameraSquare, -cameraSquare, 0, 10000); camera.position.set( 2, 2, 2 ); // all components equal camera.lookAt( scene.position ); // var renderer = new T.SVGRenderer(); var renderer = new T.WebGLRenderer(); renderer.setSize( width, width ); var light = new THREE.DirectionalLight( 0xffffff, 0.95 ); light.position.set( 0, 2, 2 ).normalize(); scene.add( light ); // front cardboard var geometry = new T.BoxGeometry( 2, 0.1, sheetY ); var material = new THREE.MeshToonMaterial( { color: 0x886A56 } ); var cube = new T.Mesh( geometry, material ); scene.add( cube ); // back cardboard /* var geometry = new T.BoxGeometry( 2, 0.1, sheetY ); var material = new THREE.MeshToonMaterial( { color: 0x886A56 } ); var cube = new T.Mesh( geometry, material ); cube.position.z = -sheetY - 0.1; scene.add( cube ); */ var material = new THREE.MeshToonMaterial( { color: 0xffffff } ); for (var x = -0.9; x < 0.9; x += 0.2) { var geometry = new THREE.TorusGeometry( 0.2, 0.02, 8, 10 ); var torus = new THREE.Mesh( geometry, material ); // torus.rotateY(90); torus.position.z = (-sheetY / 2) - 0.05; torus.position.x = x; torus.rotation.y = Math.PI / 2; scene.add( torus ); } var geometry = new T.BoxGeometry( 2, 0.1, sheetY ); var material = new THREE.MeshToonMaterial( { color: 0xFFFFFF } ); var cube = new T.Mesh( geometry, material ); cube.position.y = 0.1; scene.add( cube ); var material = new T.MeshToonMaterial({ color: 0x76C4E2 }); var geometry = new T.CylinderGeometry( 0.08, 0.08, 2, 12 ); var material = new T.MeshToonMaterial( {color: 0xffff00} ); var cylinder = new T.Mesh( geometry, material ); cylinder.position.x = 1.4; cylinder.rotation.x = Math.PI / 2; scene.add( cylinder ); var geometry = new T.CylinderGeometry( 0.08, 0, 0.16, 12 ); var material = new T.MeshToonMaterial( {color: 0xFAAD3F} ); var cylinder = new T.Mesh( geometry, material ); cylinder.position.x = 1.4; cylinder.position.z = -1.08; cylinder.rotation.x = Math.PI / 2; scene.add( cylinder ); var geometry = new T.CylinderGeometry( 0.08, 0.08, 0.1, 12 ); var material = new T.MeshToonMaterial( {color: 0xFAAD3F} ); var cylinder = new T.Mesh( geometry, material ); cylinder.position.x = 1.4; cylinder.position.z = 1.1; cylinder.rotation.x = Math.PI / 2; scene.add( cylinder ); var material = new THREE.LineBasicMaterial({ color: 0x76C4E2 }); var geometry = new THREE.Geometry(); for (let line = -1; line < 1.5; line += 0.2) { geometry.vertices.push( new THREE.Vector3( -0.95, 0.2, line ), new THREE.Vector3( 0.95, 0.2, line ) ); } var line = new THREE.LineSegments( geometry, material ); scene.add( line ); renderer.render(scene, camera); renderer.domElement.style.width = `${width}px`; renderer.domElement.style.height = `${width}px`; return renderer.domElement; }34:Ta93,deepLogo = { const T = THREESVG; var scene = new T.Scene(); scene.background = new T.Color('#CDECFF'); // lightest-blue const cameraSquare = 2; var camera = new THREE.OrthographicCamera( -cameraSquare, cameraSquare, cameraSquare, -cameraSquare, 0, 10000); camera.position.set(2, 3, 2); // all components equal camera.lookAt(scene.position.sub(new T.Vector3(1, 0, 1))); // var renderer = new T.SVGRenderer(); var renderer = new T.WebGLRenderer(); renderer.setSize(width, width); let light = new THREE.PointLight( 0xffffff, 0.5, 0 ); light.position.set( 5, 5, 9 ); scene.add(light); // cube matrix let d = 6; let maze = gm(d); let h = 0.2; let space = 0.4; let offset = space; let w = space + 0.05; let adj = space/2; var material = new T.MeshLambertMaterial( { color: 0x408BC9, emissive: 0x408BC9 } ); function mazeGroup() { let group = new T.Group(); for (var x = 0; x < d; x++) { for (var y = 0; y < d; y++) { if (maze[y][x].left && !(y == 0 && x == 0)) { var geometry = new T.BoxGeometry( 0.05, h, w); var cube = new T.Mesh( geometry, material ); cube.position.x = x * space; cube.position.z = y * space; group.add(cube); } if (maze[y][x].right && !(y == d - 1 && x == d - 1)) { var geometry = new T.BoxGeometry( 0.05, h, w ); var cube = new T.Mesh( geometry, material ); cube.position.x = x * space + offset; cube.position.z = y * space; group.add(cube); } if (maze[y][x].top) { var geometry = new T.BoxGeometry( w, h, 0.05 ); var cube = new T.Mesh( geometry, material ); cube.position.x = x * space + offset/2; cube.position.z = y * space - adj; group.add(cube); } if (maze[y][x].bottom) { var geometry = new T.BoxGeometry( w, h, 0.05 ); var cube = new T.Mesh( geometry, material ); cube.position.x = x * space + offset/2; cube.position.z = y * space + space - adj; group.add(cube); } } } return group; } let group1 = mazeGroup(); group1.position.y = 1; scene.add(group1); var geometry = new THREE.SphereGeometry( 0.15, 32, 32 ); var material = new THREE.MeshLambertMaterial( {color: 0xffffff,emissive:0xcccccc } ); var sphere = new THREE.Mesh( geometry, material ); sphere.position.x = 2.5; sphere.position.y = 0.9; sphere.position.z = 2; scene.add( sphere ); renderer.render(scene, camera); renderer.domElement.style.width = `${width}px`; renderer.domElement.style.height = `${width}px`; return renderer.domElement; }35:Tcc8b,THREESVG = { /** * @author mrdoob / http://mrdoob.com/ * @author supereggbert / http://www.paulbrunt.co.uk/ * @author julianwa / https://github.com/julianwa */ THREE.RenderableObject = function () { this.id = 0; this.object = null; this.z = 0; this.renderOrder = 0; }; // THREE.RenderableFace = function () { this.id = 0; this.v1 = new THREE.RenderableVertex(); this.v2 = new THREE.RenderableVertex(); this.v3 = new THREE.RenderableVertex(); this.normalModel = new THREE.Vector3(); this.vertexNormalsModel = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ]; this.vertexNormalsLength = 0; this.color = new THREE.Color(); this.material = null; this.uvs = [ new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2() ]; this.z = 0; this.renderOrder = 0; }; // THREE.RenderableVertex = function () { this.position = new THREE.Vector3(); this.positionWorld = new THREE.Vector3(); this.positionScreen = new THREE.Vector4(); this.visible = true; }; THREE.RenderableVertex.prototype.copy = function ( vertex ) { this.positionWorld.copy( vertex.positionWorld ); this.positionScreen.copy( vertex.positionScreen ); }; // THREE.RenderableLine = function () { this.id = 0; this.v1 = new THREE.RenderableVertex(); this.v2 = new THREE.RenderableVertex(); this.vertexColors = [ new THREE.Color(), new THREE.Color() ]; this.material = null; this.z = 0; this.renderOrder = 0; }; // THREE.RenderableSprite = function () { this.id = 0; this.object = null; this.x = 0; this.y = 0; this.z = 0; this.rotation = 0; this.scale = new THREE.Vector2(); this.material = null; this.renderOrder = 0; }; // THREE.Projector = function () { var _object, _objectCount, _objectPool = [], _objectPoolLength = 0, _vertex, _vertexCount, _vertexPool = [], _vertexPoolLength = 0, _face, _faceCount, _facePool = [], _facePoolLength = 0, _line, _lineCount, _linePool = [], _linePoolLength = 0, _sprite, _spriteCount, _spritePool = [], _spritePoolLength = 0, _renderData = { objects: [], lights: [], elements: [] }, _vector3 = new THREE.Vector3(), _vector4 = new THREE.Vector4(), _clipBox = new THREE.Box3( new THREE.Vector3( - 1, - 1, - 1 ), new THREE.Vector3( 1, 1, 1 ) ), _boundingBox = new THREE.Box3(), _points3 = new Array( 3 ), _viewMatrix = new THREE.Matrix4(), _viewProjectionMatrix = new THREE.Matrix4(), _modelMatrix, _modelViewProjectionMatrix = new THREE.Matrix4(), _normalMatrix = new THREE.Matrix3(), _frustum = new THREE.Frustum(), _clippedVertex1PositionScreen = new THREE.Vector4(), _clippedVertex2PositionScreen = new THREE.Vector4(); // this.projectVector = function ( vector, camera ) { console.warn( 'THREE.Projector: .projectVector() is now vector.project().' ); vector.project( camera ); }; this.unprojectVector = function ( vector, camera ) { console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' ); vector.unproject( camera ); }; this.pickingRay = function () { console.error( 'THREE.Projector: .pickingRay() is now raycaster.setFromCamera().' ); }; // var RenderList = function () { var normals = []; var colors = []; var uvs = []; var object = null; var material = null; var normalMatrix = new THREE.Matrix3(); function setObject( value ) { object = value; material = object.material; normalMatrix.getNormalMatrix( object.matrixWorld ); normals.length = 0; colors.length = 0; uvs.length = 0; } function projectVertex( vertex ) { var position = vertex.position; var positionWorld = vertex.positionWorld; var positionScreen = vertex.positionScreen; positionWorld.copy( position ).applyMatrix4( _modelMatrix ); positionScreen.copy( positionWorld ).applyMatrix4( _viewProjectionMatrix ); var invW = 1 / positionScreen.w; positionScreen.x *= invW; positionScreen.y *= invW; positionScreen.z *= invW; vertex.visible = positionScreen.x >= - 1 && positionScreen.x <= 1 && positionScreen.y >= - 1 && positionScreen.y <= 1 && positionScreen.z >= - 1 && positionScreen.z <= 1; } function pushVertex( x, y, z ) { _vertex = getNextVertexInPool(); _vertex.position.set( x, y, z ); projectVertex( _vertex ); } function pushNormal( x, y, z ) { normals.push( x, y, z ); } function pushColor( r, g, b ) { colors.push( r, g, b ); } function pushUv( x, y ) { uvs.push( x, y ); } function checkTriangleVisibility( v1, v2, v3 ) { if ( v1.visible === true || v2.visible === true || v3.visible === true ) return true; _points3[ 0 ] = v1.positionScreen; _points3[ 1 ] = v2.positionScreen; _points3[ 2 ] = v3.positionScreen; return _clipBox.intersectsBox( _boundingBox.setFromPoints( _points3 ) ); } function checkBackfaceCulling( v1, v2, v3 ) { return ( ( v3.positionScreen.x - v1.positionScreen.x ) * ( v2.positionScreen.y - v1.positionScreen.y ) - ( v3.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) ) < 0; } function pushLine( a, b ) { var v1 = _vertexPool[ a ]; var v2 = _vertexPool[ b ]; // Clip v1.positionScreen.copy( v1.position ).applyMatrix4( _modelViewProjectionMatrix ); v2.positionScreen.copy( v2.position ).applyMatrix4( _modelViewProjectionMatrix ); if ( clipLine( v1.positionScreen, v2.positionScreen ) === true ) { // Perform the perspective divide v1.positionScreen.multiplyScalar( 1 / v1.positionScreen.w ); v2.positionScreen.multiplyScalar( 1 / v2.positionScreen.w ); _line = getNextLineInPool(); _line.id = object.id; _line.v1.copy( v1 ); _line.v2.copy( v2 ); _line.z = Math.max( v1.positionScreen.z, v2.positionScreen.z ); _line.renderOrder = object.renderOrder; _line.material = object.material; if ( object.material.vertexColors === THREE.VertexColors ) { _line.vertexColors[ 0 ].fromArray( colors, a * 3 ); _line.vertexColors[ 1 ].fromArray( colors, b * 3 ); } _renderData.elements.push( _line ); } } function pushTriangle( a, b, c ) { var v1 = _vertexPool[ a ]; var v2 = _vertexPool[ b ]; var v3 = _vertexPool[ c ]; if ( checkTriangleVisibility( v1, v2, v3 ) === false ) return; if ( material.side === THREE.DoubleSide || checkBackfaceCulling( v1, v2, v3 ) === true ) { _face = getNextFaceInPool(); _face.id = object.id; _face.v1.copy( v1 ); _face.v2.copy( v2 ); _face.v3.copy( v3 ); _face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3; _face.renderOrder = object.renderOrder; // use first vertex normal as face normal _face.normalModel.fromArray( normals, a * 3 ); _face.normalModel.applyMatrix3( normalMatrix ).normalize(); for ( var i = 0; i < 3; i ++ ) { var normal = _face.vertexNormalsModel[ i ]; normal.fromArray( normals, arguments[ i ] * 3 ); normal.applyMatrix3( normalMatrix ).normalize(); var uv = _face.uvs[ i ]; uv.fromArray( uvs, arguments[ i ] * 2 ); } _face.vertexNormalsLength = 3; _face.material = object.material; _renderData.elements.push( _face ); } } return { setObject: setObject, projectVertex: projectVertex, checkTriangleVisibility: checkTriangleVisibility, checkBackfaceCulling: checkBackfaceCulling, pushVertex: pushVertex, pushNormal: pushNormal, pushColor: pushColor, pushUv: pushUv, pushLine: pushLine, pushTriangle: pushTriangle }; }; var renderList = new RenderList(); function projectObject( object ) { if ( object.visible === false ) return; if ( object instanceof THREE.Light ) { _renderData.lights.push( object ); } else if ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Points ) { if ( object.material.visible === false ) return; if ( object.frustumCulled === true && _frustum.intersectsObject( object ) === false ) return; addObject( object ); } else if ( object instanceof THREE.Sprite ) { if ( object.material.visible === false ) return; if ( object.frustumCulled === true && _frustum.intersectsSprite( object ) === false ) return; addObject( object ); } var children = object.children; for ( var i = 0, l = children.length; i < l; i ++ ) { projectObject( children[ i ] ); } } function addObject( object ) { _object = getNextObjectInPool(); _object.id = object.id; _object.object = object; _vector3.setFromMatrixPosition( object.matrixWorld ); _vector3.applyMatrix4( _viewProjectionMatrix ); _object.z = _vector3.z; _object.renderOrder = object.renderOrder; _renderData.objects.push( _object ); } this.projectScene = function ( scene, camera, sortObjects, sortElements ) { _faceCount = 0; _lineCount = 0; _spriteCount = 0; _renderData.elements.length = 0; if ( scene.autoUpdate === true ) scene.updateMatrixWorld(); if ( camera.parent === null ) camera.updateMatrixWorld(); _viewMatrix.copy( camera.matrixWorldInverse ); _viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix ); _frustum.setFromMatrix( _viewProjectionMatrix ); // _objectCount = 0; _renderData.objects.length = 0; _renderData.lights.length = 0; projectObject( scene ); if ( sortObjects === true ) { _renderData.objects.sort( painterSort ); } // var objects = _renderData.objects; for ( var o = 0, ol = objects.length; o < ol; o ++ ) { var object = objects[ o ].object; var geometry = object.geometry; renderList.setObject( object ); _modelMatrix = object.matrixWorld; _vertexCount = 0; if ( object instanceof THREE.Mesh ) { if ( geometry instanceof THREE.BufferGeometry ) { var attributes = geometry.attributes; var groups = geometry.groups; if ( attributes.position === undefined ) continue; var positions = attributes.position.array; for ( var i = 0, l = positions.length; i < l; i += 3 ) { renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] ); } if ( attributes.normal !== undefined ) { var normals = attributes.normal.array; for ( var i = 0, l = normals.length; i < l; i += 3 ) { renderList.pushNormal( normals[ i ], normals[ i + 1 ], normals[ i + 2 ] ); } } if ( attributes.uv !== undefined ) { var uvs = attributes.uv.array; for ( var i = 0, l = uvs.length; i < l; i += 2 ) { renderList.pushUv( uvs[ i ], uvs[ i + 1 ] ); } } if ( geometry.index !== null ) { var indices = geometry.index.array; if ( groups.length > 0 ) { for ( var g = 0; g < groups.length; g ++ ) { var group = groups[ g ]; for ( var i = group.start, l = group.start + group.count; i < l; i += 3 ) { renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] ); } } } else { for ( var i = 0, l = indices.length; i < l; i += 3 ) { renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] ); } } } else { for ( var i = 0, l = positions.length / 3; i < l; i += 3 ) { renderList.pushTriangle( i, i + 1, i + 2 ); } } } else if ( geometry instanceof THREE.Geometry ) { var vertices = geometry.vertices; var faces = geometry.faces; var faceVertexUvs = geometry.faceVertexUvs[ 0 ]; _normalMatrix.getNormalMatrix( _modelMatrix ); var material = object.material; var isMultiMaterial = Array.isArray( material ); for ( var v = 0, vl = vertices.length; v < vl; v ++ ) { var vertex = vertices[ v ]; _vector3.copy( vertex ); if ( material.morphTargets === true ) { var morphTargets = geometry.morphTargets; var morphInfluences = object.morphTargetInfluences; for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) { var influence = morphInfluences[ t ]; if ( influence === 0 ) continue; var target = morphTargets[ t ]; var targetVertex = target.vertices[ v ]; _vector3.x += ( targetVertex.x - vertex.x ) * influence; _vector3.y += ( targetVertex.y - vertex.y ) * influence; _vector3.z += ( targetVertex.z - vertex.z ) * influence; } } renderList.pushVertex( _vector3.x, _vector3.y, _vector3.z ); } for ( var f = 0, fl = faces.length; f < fl; f ++ ) { var face = faces[ f ]; material = isMultiMaterial === true ? object.material[ face.materialIndex ] : object.material; if ( material === undefined ) continue; var side = material.side; var v1 = _vertexPool[ face.a ]; var v2 = _vertexPool[ face.b ]; var v3 = _vertexPool[ face.c ]; if ( renderList.checkTriangleVisibility( v1, v2, v3 ) === false ) continue; var visible = renderList.checkBackfaceCulling( v1, v2, v3 ); if ( side !== THREE.DoubleSide ) { if ( side === THREE.FrontSide && visible === false ) continue; if ( side === THREE.BackSide && visible === true ) continue; } _face = getNextFaceInPool(); _face.id = object.id; _face.v1.copy( v1 ); _face.v2.copy( v2 ); _face.v3.copy( v3 ); _face.normalModel.copy( face.normal ); if ( visible === false && ( side === THREE.BackSide || side === THREE.DoubleSide ) ) { _face.normalModel.negate(); } _face.normalModel.applyMatrix3( _normalMatrix ).normalize(); var faceVertexNormals = face.vertexNormals; for ( var n = 0, nl = Math.min( faceVertexNormals.length, 3 ); n < nl; n ++ ) { var normalModel = _face.vertexNormalsModel[ n ]; normalModel.copy( faceVertexNormals[ n ] ); if ( visible === false && ( side === THREE.BackSide || side === THREE.DoubleSide ) ) { normalModel.negate(); } normalModel.applyMatrix3( _normalMatrix ).normalize(); } _face.vertexNormalsLength = faceVertexNormals.length; var vertexUvs = faceVertexUvs[ f ]; if ( vertexUvs !== undefined ) { for ( var u = 0; u < 3; u ++ ) { _face.uvs[ u ].copy( vertexUvs[ u ] ); } } _face.color = face.color; _face.material = material; _face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3; _face.renderOrder = object.renderOrder; _renderData.elements.push( _face ); } } } else if ( object instanceof THREE.Line ) { _modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix ); if ( geometry instanceof THREE.BufferGeometry ) { var attributes = geometry.attributes; if ( attributes.position !== undefined ) { var positions = attributes.position.array; for ( var i = 0, l = positions.length; i < l; i += 3 ) { renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] ); } if ( attributes.color !== undefined ) { var colors = attributes.color.array; for ( var i = 0, l = colors.length; i < l; i += 3 ) { renderList.pushColor( colors[ i ], colors[ i + 1 ], colors[ i + 2 ] ); } } if ( geometry.index !== null ) { var indices = geometry.index.array; for ( var i = 0, l = indices.length; i < l; i += 2 ) { renderList.pushLine( indices[ i ], indices[ i + 1 ] ); } } else { var step = object instanceof THREE.LineSegments ? 2 : 1; for ( var i = 0, l = ( positions.length / 3 ) - 1; i < l; i += step ) { renderList.pushLine( i, i + 1 ); } } } } else if ( geometry instanceof THREE.Geometry ) { var vertices = object.geometry.vertices; if ( vertices.length === 0 ) continue; v1 = getNextVertexInPool(); v1.positionScreen.copy( vertices[ 0 ] ).applyMatrix4( _modelViewProjectionMatrix ); var step = object instanceof THREE.LineSegments ? 2 : 1; for ( var v = 1, vl = vertices.length; v < vl; v ++ ) { v1 = getNextVertexInPool(); v1.positionScreen.copy( vertices[ v ] ).applyMatrix4( _modelViewProjectionMatrix ); if ( ( v + 1 ) % step > 0 ) continue; v2 = _vertexPool[ _vertexCount - 2 ]; _clippedVertex1PositionScreen.copy( v1.positionScreen ); _clippedVertex2PositionScreen.copy( v2.positionScreen ); if ( clipLine( _clippedVertex1PositionScreen, _clippedVertex2PositionScreen ) === true ) { // Perform the perspective divide _clippedVertex1PositionScreen.multiplyScalar( 1 / _clippedVertex1PositionScreen.w ); _clippedVertex2PositionScreen.multiplyScalar( 1 / _clippedVertex2PositionScreen.w ); _line = getNextLineInPool(); _line.id = object.id; _line.v1.positionScreen.copy( _clippedVertex1PositionScreen ); _line.v2.positionScreen.copy( _clippedVertex2PositionScreen ); _line.z = Math.max( _clippedVertex1PositionScreen.z, _clippedVertex2PositionScreen.z ); _line.renderOrder = object.renderOrder; _line.material = object.material; if ( object.material.vertexColors === THREE.VertexColors ) { _line.vertexColors[ 0 ].copy( object.geometry.colors[ v ] ); _line.vertexColors[ 1 ].copy( object.geometry.colors[ v - 1 ] ); } _renderData.elements.push( _line ); } } } } else if ( object instanceof THREE.Points ) { _modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix ); if ( geometry instanceof THREE.Geometry ) { var vertices = object.geometry.vertices; for ( var v = 0, vl = vertices.length; v < vl; v ++ ) { var vertex = vertices[ v ]; _vector4.set( vertex.x, vertex.y, vertex.z, 1 ); _vector4.applyMatrix4( _modelViewProjectionMatrix ); pushPoint( _vector4, object, camera ); } } else if ( geometry instanceof THREE.BufferGeometry ) { var attributes = geometry.attributes; if ( attributes.position !== undefined ) { var positions = attributes.position.array; for ( var i = 0, l = positions.length; i < l; i += 3 ) { _vector4.set( positions[ i ], positions[ i + 1 ], positions[ i + 2 ], 1 ); _vector4.applyMatrix4( _modelViewProjectionMatrix ); pushPoint( _vector4, object, camera ); } } } } else if ( object instanceof THREE.Sprite ) { _vector4.set( _modelMatrix.elements[ 12 ], _modelMatrix.elements[ 13 ], _modelMatrix.elements[ 14 ], 1 ); _vector4.applyMatrix4( _viewProjectionMatrix ); pushPoint( _vector4, object, camera ); } } if ( sortElements === true ) { _renderData.elements.sort( painterSort ); } return _renderData; }; function pushPoint( _vector4, object, camera ) { var invW = 1 / _vector4.w; _vector4.z *= invW; if ( _vector4.z >= - 1 && _vector4.z <= 1 ) { _sprite = getNextSpriteInPool(); _sprite.id = object.id; _sprite.x = _vector4.x * invW; _sprite.y = _vector4.y * invW; _sprite.z = _vector4.z; _sprite.renderOrder = object.renderOrder; _sprite.object = object; _sprite.rotation = object.rotation; _sprite.scale.x = object.scale.x * Math.abs( _sprite.x - ( _vector4.x + camera.projectionMatrix.elements[ 0 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 12 ] ) ); _sprite.scale.y = object.scale.y * Math.abs( _sprite.y - ( _vector4.y + camera.projectionMatrix.elements[ 5 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 13 ] ) ); _sprite.material = object.material; _renderData.elements.push( _sprite ); } } // Pools function getNextObjectInPool() { if ( _objectCount === _objectPoolLength ) { var object = new THREE.RenderableObject(); _objectPool.push( object ); _objectPoolLength ++; _objectCount ++; return object; } return _objectPool[ _objectCount ++ ]; } function getNextVertexInPool() { if ( _vertexCount === _vertexPoolLength ) { var vertex = new THREE.RenderableVertex(); _vertexPool.push( vertex ); _vertexPoolLength ++; _vertexCount ++; return vertex; } return _vertexPool[ _vertexCount ++ ]; } function getNextFaceInPool() { if ( _faceCount === _facePoolLength ) { var face = new THREE.RenderableFace(); _facePool.push( face ); _facePoolLength ++; _faceCount ++; return face; } return _facePool[ _faceCount ++ ]; } function getNextLineInPool() { if ( _lineCount === _linePoolLength ) { var line = new THREE.RenderableLine(); _linePool.push( line ); _linePoolLength ++; _lineCount ++; return line; } return _linePool[ _lineCount ++ ]; } function getNextSpriteInPool() { if ( _spriteCount === _spritePoolLength ) { var sprite = new THREE.RenderableSprite(); _spritePool.push( sprite ); _spritePoolLength ++; _spriteCount ++; return sprite; } return _spritePool[ _spriteCount ++ ]; } // function painterSort( a, b ) { if ( a.renderOrder !== b.renderOrder ) { return a.renderOrder - b.renderOrder; } else if ( a.z !== b.z ) { return b.z - a.z; } else if ( a.id !== b.id ) { return a.id - b.id; } else { return 0; } } function clipLine( s1, s2 ) { var alpha1 = 0, alpha2 = 1, // Calculate the boundary coordinate of each vertex for the near and far clip planes, // Z = -1 and Z = +1, respectively. bc1near = s1.z + s1.w, bc2near = s2.z + s2.w, bc1far = - s1.z + s1.w, bc2far = - s2.z + s2.w; if ( bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0 ) { // Both vertices lie entirely within all clip planes. return true; } else if ( ( bc1near < 0 && bc2near < 0 ) || ( bc1far < 0 && bc2far < 0 ) ) { // Both vertices lie entirely outside one of the clip planes. return false; } else { // The line segment spans at least one clip plane. if ( bc1near < 0 ) { // v1 lies outside the near plane, v2 inside alpha1 = Math.max( alpha1, bc1near / ( bc1near - bc2near ) ); } else if ( bc2near < 0 ) { // v2 lies outside the near plane, v1 inside alpha2 = Math.min( alpha2, bc1near / ( bc1near - bc2near ) ); } if ( bc1far < 0 ) { // v1 lies outside the far plane, v2 inside alpha1 = Math.max( alpha1, bc1far / ( bc1far - bc2far ) ); } else if ( bc2far < 0 ) { // v2 lies outside the far plane, v2 inside alpha2 = Math.min( alpha2, bc1far / ( bc1far - bc2far ) ); } if ( alpha2 < alpha1 ) { // The line segment spans two boundaries, but is outside both of them. // (This can't happen when we're only clipping against just near/far but good // to leave the check here for future usage if other clip planes are added.) return false; } else { // Update the s1 and s2 vertices to match the clipped line segment. s1.lerp( s2, alpha1 ); s2.lerp( s1, 1 - alpha2 ); return true; } } } }; /** * @author mrdoob / http://mrdoob.com/ */ THREE.SVGObject = function ( node ) { THREE.Object3D.call( this ); this.node = node; }; THREE.SVGObject.prototype = Object.create( THREE.Object3D.prototype ); THREE.SVGObject.prototype.constructor = THREE.SVGObject; THREE.SVGRenderer = function () { console.log( 'THREE.SVGRenderer', THREE.REVISION ); var _this = this, _renderData, _elements, _lights, _projector = new THREE.Projector(), _svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ), _svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf, _v1, _v2, _v3, _v4, _clipBox = new THREE.Box2(), _elemBox = new THREE.Box2(), _color = new THREE.Color(), _diffuseColor = new THREE.Color(), _ambientLight = new THREE.Color(), _directionalLights = new THREE.Color(), _pointLights = new THREE.Color(), _clearColor = new THREE.Color(), _clearAlpha = 1, _vector3 = new THREE.Vector3(), // Needed for PointLight _centroid = new THREE.Vector3(), _normal = new THREE.Vector3(), _normalViewMatrix = new THREE.Matrix3(), _viewMatrix = new THREE.Matrix4(), _viewProjectionMatrix = new THREE.Matrix4(), _svgPathPool = [], _svgNode, _pathCount = 0, _currentPath, _currentStyle, _quality = 1, _precision = null; this.domElement = _svg; this.autoClear = true; this.sortObjects = true; this.sortElements = true; this.info = { render: { vertices: 0, faces: 0 } }; this.setQuality = function( quality ) { switch ( quality ) { case "high": _quality = 1; break; case "low": _quality = 0; break; } }; // WebGLRenderer compatibility this.supportsVertexTextures = function () {}; this.setFaceCulling = function () {}; this.setClearColor = function ( color, alpha ) { _clearColor.set( color ); _clearAlpha = alpha !== undefined ? alpha : 1; }; this.setPixelRatio = function () {}; this.setSize = function( width, height ) { _svgWidth = width; _svgHeight = height; _svgWidthHalf = _svgWidth / 2; _svgHeightHalf = _svgHeight / 2; _svg.setAttribute( 'viewBox', ( - _svgWidthHalf ) + ' ' + ( - _svgHeightHalf ) + ' ' + _svgWidth + ' ' + _svgHeight ); _svg.setAttribute( 'width', _svgWidth ); _svg.setAttribute( 'height', _svgHeight ); _clipBox.min.set( - _svgWidthHalf, - _svgHeightHalf ); _clipBox.max.set( _svgWidthHalf, _svgHeightHalf ); }; this.setPrecision = function ( precision ) { _precision = precision; }; function removeChildNodes() { _pathCount = 0; while ( _svg.childNodes.length > 0 ) { _svg.removeChild( _svg.childNodes[ 0 ] ); } } function getSvgColor ( color, opacity ) { var arg = Math.floor( color.r * 255 ) + ',' + Math.floor( color.g * 255 ) + ',' + Math.floor( color.b * 255 ); if ( opacity === undefined || opacity === 1 ) return 'rgb(' + arg + ')'; return 'rgb(' + arg + '); fill-opacity: ' + opacity; } function convert ( c ) { return _precision !== null ? c.toFixed(_precision) : c; } this.clear = function () { removeChildNodes(); _svg.style.backgroundColor = getSvgColor( _clearColor, _clearAlpha ); }; this.render = function ( scene, camera ) { if ( camera instanceof THREE.Camera === false ) { console.error( 'THREE.SVGRenderer.render: camera is not an instance of THREE.Camera.' ); return; } var background = scene.background; if ( background && background.isColor ) { removeChildNodes(); _svg.style.backgroundColor = getSvgColor( background ); } else if ( this.autoClear === true ) { this.clear(); } _this.info.render.vertices = 0; _this.info.render.faces = 0; _viewMatrix.copy( camera.matrixWorldInverse ); _viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix ); _renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements ); _elements = _renderData.elements; _lights = _renderData.lights; _normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse ); calculateLights( _lights ); // reset accumulated path _currentPath = ''; _currentStyle = ''; for ( var e = 0, el = _elements.length; e < el; e ++ ) { var element = _elements[ e ]; var material = element.material; if ( material === undefined || material.opacity === 0 ) continue; _elemBox.makeEmpty(); if ( element instanceof THREE.RenderableSprite ) { _v1 = element; _v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf; renderSprite( _v1, element, material ); } else if ( element instanceof THREE.RenderableLine ) { _v1 = element.v1; _v2 = element.v2; _v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf; _v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf; _elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] ); if ( _clipBox.intersectsBox( _elemBox ) === true ) { renderLine( _v1, _v2, element, material ); } } else if ( element instanceof THREE.RenderableFace ) { _v1 = element.v1; _v2 = element.v2; _v3 = element.v3; if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue; if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue; if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue; _v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf; _v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf; _v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf; _elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen, _v3.positionScreen ] ); if ( _clipBox.intersectsBox( _elemBox ) === true ) { renderFace3( _v1, _v2, _v3, element, material ); } } } flushPath(); // just to flush last svg:path scene.traverseVisible( function ( object ) { if ( object instanceof THREE.SVGObject ) { _vector3.setFromMatrixPosition( object.matrixWorld ); _vector3.applyMatrix4( _viewProjectionMatrix ); var x = _vector3.x * _svgWidthHalf; var y = - _vector3.y * _svgHeightHalf; var node = object.node; node.setAttribute( 'transform', 'translate(' + x + ',' + y + ')' ); _svg.appendChild( node ); } } ); }; function calculateLights( lights ) { _ambientLight.setRGB( 0, 0, 0 ); _directionalLights.setRGB( 0, 0, 0 ); _pointLights.setRGB( 0, 0, 0 ); for ( var l = 0, ll = lights.length; l < ll; l ++ ) { var light = lights[ l ]; var lightColor = light.color; if ( light instanceof THREE.AmbientLight ) { _ambientLight.r += lightColor.r; _ambientLight.g += lightColor.g; _ambientLight.b += lightColor.b; } else if ( light instanceof THREE.DirectionalLight ) { _directionalLights.r += lightColor.r; _directionalLights.g += lightColor.g; _directionalLights.b += lightColor.b; } else if ( light instanceof THREE.PointLight ) { _pointLights.r += lightColor.r; _pointLights.g += lightColor.g; _pointLights.b += lightColor.b; } } } function calculateLight( lights, position, normal, color ) { for ( var l = 0, ll = lights.length; l < ll; l ++ ) { var light = lights[ l ]; var lightColor = light.color; if ( light instanceof THREE.DirectionalLight ) { var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize(); var amount = normal.dot( lightPosition ); if ( amount <= 0 ) continue; amount *= light.intensity; color.r += lightColor.r * amount; color.g += lightColor.g * amount; color.b += lightColor.b * amount; } else if ( light instanceof THREE.PointLight ) { var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ); var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() ); if ( amount <= 0 ) continue; amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 ); if ( amount == 0 ) continue; amount *= light.intensity; color.r += lightColor.r * amount; color.g += lightColor.g * amount; color.b += lightColor.b * amount; } } } function renderSprite( v1, element, material ) { var scaleX = element.scale.x * _svgWidthHalf; var scaleY = element.scale.y * _svgHeightHalf; if ( material.isPointsMaterial ) { scaleX *= material.size; scaleY *= material.size; } var path = 'M' + convert( v1.x - scaleX * 0.5 ) + ',' + convert( v1.y - scaleY * 0.5 ) + 'h' + convert( scaleX ) + 'v' + convert( scaleY ) + 'h' + convert(-scaleX) + 'z'; var style = ""; if ( material.isSpriteMaterial || material.isPointsMaterial ) { style = 'fill:' + getSvgColor( material.color, material.opacity ); } addPath( style, path ); } function renderLine( v1, v2, element, material ) { var path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y ); if ( material.isLineBasicMaterial ) { var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap; if ( material.isLineDashedMaterial ) { style = style + ';stroke-dasharray:' + material.dashSize + "," + material.gapSize; } addPath( style, path ); } } function renderFace3( v1, v2, v3, element, material ) { _this.info.render.vertices += 3; _this.info.render.faces ++; var path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y ) + 'L' + convert( v3.positionScreen.x ) + ',' + convert( v3.positionScreen.y ) + 'z'; var style = ''; if ( material instanceof THREE.MeshBasicMaterial ) { _color.copy( material.color ); if ( material.vertexColors === THREE.FaceColors ) { _color.multiply( element.color ); } } else if ( material instanceof THREE.MeshLambertMaterial || material instanceof THREE.MeshPhongMaterial ) { _diffuseColor.copy( material.color ); if ( material.vertexColors === THREE.FaceColors ) { _diffuseColor.multiply( element.color ); } _color.copy( _ambientLight ); _centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 ); calculateLight( _lights, _centroid, element.normalModel, _color ); _color.multiply( _diffuseColor ).add( material.emissive ); } else if ( material instanceof THREE.MeshNormalMaterial ) { _normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix ); _color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 ); } if ( material.wireframe ) { style = 'fill:none;stroke:' + getSvgColor( _color, material.opacity ) + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin; } else { style = 'fill:' + getSvgColor( _color, material.opacity ); } addPath( style, path ); } function addPath ( style, path ) { if ( _currentStyle === style ) { _currentPath += path } else { flushPath(); _currentStyle = style; _currentPath = path; } } function flushPath() { if ( _currentPath ) { _svgNode = getPathNode( _pathCount ++ ); _svgNode.setAttribute( 'd', _currentPath ); _svgNode.setAttribute( 'style', _currentStyle ); _svg.appendChild( _svgNode ); } _currentPath = ''; _currentStyle = ''; } function getPathNode( id ) { if ( _svgPathPool[ id ] == null ) { _svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' ); if ( _quality == 0 ) { _svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed } return _svgPathPool[ id ]; } return _svgPathPool[ id ]; } }; /** * @author mrdoob / http://mrdoob.com/ */ THREE.OBJLoader = ( function () { // o object_name | g group_name var object_pattern = /^[og]\s*(.+)?/; // mtllib file_reference var material_library_pattern = /^mtllib /; // usemtl material_name var material_use_pattern = /^usemtl /; function ParserState() { var state = { objects: [], object: {}, vertices: [], normals: [], colors: [], uvs: [], materialLibraries: [], startObject: function ( name, fromDeclaration ) { // If the current object (initial from reset) is not from a g/o declaration in the parsed // file. We need to use it for the first parsed g/o to keep things in sync. if ( this.object && this.object.fromDeclaration === false ) { this.object.name = name; this.object.fromDeclaration = ( fromDeclaration !== false ); return; } var previousMaterial = ( this.object && typeof this.object.currentMaterial === 'function' ? this.object.currentMaterial() : undefined ); if ( this.object && typeof this.object._finalize === 'function' ) { this.object._finalize( true ); } this.object = { name: name || '', fromDeclaration: ( fromDeclaration !== false ), geometry: { vertices: [], normals: [], colors: [], uvs: [] }, materials: [], smooth: true, startMaterial: function ( name, libraries ) { var previous = this._finalize( false ); // New usemtl declaration overwrites an inherited material, except if faces were declared // after the material, then it must be preserved for proper MultiMaterial continuation. if ( previous && ( previous.inherited || previous.groupCount <= 0 ) ) { this.materials.splice( previous.index, 1 ); } var material = { index: this.materials.length, name: name || '', mtllib: ( Array.isArray( libraries ) && libraries.length > 0 ? libraries[ libraries.length - 1 ] : '' ), smooth: ( previous !== undefined ? previous.smooth : this.smooth ), groupStart: ( previous !== undefined ? previous.groupEnd : 0 ), groupEnd: - 1, groupCount: - 1, inherited: false, clone: function ( index ) { var cloned = { index: ( typeof index === 'number' ? index : this.index ), name: this.name, mtllib: this.mtllib, smooth: this.smooth, groupStart: 0, groupEnd: - 1, groupCount: - 1, inherited: false }; cloned.clone = this.clone.bind( cloned ); return cloned; } }; this.materials.push( material ); return material; }, currentMaterial: function () { if ( this.materials.length > 0 ) { return this.materials[ this.materials.length - 1 ]; } return undefined; }, _finalize: function ( end ) { var lastMultiMaterial = this.currentMaterial(); if ( lastMultiMaterial && lastMultiMaterial.groupEnd === - 1 ) { lastMultiMaterial.groupEnd = this.geometry.vertices.length / 3; lastMultiMaterial.groupCount = lastMultiMaterial.groupEnd - lastMultiMaterial.groupStart; lastMultiMaterial.inherited = false; } // Ignore objects tail materials if no face declarations followed them before a new o/g started. if ( end && this.materials.length > 1 ) { for ( var mi = this.materials.length - 1; mi >= 0; mi -- ) { if ( this.materials[ mi ].groupCount <= 0 ) { this.materials.splice( mi, 1 ); } } } // Guarantee at least one empty material, this makes the creation later more straight forward. if ( end && this.materials.length === 0 ) { this.materials.push( { name: '', smooth: this.smooth } ); } return lastMultiMaterial; } }; // Inherit previous objects material. // Spec tells us that a declared material must be set to all objects until a new material is declared. // If a usemtl declaration is encountered while this new object is being parsed, it will // overwrite the inherited material. Exception being that there was already face declarations // to the inherited material, then it will be preserved for proper MultiMaterial continuation. if ( previousMaterial && previousMaterial.name && typeof previousMaterial.clone === 'function' ) { var declared = previousMaterial.clone( 0 ); declared.inherited = true; this.object.materials.push( declared ); } this.objects.push( this.object ); }, finalize: function () { if ( this.object && typeof this.object._finalize === 'function' ) { this.object._finalize( true ); } }, parseVertexIndex: function ( value, len ) { var index = parseInt( value, 10 ); return ( index >= 0 ? index - 1 : index + len / 3 ) * 3; }, parseNormalIndex: function ( value, len ) { var index = parseInt( value, 10 ); return ( index >= 0 ? index - 1 : index + len / 3 ) * 3; }, parseUVIndex: function ( value, len ) { var index = parseInt( value, 10 ); return ( index >= 0 ? index - 1 : index + len / 2 ) * 2; }, addVertex: function ( a, b, c ) { var src = this.vertices; var dst = this.object.geometry.vertices; dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] ); dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] ); dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] ); }, addVertexLine: function ( a ) { var src = this.vertices; var dst = this.object.geometry.vertices; dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] ); }, addNormal: function ( a, b, c ) { var src = this.normals; var dst = this.object.geometry.normals; dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] ); dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] ); dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] ); }, addColor: function ( a, b, c ) { var src = this.colors; var dst = this.object.geometry.colors; dst.push( src[ a + 0 ], src[ a + 1 ], src[ a + 2 ] ); dst.push( src[ b + 0 ], src[ b + 1 ], src[ b + 2 ] ); dst.push( src[ c + 0 ], src[ c + 1 ], src[ c + 2 ] ); }, addUV: function ( a, b, c ) { var src = this.uvs; var dst = this.object.geometry.uvs; dst.push( src[ a + 0 ], src[ a + 1 ] ); dst.push( src[ b + 0 ], src[ b + 1 ] ); dst.push( src[ c + 0 ], src[ c + 1 ] ); }, addUVLine: function ( a ) { var src = this.uvs; var dst = this.object.geometry.uvs; dst.push( src[ a + 0 ], src[ a + 1 ] ); }, addFace: function ( a, b, c, ua, ub, uc, na, nb, nc ) { var vLen = this.vertices.length; var ia = this.parseVertexIndex( a, vLen ); var ib = this.parseVertexIndex( b, vLen ); var ic = this.parseVertexIndex( c, vLen ); this.addVertex( ia, ib, ic ); if ( ua !== undefined ) { var uvLen = this.uvs.length; ia = this.parseUVIndex( ua, uvLen ); ib = this.parseUVIndex( ub, uvLen ); ic = this.parseUVIndex( uc, uvLen ); this.addUV( ia, ib, ic ); } if ( na !== undefined ) { // Normals are many times the same. If so, skip function call and parseInt. var nLen = this.normals.length; ia = this.parseNormalIndex( na, nLen ); ib = na === nb ? ia : this.parseNormalIndex( nb, nLen ); ic = na === nc ? ia : this.parseNormalIndex( nc, nLen ); this.addNormal( ia, ib, ic ); } if ( this.colors.length > 0 ) { this.addColor( ia, ib, ic ); } }, addLineGeometry: function ( vertices, uvs ) { this.object.geometry.type = 'Line'; var vLen = this.vertices.length; var uvLen = this.uvs.length; for ( var vi = 0, l = vertices.length; vi < l; vi ++ ) { this.addVertexLine( this.parseVertexIndex( vertices[ vi ], vLen ) ); } for ( var uvi = 0, l = uvs.length; uvi < l; uvi ++ ) { this.addUVLine( this.parseUVIndex( uvs[ uvi ], uvLen ) ); } } }; state.startObject( '', false ); return state; } // function OBJLoader( manager ) { this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager; this.materials = null; } OBJLoader.prototype = { constructor: OBJLoader, load: function ( url, onLoad, onProgress, onError ) { var scope = this; var loader = new THREE.FileLoader( scope.manager ); loader.setPath( this.path ); loader.load( url, function ( text ) { onLoad( scope.parse( text ) ); }, onProgress, onError ); }, setPath: function ( value ) { this.path = value; }, setMaterials: function ( materials ) { this.materials = materials; return this; }, parse: function ( text ) { console.time( 'OBJLoader' ); var state = new ParserState(); if ( text.indexOf( '\r\n' ) !== - 1 ) { // This is faster than String.split with regex that splits on both text = text.replace( /\r\n/g, '\n' ); } if ( text.indexOf( '\\\n' ) !== - 1 ) { // join lines separated by a line continuation character (\) text = text.replace( /\\\n/g, '' ); } var lines = text.split( '\n' ); var line = '', lineFirstChar = ''; var lineLength = 0; var result = []; // Faster to just trim left side of the line. Use if available. var trimLeft = ( typeof ''.trimLeft === 'function' ); for ( var i = 0, l = lines.length; i < l; i ++ ) { line = lines[ i ]; line = trimLeft ? line.trimLeft() : line.trim(); lineLength = line.length; if ( lineLength === 0 ) continue; lineFirstChar = line.charAt( 0 ); // @todo invoke passed in handler if any if ( lineFirstChar === '#' ) continue; if ( lineFirstChar === 'v' ) { var data = line.split( /\s+/ ); switch ( data[ 0 ] ) { case 'v': state.vertices.push( parseFloat( data[ 1 ] ), parseFloat( data[ 2 ] ), parseFloat( data[ 3 ] ) ); if ( data.length === 8 ) { state.colors.push( parseFloat( data[ 4 ] ), parseFloat( data[ 5 ] ), parseFloat( data[ 6 ] ) ); } break; case 'vn': state.normals.push( parseFloat( data[ 1 ] ), parseFloat( data[ 2 ] ), parseFloat( data[ 3 ] ) ); break; case 'vt': state.uvs.push( parseFloat( data[ 1 ] ), parseFloat( data[ 2 ] ) ); break; } } else if ( lineFirstChar === 'f' ) { var lineData = line.substr( 1 ).trim(); var vertexData = lineData.split( /\s+/ ); var faceVertices = []; // Parse the face vertex data into an easy to work with format for ( var j = 0, jl = vertexData.length; j < jl; j ++ ) { var vertex = vertexData[ j ]; if ( vertex.length > 0 ) { var vertexParts = vertex.split( '/' ); faceVertices.push( vertexParts ); } } // Draw an edge between the first vertex and all subsequent vertices to form an n-gon var v1 = faceVertices[ 0 ]; for ( var j = 1, jl = faceVertices.length - 1; j < jl; j ++ ) { var v2 = faceVertices[ j ]; var v3 = faceVertices[ j + 1 ]; state.addFace( v1[ 0 ], v2[ 0 ], v3[ 0 ], v1[ 1 ], v2[ 1 ], v3[ 1 ], v1[ 2 ], v2[ 2 ], v3[ 2 ] ); } } else if ( lineFirstChar === 'l' ) { var lineParts = line.substring( 1 ).trim().split( " " ); var lineVertices = [], lineUVs = []; if ( line.indexOf( "/" ) === - 1 ) { lineVertices = lineParts; } else { for ( var li = 0, llen = lineParts.length; li < llen; li ++ ) { var parts = lineParts[ li ].split( "/" ); if ( parts[ 0 ] !== "" ) lineVertices.push( parts[ 0 ] ); if ( parts[ 1 ] !== "" ) lineUVs.push( parts[ 1 ] ); } } state.addLineGeometry( lineVertices, lineUVs ); } else if ( ( result = object_pattern.exec( line ) ) !== null ) { // o object_name // or // g group_name // WORKAROUND: https://bugs.chromium.org/p/v8/issues/detail?id=2869 // var name = result[ 0 ].substr( 1 ).trim(); var name = ( " " + result[ 0 ].substr( 1 ).trim() ).substr( 1 ); state.startObject( name ); } else if ( material_use_pattern.test( line ) ) { // material state.object.startMaterial( line.substring( 7 ).trim(), state.materialLibraries ); } else if ( material_library_pattern.test( line ) ) { // mtl file state.materialLibraries.push( line.substring( 7 ).trim() ); } else if ( lineFirstChar === 's' ) { result = line.split( ' ' ); // smooth shading // @todo Handle files that have varying smooth values for a set of faces inside one geometry, // but does not define a usemtl for each face set. // This should be detected and a dummy material created (later MultiMaterial and geometry groups). // This requires some care to not create extra material on each smooth value for "normal" obj files. // where explicit usemtl defines geometry groups. // Example asset: examples/models/obj/cerberus/Cerberus.obj /* * http://paulbourke.net/dataformats/obj/ * or * http://www.cs.utah.edu/~boulos/cs3505/obj_spec.pdf * * From chapter "Grouping" Syntax explanation "s group_number": * "group_number is the smoothing group number. To turn off smoothing groups, use a value of 0 or off. * Polygonal elements use group numbers to put elements in different smoothing groups. For free-form * surfaces, smoothing groups are either turned on or off; there is no difference between values greater * than 0." */ if ( result.length > 1 ) { var value = result[ 1 ].trim().toLowerCase(); state.object.smooth = ( value !== '0' && value !== 'off' ); } else { // ZBrush can produce "s" lines #11707 state.object.smooth = true; } var material = state.object.currentMaterial(); if ( material ) material.smooth = state.object.smooth; } else { // Handle null terminated files without exception if ( line === '\0' ) continue; throw new Error( 'THREE.OBJLoader: Unexpected line: "' + line + '"' ); } } state.finalize(); var container = new THREE.Group(); container.materialLibraries = [].concat( state.materialLibraries ); for ( var i = 0, l = state.objects.length; i < l; i ++ ) { var object = state.objects[ i ]; var geometry = object.geometry; var materials = object.materials; var isLine = ( geometry.type === 'Line' ); // Skip o/g line declarations that did not follow with any faces if ( geometry.vertices.length === 0 ) continue; var buffergeometry = new THREE.BufferGeometry(); buffergeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( geometry.vertices, 3 ) ); if ( geometry.normals.length > 0 ) { buffergeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( geometry.normals, 3 ) ); } else { buffergeometry.computeVertexNormals(); } if ( geometry.colors.length > 0 ) { buffergeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( geometry.colors, 3 ) ); } if ( geometry.uvs.length > 0 ) { buffergeometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( geometry.uvs, 2 ) ); } // Create materials var createdMaterials = []; for ( var mi = 0, miLen = materials.length; mi < miLen; mi ++ ) { var sourceMaterial = materials[ mi ]; var material = undefined; if ( this.materials !== null ) { material = this.materials.create( sourceMaterial.name ); // mtl etc. loaders probably can't create line materials correctly, copy properties to a line material. if ( isLine && material && ! ( material instanceof THREE.LineBasicMaterial ) ) { var materialLine = new THREE.LineBasicMaterial(); materialLine.copy( material ); material = materialLine; } } if ( ! material ) { material = ( ! isLine ? new THREE.MeshPhongMaterial() : new THREE.LineBasicMaterial() ); material.name = sourceMaterial.name; } material.flatShading = sourceMaterial.smooth ? false : true; createdMaterials.push( material ); } // Create mesh var mesh; if ( createdMaterials.length > 1 ) { for ( var mi = 0, miLen = materials.length; mi < miLen; mi ++ ) { var sourceMaterial = materials[ mi ]; buffergeometry.addGroup( sourceMaterial.groupStart, sourceMaterial.groupCount, mi ); } mesh = ( ! isLine ? new THREE.Mesh( buffergeometry, createdMaterials ) : new THREE.LineSegments( buffergeometry, createdMaterials ) ); } else { mesh = ( ! isLine ? new THREE.Mesh( buffergeometry, createdMaterials[ 0 ] ) : new THREE.LineSegments( buffergeometry, createdMaterials[ 0 ] ) ); } mesh.name = object.name; container.add( mesh ); } console.timeEnd( 'OBJLoader' ); return container; } }; return OBJLoader; } )(); return THREE; }36:[] 31:{"id":"a297483b5ab3f1b2","slug":"notebooks-featured-logo","title":"Isometric logos created with three.js","thumbnail":"523436fc320a1330dded7acf632d1eddbf661564207df72e34cd4cc5a8a6b5e5","access_level":"public","create_time":"$D2017-11-17T20:13:59.266Z","update_time":"$D2017-11-29T00:31:42.066Z","view_time":null,"first_public_time":"$D2017-11-27T22:58:47.564Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":1085,"publish_version":1085,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"271f3b6493ae60a5","slug":"webgl","title":"WebGL","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Isometric logos created with three.js","cells":[{"id":1,"value":"md`# Isometric logos created with three.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"viewof sheetY = DOM.range(2, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"md`## Dependencies\n\n* [THREE: the famed WebGL rendering library](https://threejs.org/)\n* THREESVG: three's addon that allows for SVG rendering\n* [generate-maze](https://github.com/bestguy/generate-maze): the nice little module we use to generate the maze for the deep learning logo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = require('three')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"gm = require('generate-maze')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"