canvas ={ // SET UP ------------------------------------ const resolution = 100 const planeSize = 10 const pi = Math.PI // scene const aspect =0.5 const height = width * aspect const scene = new THREE.Scene() // FUNCTIONS --------------------------------- function savePoints(mesh){mesh.savedPoints = mesh.geometry.clone()} let p,q, y0, z0, x1, z1 function f(x, y, z, settings){ //shear plane, twist torus x = x+y*settings[4] y = y+x*settings[5] //translate x = x+settings[2] y = y+settings[3] //warp between equidistant and planar villarceau circles y += (1-settings[7]) * .85*settings[0]*settings[1]*settings[6]* (Math.sin(pi/5*y+pi) + .15*Math.sin(2*pi/5*y) ) x += settings[7] * .85*settings[0]*settings[1]*settings[6]* (Math.sin(pi/5*x+pi) + .15*Math.sin(2*pi/5*x) ) // distance of center of circles p = 1 / (.999 * settings[0] +.001 ) q = 1 / (.999 * settings[1] +.001 ) // horizontal major radius y0 = (q * Math.sin( pi*y / (5*q) ) ) z0 = -q + q * Math.cos( pi*y / (5*q) ) //verticle major radius x1 = -p + p * Math.cos( pi*x / (5*p) ) z1 = (p * Math.sin( pi*x / (5*p) ) ) //scale x and y to (-π, +π), the diameter of unit circle x = x*pi/5 y = y*pi/5 //bend return [ (1-settings[7]) * ((p-z0) * Math.sin( (1-z0/p)*x / (p-z0) )) + settings[7] * z1, (1-settings[7]) * y0 + settings[7] * ((q-x1) * Math.sin( (1-x1/q)*y / (q-x1) )) , (1-settings[7]) * (-(p-z0)*Math.cos( (1-z0/p)*x / (p-z0) ) + p -settings[0] + settings[1] - settings[0]*settings[1]) + settings[7] * (-(q-x1)*Math.cos( (1-x1/q)*y / (q-x1) ) + q +settings[0] - settings[1] - settings[0]*settings[1]) ] } function updateSurface(mesh, settings) { const count = mesh.geometry.vertices.length; let positions for (let i = 0; i < count; i++) { positions = f(mesh.savedPoints.vertices[i].x, mesh.savedPoints.vertices[i].y, mesh.savedPoints.vertices[i].z, settings) mesh.geometry.vertices[i].x = positions[0]; mesh.geometry.vertices[i].y = positions[1]; mesh.geometry.vertices[i].z = positions[2]; } mesh.geometry.computeVertexNormals(); mesh.geometry.verticesNeedUpdate = true; } // camera const camera = new THREE.PerspectiveCamera(40, width/height, 1, 10000) // field of view, aspect ratio, near, far plane camera.position.set( 0, 2.5, 11 ) // camera is +40 in z direction camera.lookAt( 0, 0, 0 ) // camera is looking at origin // renderer const renderer = new THREE.WebGLRenderer({antialias: true}) // most powerful all purpose renderer, with smooth edges renderer.setClearColor("#f6f6f6") // background color renderer.setSize(width, height) // set window size if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { renderer.shadowMap.enabled = false; }else{ renderer.shadowMap.enabled = true;} renderer.shadowMap.type = THREE.PCFSoftShadowMap; yield renderer.domElement // camera controls const controls = new THREE.OrbitControls(camera, renderer.domElement); // allows mouse to move camera controls.enableZoom = false // disables zoom controls.enablePan = false // disables pan controls.enableRotate = true // determines if camera can rotate // MATERIALS --------------------------------- const material = new THREE.MeshStandardMaterial({color: 'lightgrey', roughness: .2, metalness:0, side: THREE.DoubleSide, depthwrite: false, transparent: true, opacity:.5}) const matDots = new THREE.MeshStandardMaterial({color: 'lightgrey', roughness: .7, metalness:0}) const matLine = new THREE.LineBasicMaterial( {color: 0x000000} ); // HELPERS ---------------------------------- let updateList = [] let pointList = [] const root = new THREE.Group() scene.add(root) // SHAPE ------------------------------------ const planeGeo = new THREE.PlaneGeometry(planeSize,planeSize,resolution,resolution) const planeMesh = new THREE.Mesh( planeGeo, material.clone()) planeMesh.castShadow = true; planeMesh.receiveShadow = true; savePoints(planeMesh) updateList.push(planeMesh) scene.add(planeMesh); //lines let start = [-5,5, -5,-5, -5,-5, 5,-5, -5,5, -5,-5] let step = [.1,0, .1,0, 0,.1, 0,.1, .1,-.1, .1,.1] let color = [0xD52D2B, 0xD52D2B, 0x416CFF, 0x416CFF, 0x000000, 0x000000, 0x000000, 0x000000] let array = [] for(let i=0; i<6; i++){ array = [] for(let j=0; j