{"id":3590,"date":"2021-05-10T10:10:46","date_gmt":"2021-05-10T10:10:46","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3590"},"modified":"2023-02-28T04:54:54","modified_gmt":"2023-02-28T04:54:54","slug":"three-js-tutorial-raycaster-experiment-with-three-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/three-js-tutorial-raycaster-experiment-with-three-js\/","title":{"rendered":"Three JS Tutorial &#8211; Raycaster Experiment with three.js"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Raycaster Experiment with three.js.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/GRGJbJO?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/GRGJbJO\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Three JS Template\r\nvar renderer = new THREE.WebGLRenderer({antialias:true});\r\nrenderer.setSize( window.innerWidth, window.innerHeight );\r\nrenderer.shadowMap.enabled = false;\r\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\nrenderer.shadowMap.needsUpdate = true;\r\n\r\n\r\ndocument.body.appendChild( renderer.domElement );\r\nwindow.addEventListener('resize', onWindowResize, false);\r\nfunction onWindowResize() {\r\n  camera.aspect = window.innerWidth \/ window.innerHeight;\r\n  camera.updateProjectionMatrix();\r\n  renderer.setSize( window.innerWidth, window.innerHeight );\r\n}\r\nvar camera = new THREE.PerspectiveCamera( 35, window.innerWidth \/ window.innerHeight, 1, 500 );\r\nvar scene = new THREE.Scene();\r\nvar cameraRange = 3;\r\n\r\nvar setcolor = 0x000000;\r\n\r\nscene.background = new THREE.Color(setcolor)\r\nscene.fog = new THREE.Fog(setcolor, 2.5, 3.5);\r\n\r\n\/\/-------------------------------------------------------------- SCENE\r\n\r\nvar sceneGruop = new THREE.Object3D();\r\nvar particularGruop = new THREE.Object3D();\r\nvar modularGruop = new THREE.Object3D();\r\n\r\nfunction generateParticle(num, amp = 2) {\r\n  var gmaterial = new THREE.MeshPhysicalMaterial({color:0xFFFFFF, side:THREE.DoubleSide});\r\n\r\n  var gparticular = new THREE.CircleGeometry(0.2,5);\r\n\r\n  for (var i = 1; i &lt; num; i++) {\r\n    var pscale = 0.001+Math.abs(mathRandom(0.03));\r\n    var particular = new THREE.Mesh(gparticular, gmaterial);\r\n    particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp));\r\n    particular.rotation.set(mathRandom(),mathRandom(),mathRandom());\r\n    particular.scale.set(pscale,pscale,pscale);\r\n    particular.speedValue = mathRandom(1);\r\n\r\n    particularGruop.add(particular);\r\n  }\r\n}\r\ngenerateParticle(200, 2);\r\n\r\nsceneGruop.add(particularGruop);\r\nscene.add(modularGruop);\r\nscene.add(sceneGruop);\r\n\r\nfunction mathRandom(num = 1) {\r\n  var setNumber = - Math.random() * num + Math.random() * num;\r\n  return setNumber;\r\n}\r\n\r\n\/\/------------------------------------------------------------- INIT\r\nfunction init() {\r\n  for (var i = 0; i&lt;30; i++) {\r\n    var geometry = new THREE.IcosahedronGeometry(1);\r\n    var material = new THREE.MeshStandardMaterial({shading:THREE.FlatShading, color:0x111111, transparent:false, opacity:1, wireframe:false});\r\n    var cube = new THREE.Mesh(geometry, material);\r\n    cube.speedRotation = Math.random() * 0.1;\r\n    cube.positionX = mathRandom();\r\n    cube.positionY = mathRandom();\r\n    cube.positionZ = mathRandom();\r\n    cube.castShadow = true;\r\n    cube.receiveShadow = true;\r\n    \r\n    var newScaleValue = mathRandom(0.3);\r\n    \r\n    cube.scale.set(newScaleValue,newScaleValue,newScaleValue);\r\n    \/\/---\r\n    cube.rotation.x = mathRandom(180 * Math.PI \/ 180);\r\n    cube.rotation.y = mathRandom(180 * Math.PI \/ 180);\r\n    cube.rotation.z = mathRandom(180 * Math.PI \/ 180);\r\n    \/\/\r\n    cube.position.set(cube.positionX, cube.positionY, cube.positionZ);\r\n    modularGruop.add(cube);\r\n  }\r\n}\r\n\r\n\/\/------------------------------------------------------------- CAMERA\r\ncamera.position.set(0, 0, cameraRange);\r\nvar cameraValue = false;\r\nfunction cameraSet() {\r\n  if (!cameraValue) {\r\n    TweenMax.to(camera.position, 1, {z:cameraRange,ease:Power4.easeInOut});\r\n    cameraValue = true;\r\n  } else {\r\n    TweenMax.to(camera.position, 1, {z:cameraRange,  x:0, y:0, ease:Power4.easeInOut});\r\n    INTERSECTED = null;\r\n    cameraValue = false;\r\n  }\r\n}\r\n\r\n\/\/------------------------------------------------------------- SCENE\r\nvar ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.1);\r\n\/\/scene.add(ambientLight);\r\n\r\nvar light = new THREE.SpotLight(0xFFFFFF, 3);\r\nlight.position.set(5, 5, 2);\r\nlight.castShadow = true;\r\nlight.shadow.mapSize.width = 10000;\r\nlight.shadow.mapSize.height = light.shadow.mapSize.width;\r\nlight.penumbra = 0.5;\r\n\r\nvar lightBack = new THREE.PointLight(0x0FFFFF, 1);\r\nlightBack.position.set(0, -3, -1);\r\n\r\nscene.add(sceneGruop);\r\nscene.add(light);\r\nscene.add(lightBack);\r\n\r\nvar rectSize = 2;\r\nvar intensity = 100;\r\nvar rectLight = new THREE.RectAreaLight( 0x0FFFFF, intensity,  rectSize, rectSize );\r\nrectLight.position.set( 0, 0, 1 );\r\nrectLight.lookAt( 0, 0, 0 );\r\nscene.add( rectLight )\r\n\r\nrectLightHelper = new THREE.RectAreaLightHelper( rectLight );\r\n\/\/scene.add( rectLightHelper );\r\n\r\n\/\/------------------------------------------------------------- RAYCASTER\r\nvar raycaster = new THREE.Raycaster();\r\nvar mouse = new THREE.Vector2(), INTERSECTED;\r\nvar intersected;\r\n\r\nfunction onMouseMove(event) {\r\n  event.preventDefault();\r\n  mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\r\n  mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\r\n}\r\nfunction onMouseDown(event) {\r\n  event.preventDefault();\r\n  onMouseMove(event);\r\n  raycaster.setFromCamera(mouse, camera);\r\n  var intersected = raycaster.intersectObjects(modularGruop.children);\r\n  if (intersected.length &gt; 0) {\r\n    cameraValue = false;\r\n    if (INTERSECTED != intersected[0].object) {\r\n      if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);\r\n      \r\n      INTERSECTED = intersected[0].object;\r\n      INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();\r\n      INTERSECTED.material.emissive.setHex(0xFFFF00);\r\n      \/\/INTERSECTED.material.map = null;\r\n      \/\/lightBack.position.set(INTERSECTED.position.x,INTERSECTED.position.y,INTERSECTED.position.z);\r\n      \r\n      TweenMax.to(camera.position, 1, {\r\n        x:INTERSECTED.position.x,\r\n        y:INTERSECTED.position.y,\r\n        z:INTERSECTED.position.z+3,\r\n        ease:Power2.easeInOut\r\n      });\r\n      \r\n    } else {\r\n      if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);\r\n      INTERSECTED = null;\r\n      \r\n    }\r\n  }\r\n  console.log(intersected.length);\r\n}\r\nfunction onMouseUp(event) {\r\n  \r\n}\r\n\r\nwindow.addEventListener('mousedown', onMouseDown, false);\r\nwindow.addEventListener('mouseup', onMouseUp, false);\r\nwindow.addEventListener('mousemove', onMouseMove, false);\r\n\r\n\/\/------------------------------------------------------------- RENDER\r\nvar uSpeed = 0.1;\r\nfunction animate() {\r\n  var time = performance.now() * 0.0003;\r\n  requestAnimationFrame(animate);\r\n  \/\/---\r\n  for (var i = 0, l = particularGruop.children.length; i&lt;l; i++) {\r\n    var newObject = particularGruop.children[i];\r\n    newObject.rotation.x += newObject.speedValue\/10;\r\n    newObject.rotation.y += newObject.speedValue\/10;\r\n    newObject.rotation.z += newObject.speedValue\/10;\r\n    \/\/---\r\n    \/\/newObject.position.y = Math.sin(time) * 3;\r\n  };\r\n  \r\n  for (var i = 0, l = modularGruop.children.length; i&lt;l; i++) {\r\n    var newCubes = modularGruop.children[i];\r\n    newCubes.rotation.x += 0.008;\r\n    newCubes.rotation.y += 0.005;\r\n    newCubes.rotation.z += 0.003;\r\n    \/\/---\r\n    newCubes.position.x = Math.sin(time * newCubes.positionZ) * newCubes.positionY;\r\n    newCubes.position.y = Math.cos(time * newCubes.positionX) * newCubes.positionZ;\r\n    newCubes.position.z = Math.sin(time * newCubes.positionY) * newCubes.positionX;\r\n  }\r\n  \/\/---\r\n  particularGruop.rotation.y += 0.005;\r\n  \/\/---\r\n  modularGruop.rotation.y -= ((mouse.x * 4) + modularGruop.rotation.y) * uSpeed;\r\n  modularGruop.rotation.x -= ((-mouse.y * 4) + modularGruop.rotation.x) * uSpeed;\r\n  camera.lookAt(scene.position);\r\n  renderer.render( scene, camera );  \r\n}\r\n\r\nanimate();\r\ninit();<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Raycaster Experiment with three.js. See the Pen Untitled by <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/three-js-tutorial-raycaster-experiment-with-three-js\/\" title=\"Three JS Tutorial &#8211; Raycaster Experiment with three.js\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3593,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[264,263,386,385,384,352,103,227],"newstopic":[],"class_list":{"0":"post-3590","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript-tutorial","9":"tag-js-tutorial","10":"tag-raycaster-experiment","11":"tag-rectarealightuniformslib-js","12":"tag-three-js","13":"tag-tweenmax-js","14":"tag-web-design","15":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3590"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3590\/revisions"}],"predecessor-version":[{"id":3594,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3590\/revisions\/3594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3593"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3590"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}