2a:null 2b:["$","title",null,{"children":"three.js SVG dragon egg | Kelley van Evert | Observable"}] 30:T558,egg = { if (!tiling) return cube const s = 1; const geometry = new THREE.Geometry(); const uvs = flatten(tiling.map(tr => tr.uv)) const u_extent = d3.extent(uvs.map(uv => uv[0])) const v_extent = d3.extent(uvs.map(uv => uv[1])) const u = d3.scaleLinear().domain(u_extent).range([0,1]) const v = d3.scaleLinear().domain(v_extent).range([0,1]) tiling.forEach((tr, i) => { const [ a, b, c ] = tr; geometry.vertices.push(new THREE.Vector3(a[0]*s, a[1]*s, a[2]*s)); geometry.vertices.push(new THREE.Vector3(b[0]*s, b[1]*s, b[2]*s)); geometry.vertices.push(new THREE.Vector3(c[0]*s, c[1]*s, c[2]*s)); geometry.faces.push(new THREE.Face3(3*i, 3*i+1, 3*i+2)); const [ [au, av], [bu, bv], [cu, cv] ] = tr.uv; geometry.faceVertexUvs[0].push([ new THREE.Vector2(u(au), v(av)), new THREE.Vector2(u(bu), v(bv)), new THREE.Vector2(u(cu), v(cv)), ]); }); geometry.uvsNeedUpdate = true; geometry.computeFaceNormals(); geometry.computeVertexNormals(); const material = normal_colors ? new THREE.MeshNormalMaterial({ side: THREE.DoubleSide, wireframe: false }) //: new THREE.MeshBasicMaterial({ map: texture }) /* : new THREE.MeshPhongMaterial({ color: 0xf4f4ed,//0xf4f4dc, side: THREE.DoubleSide, }); const mesh = new THREE.Mesh(geometry, material); return mesh; }31:T4f4,scene = { const scene = window.scene = new THREE.Scene(); scene.background = new THREE.Color(normal_colors ? 0x222222 : 0xefede8); const group = new THREE.Object3D(); scene.add(group); group.rotateX(.1*Math.PI); group.add(egg); //group.add(cube); // lights const lights = scene.lights = {}; lights.ambient = new THREE.AmbientLight(0x333333, .6); scene.add(lights.ambient); lights.spot = new THREE.SpotLight(0x8c7e96, .5); lights.spot.position.set(800, -500, -300); scene.add(lights.spot); lights.hemiLight = new THREE.HemisphereLight(0xefede8, 0x727248, .8); scene.add(lights.hemiLight); // sun lights.shadow = new THREE.DirectionalLight(0xffffff, .3); lights.shadow.position.set(-0, 700, 500); // (x,y,z) = BACK, ?, DOWN lights.shadow.castShadow = true; lights.shadow.shadow.mapSize.width = 1024; lights.shadow.shadow.mapSize.height = 1024; var d = 1000; lights.shadow.shadow.camera.left = -d; lights.shadow.shadow.camera.right = d; lights.shadow.shadow.camera.top = d; lights.shadow.shadow.camera.bottom = -d; lights.shadow.shadow.camera.near = 1; lights.shadow.shadow.camera.far = 3000; lights.shadow.shadow.bias = -0.0005; scene.add(lights.shadow); return scene; }32:T7ee5,{ /** * @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 ), _points4 = new Array( 4 ), _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 ( vector, camera ) { console.error( 'THREE.Projector: .pickingRay() is now raycaster.setFromCamera().' ); }; // var RenderList = function () { var normals = []; 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; 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 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 ]; _line = getNextLineInPool(); _line.id = object.id; _line.v1.copy( v1 ); _line.v2.copy( v2 ); _line.z = ( v1.positionScreen.z + v2.positionScreen.z ) / 2; _line.renderOrder = object.renderOrder; _line.material = object.material; _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, pushUv: pushUv, pushLine: pushLine, pushTriangle: pushTriangle } }; var renderList = new RenderList(); 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.getInverse( camera.matrixWorld ) ); _viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix ); _frustum.setFromMatrix( _viewProjectionMatrix ); // _objectCount = 0; _renderData.objects.length = 0; _renderData.lights.length = 0; scene.traverseVisible( function ( object ) { if ( object instanceof THREE.Light ) { _renderData.lights.push( object ); } else if ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Sprite ) { var material = object.material; if ( material.visible === false ) return; if ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) { _object = getNextObjectInPool(); _object.id = object.id; _object.object = object; _vector3.setFromMatrixPosition( object.matrixWorld ); _vector3.applyProjection( _viewProjectionMatrix ); _object.z = _vector3.z; _object.renderOrder = object.renderOrder; _renderData.objects.push( _object ); } } } ); if ( sortObjects === true ) { _renderData.objects.sort( painterSort ); } // for ( var o = 0, ol = _renderData.objects.length; o < ol; o ++ ) { var object = _renderData.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 o = 0; o < groups.length; o ++ ) { var group = groups[ o ]; 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 isFaceMaterial = material instanceof THREE.MultiMaterial; var objectMaterials = isFaceMaterial === true ? object.material : null; 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 = isFaceMaterial === true ? objectMaterials.materials[ 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 ) { 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 ( 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 ) { _modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix ); 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.Sprite ) { _vector4.set( _modelMatrix.elements[ 12 ], _modelMatrix.elements[ 13 ], _modelMatrix.elements[ 14 ], 1 ); _vector4.applyMatrix4( _viewProjectionMatrix ); 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 ); } } } if ( sortElements === true ) { _renderData.elements.sort( painterSort ); } return _renderData; }; // 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 = [], _svgLinePool = [], _svgRectPool = [], _svgNode, _pathCount = 0, _lineCount = 0, _rectCount = 0, _quality = 1; 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.clear = function () { _pathCount = 0; _lineCount = 0; _rectCount = 0; while ( _svg.childNodes.length > 0 ) { _svg.removeChild( _svg.childNodes[ 0 ] ); } _svg.style.backgroundColor = 'rgba(' + ( ( _clearColor.r * 255 ) | 0 ) + ',' + ( ( _clearColor.g * 255 ) | 0 ) + ',' + ( ( _clearColor.b * 255 ) | 0 ) + ',' + _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; } if ( this.autoClear === true ) this.clear(); _this.info.render.vertices = 0; _this.info.render.faces = 0; _viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) ); _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 ); 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 ); } } } scene.traverseVisible( function ( object ) { if ( object instanceof THREE.SVGObject ) { _vector3.setFromMatrixPosition( object.matrixWorld ); _vector3.applyProjection( _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; _svgNode = getRectNode( _rectCount ++ ); _svgNode.setAttribute( 'x', v1.x - ( scaleX * 0.5 ) ); _svgNode.setAttribute( 'y', v1.y - ( scaleY * 0.5 ) ); _svgNode.setAttribute( 'width', scaleX ); _svgNode.setAttribute( 'height', scaleY ); if ( material instanceof THREE.SpriteMaterial ) { _svgNode.setAttribute( 'style', 'fill: ' + material.color.getStyle() ); } _svg.appendChild( _svgNode ); } function renderLine( v1, v2, element, material ) { _svgNode = getLineNode( _lineCount ++ ); _svgNode.setAttribute( 'x1', v1.positionScreen.x ); _svgNode.setAttribute( 'y1', v1.positionScreen.y ); _svgNode.setAttribute( 'x2', v2.positionScreen.x ); _svgNode.setAttribute( 'y2', v2.positionScreen.y ); if ( material instanceof THREE.LineBasicMaterial ) { _svgNode.setAttribute( 'style', 'fill: none; stroke: ' + material.color.getStyle() + '; stroke-width: ' + material.linewidth + '; stroke-opacity: ' + material.opacity + '; stroke-linecap: ' + material.linecap + '; stroke-linejoin: ' + material.linejoin ); _svg.appendChild( _svgNode ); } } function renderFace3( v1, v2, v3, element, material ) { _this.info.render.vertices += 3; _this.info.render.faces ++; _svgNode = getPathNode( _pathCount ++ ); _svgNode.setAttribute( 'd', 'M ' + v1.positionScreen.x + ' ' + v1.positionScreen.y + ' L ' + v2.positionScreen.x + ' ' + v2.positionScreen.y + ' L ' + v3.positionScreen.x + ',' + v3.positionScreen.y + 'z' ); 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 ) { _svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.getStyle() + '; stroke-width: ' + material.wireframeLinewidth + '; stroke-opacity: ' + material.opacity + '; stroke-linecap: ' + material.wireframeLinecap + '; stroke-linejoin: ' + material.wireframeLinejoin ); } else { _svgNode.setAttribute( 'style', 'fill: ' + _color.getStyle() + '; fill-opacity: ' + material.opacity ); } _svg.appendChild( _svgNode ); } function getLineNode( id ) { if ( _svgLinePool[ id ] == null ) { _svgLinePool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'line' ); if ( _quality == 0 ) { _svgLinePool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed } return _svgLinePool[ id ]; } return _svgLinePool[ id ]; } 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 ]; } function getRectNode( id ) { if ( _svgRectPool[ id ] == null ) { _svgRectPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' ); if ( _quality == 0 ) { _svgRectPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed } return _svgRectPool[ id ]; } return _svgRectPool[ id ]; } }; }33:[] 2e:{"id":"f5ad0baf86206c35","slug":"three-js-svg-dragon-egg","title":"three.js SVG dragon egg","thumbnail":"cfb7f926b53de2c4e9cf8e499378093755f2c1831242f0449ee4068e8d3e1998","access_level":"public","create_time":"$D2018-03-29T09:04:17.675Z","update_time":"$D2019-12-14T22:00:28.797Z","view_time":null,"first_public_time":"$D2018-03-29T09:16:14.162Z","fork":{"id":"1601dc4063580420","slug":"three-js-dragon-egg","title":"three.js dragon egg","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":5,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1541,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"eb10ef0146cb05b4","slug":"origami","title":"Origami","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"title":"three.js SVG dragon egg","cells":[{"id":0,"value":"md`# three.js SVG dragon egg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"md`You're looking at a three.js SVG rendering of the [\"Dragon's Egg\" origami model](https://www.google.nl/search?q=dragon+egg+origami&oq=dragon+egg+origami).\n\nIf you're interested in the details, head over to [https://beta.observablehq.com/@kelleyvanevert/tiling-butterflies-to-get-a-dragons-egg-origami-model] for the code that does the 3D construction of the origami model.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"viewof ncols = slider({ min: 1, max: 20, step: 1, value: 12 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":809,"value":"viewof nrows = slider({ min: 1, max: 14, step: 1, value: 7 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"view = html`

\n ${wrap_svg_downloadable(svgrenderer.domElement)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"viewof v = foldskew({ fold: 1.1/Math.PI, skew: 0, r: 1/ncols, showr: true, H: 250 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"viewof use_bump = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"viewof normal_colors = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1524,"value":"function render () {\n svgrenderer.render(window.scene, camera);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"{\n egg.position.set(0, 0, 0);\n render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1448,"value":"svgrenderer = {\n const renderer = new THREE.SVGRenderer();\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n renderer.setQuality('high');\n //renderer.shadowMap.enabled = true;\n //renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n \n d3.select(renderer.domElement).attr('stroke', '#000')\n \n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"tiling = {\n try {\n var grid = center_around_origin( scale(.35)( tile_from(butterfly(v.fold, v.skew), v.r, {\n left: Math.floor((ncols-1)/2),\n right: Math.ceil((ncols-1)/2),\n up: Math.ceil((nrows-1)/2),\n down: Math.floor((nrows-1)/2),\n mode: 'rect'\n }) ) );\n return flatten(flatten(grid).map(triangles));\n } catch (e) {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":998,"value":"cube = {\n //const image = new Image();\n //image.src = c.canvas.toDataURL();\n \n //const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide })\n const material = new THREE.MeshBasicMaterial({ color: 0xf4f4ed, side: THREE.DoubleSide })\n \n const cube = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 4, 4, 4), material);\n\n return cube;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"camera = {\n const fov = 30;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.z = 500;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"controls = {\n const controls = new THREE.OrbitControls(camera, view.querySelector('canvas'));\n controls.enableZoom = false;\n controls.enablePan = false;\n controls.addEventListener('change', () => {\n render()\n });\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1432,"value":"size = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1083,"value":"true || new TG.Texture( size, size )\n\t\t\t\t\t.add( new TG.XOR() )\n\t\t\t\t\t.mul( new TG.OR().tint( 0.5, 0.8, 0.5 ) )\n\t\t\t\t\t.mul( new TG.SinX().frequency( 0.0312 ) )\n\t\t\t\t\t.div( new TG.SinY().frequency( 0.0312 ) )\n\t\t\t\t\t.add( new TG.SinX().frequency( 0.004 ).tint( 0.5, 0, 0 ) )\n\t\t\t\t\t.add( new TG.Noise().tint( 0.1, 0.1, 0.2 ) )\n\t\t\t\t\t.toCanvas()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1152,"value":"true || new TG.Texture( size, size )\n\t\t\t\t\t.add( new TG.SinX().frequency( 0.004 ) )\n\t\t\t\t\t.mul( new TG.SinY().frequency( 0.004 ) )\n\t\t\t\t\t.mul( new TG.SinY().offset( 32 ).frequency( 0.02 ) )\n\t\t\t\t\t.div( new TG.SinX().frequency( 0.02 ).tint( 8, 5, 4 ) )\n\t\t\t\t\t.add( new TG.Noise().tint( 0.1, 0, 0 ) )\n\t\t\t\t\t.add( new TG.Noise().tint( 0, 0.1, 0 ) )\n\t\t\t\t\t.add( new TG.Noise().tint( 0, 0, 0.1 ) )\n\t\t\t\t\t.toCanvas()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import { center_around_origin, scale, compute_tiling, butterfly, atop2, below2, next, prev, tile_from, triangles, foldskew } from '@kelleyvanevert/tiling-butterflies-to-get-a-dragons-egg-origami-model'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"THREE = {\n const THREE = await require(\"three\");\n if (!THREE.OrbitControls) { // If not previously loaded.\n const module = window.module = { exports: undefined };\n THREE.OrbitControls = await require(\"https://content.klve.nl/scratch/orbitcontrols.js?what\").catch(() => module.exports(THREE));\n }\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1441,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"flatten = as => Array.prototype.concat.apply([], as)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"TG = require('https://kelleyvanevert.nl/scratch/texgen.js').catch(e => window.TG)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1462,"value":"import { toggle, wrap_svg_downloadable } from '@kelleyvanevert/little-things'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"import { file, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"