{"id":279,"date":"2023-03-24T06:11:38","date_gmt":"2023-03-24T06:11:38","guid":{"rendered":"https:\/\/sawtooth.site\/?page_id=279"},"modified":"2024-07-23T13:18:35","modified_gmt":"2024-07-23T13:18:35","slug":"threejstestcanvas","status":"publish","type":"page","link":"https:\/\/sawtooth.site\/","title":{"rendered":"HomePage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"279\" class=\"elementor elementor-279\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fd006b e-con-full e-flex e-con e-parent\" data-id=\"4fd006b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-298b755 e-con-full e-flex e-con e-child\" data-id=\"298b755\" data-element_type=\"container\" data-e-type=\"container\" id=\"ThreeJSCanvas\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d0f325 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"4d0f325\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html>\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <script src=\"https:\/\/unpkg.com\/three@0.139.2\/build\/three.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/three@0.139.2\/examples\/js\/controls\/OrbitControls.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.2.4\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/three@0.139.2\/examples\/js\/loaders\/FontLoader.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/dat.gui@0.7.9\/build\/dat.gui.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/three@0.139.2\/examples\/js\/geometries\/TextGeometry.js\"><\/script>\r\n <\/head>\r\n  <body>\r\n    <canvas id=\"myCanvas\" style=\"width: 100%; height: 100%\"><\/canvas>\r\n    <script defer>\r\n    \r\n     \/** Renderer*\/\r\n    const canvas = document.querySelector('#myCanvas');\r\n    const renderer = new THREE.WebGLRenderer({antialias: true, canvas:canvas});\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n\r\n    \r\n    \/** Tonemapping *\/\r\n    renderer.outputEncoding = THREE.sRGBEncoding; \r\n    renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n    renderer.toneMappingExposure = 0.5; \/\/adjest exposure\r\n    \r\n    \/** Set scene and camera *\/\r\n    const scene = new THREE.Scene();\r\n    const camera = new THREE.PerspectiveCamera(\r\n        45,\r\n        window.innerWidth \/ window.innerHeight,\r\n        0.001,\r\n        1000\r\n    );\r\n   camera.position.set(0, 313, 0);\r\n\r\n\r\n    \/**OrbitControl*\/\r\n    const orbit = new THREE.OrbitControls(camera, renderer.domElement);\r\n    orbit.enableDamping =true;\r\n    orbit.dampingFactor = 0.02;\/\/damping\r\n    \r\n    \/**Lights*\/\r\n    const light = new THREE.PointLight(0xffffff,3,100);\r\n    light.position.set (0,10,10); \/\/ xyz \r\n    scene.add(light);\r\n    \r\n    const dLight = new THREE.DirectionalLight(0xffffff,2);\r\n    scene.add(dLight);\r\n    \r\n    \/** Text *\/\r\n    const fontURL = \"https:\/\/unpkg.com\/three@0.139.2\/examples\/fonts\/helvetiker_regular.typeface.json\";\r\n    const passage = 'Sawtooth is a new media artists collective \\nbased in Beijing. \\nWe do audiovisual performances \\nand art installations.';\r\n    const passage2 = 'Click the menu button to browse more content';\r\n    \r\n    const textLoader1 = new THREE.FontLoader();\r\n    const textLoader2 = new THREE.FontLoader();\r\n    const materials_b = new THREE.MeshBasicMaterial({\r\n        \/\/color:0x6196c9, \/\/font color\r\n        color:0xffffff,\r\n        side:THREE.DoubleSide\r\n    });\r\n\r\n    textLoader1.load(fontURL,\r\n\tfunction ( in_Font ) {\r\n\t\tconst textGeo = new THREE.TextGeometry( passage, {\r\n            font:in_Font,\r\n            height:0.02, \/\/depth\r\n            size: 0.3,           \r\n        });\r\n\t\tconsole.log( in_Font );    \r\n        const textMesh = new THREE.Mesh(textGeo,materials_b);\r\n        scene.add(textMesh);\r\n        textMesh.position.set(-7.6, 6.8,-4);\/\/text position\r\n\t    }\r\n    );\r\n    \r\n    textLoader2.load(fontURL,\r\n\tfunction ( in_Font ) {\r\n\t\tconst textGeo = new THREE.TextGeometry( passage2, {\r\n            font:in_Font,\r\n            height:0.02, \/\/depth\r\n            size: 0.3,           \r\n        });\r\n\t\tconsole.log( in_Font );    \r\n        const textMesh = new THREE.Mesh(textGeo,materials_b);\r\n        scene.add(textMesh);\r\n        textMesh.position.set(-1,-5.5,-3.8);\/\/text position\r\n\t    }\r\n    );\r\n    \r\n\r\n    \r\n    \/**Texutures*\/\r\n    let textureLoader1 = new THREE.TextureLoader();\r\n    const texture1 = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/1.jpg');\r\n    const texture2 = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/3-scaled.jpg')\r\n    const alphaMap1 = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/alphaMap1.jpg');\r\n    const alphaMap2 = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/alphaMap2.jpg');\r\n    const alphaMap3 = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/alphaMap3.jpg');\r\n    const alphaMap4 = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/alphaMap4.jpg');\r\n    const alphaMask = textureLoader1.load('https:\/\/sawtooth.site\/wp-content\/uploads\/2023\/03\/alphaMask.jpg');\r\n    const set1_Parent = createPlane(16,9,0,0,0,texture2,alphaMap1);\r\n    const set1_Child1 = createPlane(16,9,0,0,-0.5,texture2,alphaMap2);\r\n    const set1_Child2 = createPlane(16,9,0,0,-1,texture2,alphaMap3);\r\n    const set1_Child3 =createPlane(16,9,0,0,-1.5,texture2,alphaMap4);\r\n    const set1_Child4 = createPlane(16,9,0,0,-2,texture2,alphaMask);\r\n    set1_Parent.add(set1_Child1);\r\n    set1_Parent.add(set1_Child2);\r\n    set1_Parent.add(set1_Child3);\r\n    set1_Parent.add(set1_Child4);\r\n    scene.add(set1_Parent);\r\n    set1_Parent.position.set(0,0,-4);\r\n   \r\n   \/**Torus*\/\r\n   const torusGeometry = new THREE.TorusGeometry(50,2,10,100);\r\n   const torusMaterial = new THREE.MeshBasicMaterial({\r\n    color: 0xFFFFFF\r\n   })\r\n   const meshTorus = new THREE.Mesh(torusGeometry,torusMaterial);\r\n   scene.add(meshTorus); \r\n   meshTorus.rotation.x = Math.PI \/ 2;\r\n   \r\n\r\n   \r\n   \r\n   \r\n    \/**datgui*\/\r\n    \/* const myGUI = new dat.GUI({name:'mygui'});\r\n     const myVariables ={\r\n            color_font: 0x123456,\r\n            metalness: 1,\r\n            roughness:0.5,\r\n            fogColor:0xcccccc,\r\n            near:1,\r\n            far:5\r\n    };\r\n    \/\/font color\r\n    myGUI.addColor(myVariables,'color_font').onChange(function(color_p){\r\n            materials_b.color.set(color_p);\r\n    });\r\n\r\n    myGUI.addColor(myVariables,'color_font').onChange(function(color_p){\r\n            materials_b.color.set(color_p);\r\n\r\n    });\r\n*\/\r\n    \r\n    \/** Functions *\/\r\n    function createPlane(width,height,x,y,z,texture,alpha)\r\n    {   \r\n        const grid_geo = new THREE.PlaneGeometry(width,height);\r\n        const grid_mat = new THREE.MeshBasicMaterial( {\r\n                map: texture, \r\n                side: THREE.DoubleSide,\r\n                alphaMap: alpha,\r\n                transparent:true\r\n            }\r\n        );\r\n        const plane = new THREE.Mesh( grid_geo,grid_mat );\r\n        plane.position.x = x;\r\n        plane.position.y = y;\r\n        plane.position.z = z;\r\n        return plane;\r\n    };\r\n    \r\n    \r\n    \/** Animation *\/\r\n    function animate() {\r\n        renderer.render(scene, camera);  \r\n        orbit.update();\r\n    };\r\n    renderer.setAnimationLoop(animate);\r\n   \r\n    \/** Event Listener *\/\r\n    \/**window resize*\/\r\n    window.addEventListener('resize', function() {\r\n        camera.aspect = window.innerWidth \/ window.innerHeight;\r\n        camera.updateProjectionMatrix();\r\n        renderer.setSize(window.innerWidth, window.innerHeight);\r\n        \r\n    });\r\n    \/**gsap*\/\r\n    function cameraMove(x1,y1,z1)\r\n    {   \r\n        gsap.to(camera.position,{\r\n            x:x1,\r\n            y:y1,\r\n            z:z1,\r\n            ease:\"expo\",\r\n            duration:5\r\n        })\r\n    }\r\n    function cameraRotation(x2,y2,z2)\r\n    {\r\n        gsap.to(camera.position,{\r\n            x:x2,\r\n            y:y2,\r\n            z:z2,\r\n            duration:3\r\n        })\r\n    \r\n    }\r\n        \r\n    let position = 0; \/\/counter to keep track of the position \r\n    window.addEventListener('mousedown',function(e){\r\n            switch(position){\r\n            case 0:\r\n                cameraRotation(-0.6,0,0);\r\n                cameraMove(5.78,180,256.1);\r\n                position = 1;\r\n                break; \r\n            case 1:\r\n                cameraMove(0,0,5);\r\n                position = 2;\r\n                break; \r\n   \r\n            }\r\n    });\r\n    <\/script>\r\n  <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sawtooth.site\/index.php?rest_route=\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sawtooth.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sawtooth.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sawtooth.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sawtooth.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279"}],"version-history":[{"count":998,"href":"https:\/\/sawtooth.site\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions"}],"predecessor-version":[{"id":2512,"href":"https:\/\/sawtooth.site\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions\/2512"}],"wp:attachment":[{"href":"https:\/\/sawtooth.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sawtooth.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sawtooth.site\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}