You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
4.5 KiB
150 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Threejs实现机械臂运动，机械臂dae格式模型</title>
|
|
<meta charset="UTF-8">
|
|
<script type="text/javascript" src="lib/statistics.js"></script>
|
|
<!-- <script type="text/javascript" src="lib/steak.js"></script> -->
|
|
<script type="text/javascript" src="lib/three.js"></script>
|
|
<script type="text/javascript" src="lib/OrbitControls.js"></script>
|
|
<script type="text/javascript" src="lib/ColladaLoader.js"></script>
|
|
<script type="text/javascript" src="lib/dat.gui.js"></script>
|
|
<script type="text/javascript" charset="UTF-8" src="lib/Tween.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="dom"></div>
|
|
<script type="text/javascript">
|
|
var camera;
|
|
var renderer;
|
|
let dae;
|
|
|
|
let kinematics;
|
|
let kinematicsTween;
|
|
const tweenParameters = {};
|
|
|
|
function init() {
|
|
var urls = [
|
|
'assets/bgImage/skyBox6/posx.jpg',
|
|
'assets/bgImage/skyBox6/negx.jpg',
|
|
'assets/bgImage/skyBox6/posy.jpg',
|
|
'assets/bgImage/skyBox6/negy.jpg',
|
|
'assets/bgImage/skyBox6/posz.jpg',
|
|
'assets/bgImage/skyBox6/negz.jpg'
|
|
];
|
|
// 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。
|
|
var scene = new THREE.Scene();
|
|
var cubeLoader = new THREE.CubeTextureLoader();
|
|
// scene.background = cubeLoader.load(urls);
|
|
scene.opacity = 0;
|
|
|
|
// 创建一个摄像机，它定义了我们正在看的地方
|
|
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
|
|
// 将摄像机对准场景的中心
|
|
camera.position.z = 5;
|
|
camera.lookAt(scene.position);
|
|
var orbit = new THREE.OrbitControls(camera);
|
|
|
|
// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
|
|
renderer = new THREE.WebGLRenderer({
|
|
antialias: true,
|
|
logarithmicDepthBuffer: true,
|
|
});
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
var ambientLight = new THREE.AmbientLight("#ffffff", 1);
|
|
scene.add(ambientLight);
|
|
const light = new THREE.HemisphereLight(0xffeeee, 0x111122);
|
|
scene.add(light);
|
|
|
|
// 将呈现器的输出添加到HTML元素
|
|
document.getElementById("dom").appendChild(renderer.domElement);
|
|
|
|
// 启动动画
|
|
renderScene();
|
|
initFang();
|
|
|
|
// 添加坊的模型
|
|
function initFang() {
|
|
var loader = new THREE.ColladaLoader();
|
|
loader.load('assets/models/abb_irb52_7_120.dae', function (collada) {
|
|
dae = collada.scene;
|
|
dae.traverse(function (child) {
|
|
if (child.isMesh) {
|
|
// model does not have normals
|
|
child.material.flatShading = true;
|
|
}
|
|
});
|
|
// dae.scale = 1000;
|
|
dae.updateMatrix();
|
|
|
|
kinematics = collada.kinematics;
|
|
console.log(kinematics)
|
|
scene.add(dae);
|
|
setupTween();
|
|
});
|
|
}
|
|
|
|
function setupTween() {
|
|
const duration = THREE.Math.randInt(1000, 2000);
|
|
const target = {};
|
|
for (const prop in kinematics.joints) {
|
|
if (kinematics.joints.hasOwnProperty(prop)) {
|
|
if (!kinematics.joints[prop].static) {
|
|
const joint = kinematics.joints[prop];
|
|
const old = tweenParameters[prop];
|
|
const position = old ? old : joint.zeroPosition;
|
|
tweenParameters[prop] = position;
|
|
target[prop] = THREE.Math.randInt(joint.limits.min, joint.limits.max);
|
|
}
|
|
}
|
|
}
|
|
kinematicsTween = new TWEEN.Tween(tweenParameters).to(target, duration).easing(TWEEN.Easing.Quadratic.Out);
|
|
kinematicsTween.onUpdate(function (object) {
|
|
for (const prop in kinematics.joints) {
|
|
if (kinematics.joints.hasOwnProperty(prop)) {
|
|
if (!kinematics.joints[prop].static) {
|
|
kinematics.setJointValue(prop, this[prop]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
kinematicsTween.start();
|
|
setTimeout(setupTween, duration);
|
|
}
|
|
|
|
var clock = new THREE.Clock(); //声明一个时钟对象
|
|
function renderScene() {
|
|
TWEEN.update();
|
|
orbit.update();
|
|
// 使用requestAnimationFrame函数进行渲染
|
|
requestAnimationFrame(renderScene);
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
// 渲染的场景
|
|
renderer.render(scene, camera);
|
|
}
|
|
window.onload = init;
|
|
|
|
// 随着窗体的变化修改场景
|
|
function onResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
// 监听窗体调整大小事件
|
|
window.addEventListener('resize', onResize, false);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|