Threejs Boilerplate

Threejs Boilerplate : https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate Threejs Course : https://sbcode.net/threejs/ Discount Coupons : https://sbcode.net/coupons#threejs

by seanwasere

HTML

<!--
Threejs Boilerplate : https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate
Threejs Course : https://sbcode.net/threejs/
Discount Coupons : https://sbcode.net/coupons#threejs
-->

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://cdn.skypack.dev/three@0.143.0/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.143.0/",
      "bender": "https://cdn.jsdelivr.net/gh/Sean-Bradley/Bender@main/dist/client/bender.js"
		}
	}
</script>

CSS

body {
  overflow: hidden;
  margin: 0px;
}

#button {
  position: absolute;
  height: 40px;
  width: 100px;
  margin: -20px -50px;
  top: 50%;
  left: 50%;
}

JavaScript

import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import Bender from 'bender'

const bender = new Bender()
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 3)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const texture = new THREE.TextureLoader().load("https://threejs.org/examples/screenshots/webgl_custom_attributes_lines.jpg", function(texture) {
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(-6, 1);
  texture.needsUpdate = true;
})

const geometry = new THREE.PlaneGeometry(10,-5,32,32)
geometry.translate(0,-2,0)
bender.bend(geometry, "z", Math.PI*2 / 10)
const material = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
  map: texture
})


const cylinder = new THREE.Mesh(geometry, material)
scene.add(cylinder)


window.addEventListener('resize', onWindowResize, false)

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  render()
}

const stats = Stats()
document.body.appendChild(stats.dom)

var animate = function() {
  requestAnimationFrame(animate)
  controls.update()
  render()
  stats.update()
}

function render() {
  renderer.render(scene, camera)
}
animate()