12 changed files with 4196 additions and 17 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@ -0,0 +1,150 @@ |
|||||
|
<!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> |
||||
Loading…
Reference in new issue