THREE = {
const THREE = await require("three@0.95.0/build/three.min.js")
const scene = new THREE.Scene()
const gridHelper = new THREE.GridHelper(60, 20)
const axesHelper = new THREE.AxesHelper(5)
scene.add(gridHelper)
scene.add(axesHelper)
const randomColors = [
0x3498db,
0x1abc9c,
0xf1c40f,
0xe67e22,
0xe74c3c,
0x9b59b6
]
const SCALE = 2
function createPoint ([x, y, z]) {
const sx = x * SCALE
const sy = z * SCALE
const sz = y * SCALE
return new THREE.Vector3(sx, sy, sz)
}
const robot = new THREE.Group()
const firstPoints = []
for (let legIndex = 0; legIndex < 6; legIndex++) {
const [teta, beta, alpha] = setTipPos(
ros[legIndex],
anchors[legIndex],
coxa,
femur,
tibia,
legs[legIndex][0],
legs[legIndex][1],
legs[legIndex][2]
);
const legPoints = createLegPoints(
ros[legIndex],
anchors[legIndex],
coxa,
femur,
tibia,
teta,
beta,
alpha
);
firstPoints.push(legPoints[0])
const points = [];
legPoints.forEach(r => points.push(createPoint(r)))
{
const material = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 4 })
const geometry = new THREE.BufferGeometry().setFromPoints(points)
const line = new THREE.Line(geometry, material)
robot.add(line)
}
{
points.forEach((vector, i) => {
const geometry = new THREE.SphereGeometry(.4)
const material = new THREE.MeshBasicMaterial({ color: randomColors[i] })
const sphere = new THREE.Mesh(geometry, material)
geometry.translate(vector.x, vector.y, vector.z)
robot.add(sphere)
})
}
}
{
const geometry = new THREE.Geometry()
const sortedAnchorPoints = [
firstPoints[0],
firstPoints[2],
firstPoints[4],
firstPoints[5],
firstPoints[3],
firstPoints[1],
firstPoints[0]
]
sortedAnchorPoints.forEach(r => geometry.vertices.push(createPoint(r)))
const material = new THREE.LineBasicMaterial({ color: 0xdddddd, linewidth: 2 })
const line = new THREE.Line(geometry, material)
robot.add(line)
}
robot.translateY(h * SCALE);
robot.rotateX(rx);
robot.rotateZ(ry);
robot.rotateY(rz);
scene.add(robot)
const camera = new THREE.PerspectiveCamera(60, 600 / 400, 1, 500)
camera.position.y = 60 * Math.sin(rotateCameraUp)
camera.position.x = 60 * Math.cos(rotateCameraUp) * Math.sin(rotateCamera)
camera.position.z = 60 * Math.cos(rotateCameraUp) * Math.cos(rotateCamera)
camera.lookAt(0, 0, 0)
const canvas = document.getElementById("simulation")
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setSize(600, 400)
let running = true
invalidation.then(() => {
renderer.dispose()
running = false
})
function resizeRendererToDisplaySize() {
const pixelRatio = window.devicePixelRatio
const width = canvas.clientWidth * pixelRatio
const height = canvas.clientHeight * pixelRatio
const needResize = canvas.width !== width || canvas.height !== height
if (needResize) {
renderer.setSize(width, height, false)
camera.aspect = canvas.clientWidth / canvas.clientHeight
camera.updateProjectionMatrix()
}
}
if (running) {
resizeRendererToDisplaySize()
renderer.render(scene, camera)
await Promises.tick(1000 / 10)
}
return "3D Simulation Rendered by Three.js"
}