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
29 let mousePos = new Point();
\r
31 const scene = new THREE.Scene();
\r
32 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
\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
38 const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
\r
39 scene.add(directionalLight);
\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
46 camera.position.z = 5;
\r
48 function animate(dt) {
\r
49 requestAnimationFrame(animate);
\r
50 renderer.render(scene, camera);
\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
60 window.onresize = resize;
\r
62 if (canvas.getContext) {
\r
63 ctx = canvas.getContext('2d');
\r
64 animate(performance.now());
\r
66 canvas.onmousemove = (evt) => {
\r
67 mousePos.x = evt.clientX;
\r
68 mousePos.y = evt.clientY;
\r