Threejs Boilerplate : Scale Cannon Body

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.6.0/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://cdn.skypack.dev/three@0.146.0/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.146.0/",      
      "dat.gui": "https://cdn.skypack.dev/dat.gui",
      "cannon-es": "https://cdn.skypack.dev/cannon-es",
      "CannonUtils": "https://cdn.jsdelivr.net/gh/Sean-Bradley/CannonUtils@main/cannonUtils.js",
      "CannonDebugRenderer": "https://cdn.jsdelivr.net/gh/Sean-Bradley/CannonUtils@main/cannonDebugRenderer.js"
		}
	}
</script>

CSS

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

JavaScript

import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import {
  GUI
} from 'dat.gui'
import {
  OBJLoader
} from 'three/examples/jsm/loaders/OBJLoader'
import {
  TransformControls
} from 'three/examples/jsm/controls/TransformControls'
import * as CANNON from 'cannon-es'
import CannonUtils from 'CannonUtils'
import CannonDebugRenderer from 'CannonDebugRenderer'

const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))

const light1 = new THREE.SpotLight()
light1.position.set(2.5, 5, 5)
light1.angle = Math.PI / 4
light1.penumbra = 0.5
light1.castShadow = true
light1.shadow.mapSize.width = 1024
light1.shadow.mapSize.height = 1024
light1.shadow.camera.near = 0.5
light1.shadow.camera.far = 20
scene.add(light1)

const light2 = new THREE.SpotLight()
light2.position.set(-2.5, 5, 5)
light2.angle = Math.PI / 4
light2.penumbra = 0.5
light2.castShadow = true
light2.shadow.mapSize.width = 1024
light2.shadow.mapSize.height = 1024
light2.shadow.camera.near = 0.5
light2.shadow.camera.far = 20
scene.add(light2)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 3, 6)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

const orbitControls = new OrbitControls(camera, renderer.domElement)
orbitControls.enableDamping = true
orbitControls.target.y = 0.5

const transformControls = new TransformControls(camera, renderer.domElement)
transformControls.setMode('scale')
transformControls.addEventListener('dragging-changed', function(e) {
  orbitControls.enabled = !e.value
})
scene.add(transformControls)

const world = new CANNON.World()
world.gravity.set(0, -9.82, 0)

const normalMaterial = new THREE.MeshNormalMaterial()
const phongMaterial = new...