]> gitweb.ps.run Git - cloth_sim/blob - Scripts/main.js
Basic Three.js Setup
[cloth_sim] / Scripts / main.js
1 function init() {\r
2   class Point {\r
3     constructor(x, y) {\r
4       this.x = x;\r
5       this.y = y;\r
6     }\r
7 \r
8     add(that) {\r
9       return new Point(\r
10         this.x + that.x,\r
11         this.y + that.y\r
12       );\r
13     }\r
14 \r
15     sub(that) {\r
16       return new Point(\r
17         this.x - that.x,\r
18         this.y - that.y\r
19       );\r
20     }\r
21 \r
22     dist(that) {\r
23       let a = this.x - that.x;\r
24       let b = this.y - that.y;\r
25       return Math.sqrt(a * a + b * b)\r
26     }\r
27   }\r
28 \r
29   let mousePos = new Point();\r
30 \r
31   const scene = new THREE.Scene();\r
32   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\r
33 \r
34   const renderer = new THREE.WebGLRenderer();\r
35   renderer.setSize(window.innerWidth, window.innerHeight - 200);\r
36   document.getElementById("threejscontainer").appendChild(renderer.domElement);\r
37 \r
38   const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\r
39   scene.add(directionalLight);\r
40 \r
41   const geometry = new THREE.BoxGeometry();\r
42   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\r
43   const cube = new THREE.Mesh(geometry, material);\r
44   scene.add(cube);\r
45 \r
46   camera.position.z = 5;\r
47 \r
48   function animate(dt) {\r
49     requestAnimationFrame(animate);\r
50     renderer.render(scene, camera);\r
51   }\r
52 \r
53   let canvas = document.getElementsByTagName("canvas")[0];\r
54   let resize = function () {\r
55     w = window.innerWidth;\r
56     h = window.innerHeight - 200;\r
57     canvas.width = w;\r
58     canvas.height = h;\r
59   }\r
60   window.onresize = resize;\r
61   resize();\r
62   if (canvas.getContext) {\r
63     ctx = canvas.getContext('2d');\r
64     animate(performance.now());\r
65   }\r
66   canvas.onmousemove = (evt) => {\r
67     mousePos.x = evt.clientX;\r
68     mousePos.y = evt.clientY;\r
69   };\r
70 }