import * as THREE from 'three'; import Stats from 'three/addons/libs/stats.module.js'; import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js'; import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { Line2 } from 'three/addons/lines/Line2.js'; import { LineMaterial } from 'three/addons/lines/LineMaterial.js'; import { LineGeometry } from 'three/addons/lines/LineGeometry.js'; import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js'; import {CSG} from "./threecsg.js" var res = window.res; var hc = window.hc; var multi_high = window.multi_high; var current_frame = 0; var meshes = []; var joint_meshes = []; function make_linkage(x_length, y_length, z_length, hole_r) { var link = new THREE.BoxGeometry( x_length, y_length, z_length ); var end_1 = new THREE.CylinderGeometry(y_length/2, y_length/2, z_length, 32); var end_2 = new THREE.CylinderGeometry(y_length/2, y_length/2, z_length, 32); var hole_1 = new THREE.CylinderGeometry(hole_r, hole_r, z_length, 32); var hole_2 = new THREE.CylinderGeometry(hole_r, hole_r, z_length, 32); end_1.rotateX(Math.PI/2).translate(-x_length/2, 0, 0); end_2.rotateX(Math.PI/2).translate(x_length/2, 0, 0); hole_1.rotateX(Math.PI/2).translate(-x_length/2, 0, 0); hole_2.rotateX(Math.PI/2).translate(x_length/2, 0, 0); var bsp_link = CSG.fromMesh(new THREE.Mesh(link)); var hole_1 = CSG.fromMesh(new THREE.Mesh(hole_1)); var hole_2 = CSG.fromMesh(new THREE.Mesh(hole_2)); var bsp_end_1 = CSG.fromMesh(new THREE.Mesh(end_1)).subtract(bsp_link).subtract(hole_1); var bsp_end_2 = CSG.fromMesh(new THREE.Mesh(end_2)).subtract(bsp_link).subtract(hole_2); bsp_link = bsp_link.subtract(hole_1).subtract(hole_2); var full_link = CSG.toMesh(bsp_link.union(bsp_end_1).union(bsp_end_2)); return full_link; } function make_link(x_length, y_length, z_length, hole_r, Theta_z, translation) { var full_link = make_linkage(x_length, y_length, z_length * 0.9, hole_r); full_link.rotation.z = Theta_z; full_link.position.set(translation[0] + x_length/2 * Math.cos(Theta_z), translation[1] + x_length/2 * Math.sin(Theta_z), translation[2]); return full_link; } function make_joint(x, y, z, height, radius=0.03) { var joint = new THREE.CylinderGeometry(radius, radius, height * 0.9, 32); joint.rotateX(Math.PI/2); joint = new THREE.Mesh(joint); joint.position.set(x, y, z); return joint; } (async function onLoad() { var res = window.res; var hc = window.hc; var multi_high = window.multi_high; // find the mean value of the res array var max_x = 0; var max_y = 0; var min_x = Infinity; var min_y = Infinity; for(let i = 0; i < res.length; i++) { for(let j = 0; j < res[i][1].length; j++) { if (res[i][1][j][0] > max_x) { max_x = res[i][1][j][0]; } if (res[i][1][j][0] < min_x) { min_x = res[i][1][j][0]; } if (res[i][1][j][1] > max_y) { max_y = res[i][1][j][1]; } if (res[i][1][j][1] < min_y) { min_y = res[i][1][j][1]; } } } var mean_x = (max_x + min_x) / 2; var mean_y = (max_y + min_y) / 2; var container, camera, scene, renderer, controls, last_frame_time; init(); animate(); controls.update(); function init() { container = document.getElementById('container'); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; container.appendChild(renderer.domElement); scene = new THREE.Scene(); scene.background = new THREE.Color(0xfafafa); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(mean_x,mean_y, 20); scene.add(camera); window.onresize = function() { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } var ambientLight = new THREE.AmbientLight(0xffffff, 2.0); scene.add(ambientLight); // var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); // directionalLight.position.x = 4; // directionalLight.position.y = 1; // directionalLight.position.z = -2; // scene.add( directionalLight ); controls = new OrbitControls(camera, renderer.domElement); controls.target.set(mean_x,mean_y,0); // addGridHelper(); createModel(0); last_frame_time = Date.now(); } function createModel(j) { var results = res[j]; //iterate through the results and create the links meshes = [] for (let i = 0; i < results[0].length; i++) { var link = results[0][i]; meshes.push(make_link(link[0], link[1], link[2], link[3], link[4], link[5])); if (i == 0){ //yellow meshes[i].material = new THREE.MeshStandardMaterial({ color: 0xff8c00, opacity: 0.5, transparent: true , side: THREE.DoubleSide, depthWrite: true}); } else meshes[i].material = new THREE.MeshStandardMaterial({ color: 0x3b3b3b, opacity: 0.5, transparent: true , side: THREE.DoubleSide, depthWrite: true}); scene.add(meshes[i]); } joint_meshes = [] for (let i = 0; i < results[1].length; i++) { var joint = results[1][i]; joint_meshes.push(make_joint(joint[0], joint[1], joint[3], joint[2])); if(joint[4] == 1)//brown joint_meshes[i].material = new THREE.MeshStandardMaterial({ color: 0xff4c00, side: THREE.DoubleSide, depthWrite: false}); else joint_meshes[i].material = new THREE.MeshStandardMaterial({ color: 0x121212, side: THREE.DoubleSide, depthWrite: false}); scene.add(joint_meshes[i]); } if (multi_high) { var n = hc.length; for (let j = 0; j < n; j++) { var points = []; var colors = []; for (let i = 0; i 1000/30) { set_idx(); last_frame_time = Date.now(); } for (let i = 0; i < meshes.length; i++) { meshes[i].rotation.z = res[current_frame][0][i][4]; meshes[i].position.set(res[current_frame][0][i][5][0] + res[current_frame][0][i][0]/2 * Math.cos(res[current_frame][0][i][4]), res[current_frame][0][i][5][1] + res[current_frame][0][i][0]/2 * Math.sin(res[current_frame][0][i][4]), res[current_frame][0][i][5][2]); } for (let i = 0; i < joint_meshes.length; i++) { joint_meshes[i].position.set(res[current_frame][1][i][0], res[current_frame][1][i][1], res[current_frame][1][i][3]); } requestAnimationFrame(animate); render(); } function render() { renderer.clearDepth(); renderer.render(scene, camera); } })();