-
2020-01-01 00:00
- 41
- 0
github链接：https://github.com/hpstream/n...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,
body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="./ColladaLoader.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
//renderer.shadowMap.enabled = true;
//renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
function initLight() {
}
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(10);
scene.add(helper);
var s = 25;
var cube = new THREE.CubeGeometry(s, s, s);
for (var i = 0; i < 3; i++) {
var material = new THREE.MeshBasicMaterial({ color: randomColor() });
var mesh = new THREE.Mesh(cube, material);
mesh.position.x = 800 * (2.0 * Math.random() - 1.0);
mesh.position.y = 800 * (2.0 * Math.random() - 1.0);
mesh.position.z = 800 * (2.0 * Math.random() - 1.0);
mesh.rotation.x = Math.random() * Math.PI;
mesh.rotation.y = Math.random() * Math.PI;
mesh.rotation.z = Math.random() * Math.PI;
mesh.updateMatrix();
scene.add(mesh);
}
var loader = new THREE.ColladaLoader();
loader.load("./model/model.dae", function (collada) {
rouletteScene = collada.scene;
rouletteScene.position.set(0, 0, 80);
// rouletteScene.rotation.set(-90 * Math.PI / 180, 0, 0);
scene.add(rouletteScene);
})
}
//随机生成颜色
function randomColor() {
var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
strHex = "#",
index;
for (var i = 0; i < 6; i++) {
index = Math.round(Math.random() * 15);
strHex += arrHex[index];
}
return strHex;
}
//声明raycaster和mouse变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseClick(event) {
//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera(mouse, camera);
// 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects(scene.children);
console.log(intersects);
//将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
for (var i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000);
}
}
window.addEventListener('click', onMouseClick, false);
//初始化dat.GUI简化试验流程
var gui;
function initGui() {
//声明一个保存需求修改的相关数据的对象
controls = {
};
var gui = new dat.GUI();
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最远距离
controls.minDistance = 50;
//设置相机距离原点的最远距离
controls.maxDistance = 200;
//是否开启右键拖拽
controls.enablePan = true;
}
function render() {
renderer.render(scene, camera);
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
//controls.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initGui();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</html>自己画的图形可以监控，导入的图形不能监控，怎么回事？？
- 共 0 条
- 全部回答
-
江晚正愁余 普通会员 1楼
在Three.js中，无法直接监控三维模型的实时状态，但可以通过以下几种方式实现：
- 网络请求和同步: 你可以通过使用WebSockets或WebRTC等技术，定期向三维模型服务器发送状态更新，以获取模型的当前状态。服务器可以使用Three.js提供的各种动画API，如GLTFLoader、MeshStandardMaterial、MeshBasicMaterial等，来渲染模型的动画和状态。当模型状态发生改变时，服务器可以向客户端发送相应的动画帧或状态改变通知，从而更新模型的显示状态。
javascript const gltfLoader = new THREE.GLTFLoader(); gltfLoader.load('model.gltf', (model) => { model.scene.traverse((node) => { if (node.isMesh) { const material = node.material; material.needsUpdate = true; const mesh = node.mesh; mesh.rotation.y += 0.01; mesh.position.z += 0.01; mesh.rotation.z += 0.02; // Update mesh rotation and position based on animation // ... } }); });- GLTF Animation Animation: Three.js提供了GLTF Animation API，可以用来创建和播放动画。你可以在服务器端创建一个动画实例，然后通过订阅其更新事件，定期向客户端发送状态更新。当模型状态发生改变时，服务器可以向客户端发送动画帧的描述信息，包括帧的开始时间和结束时间、帧的纹理信息等，从而更新模型的显示状态。
javascript const gltfLoader = new THREE.GLTFLoader(); gltfLoader.load('model.gltf', (model) => { const animation = new THREE.Animation(); animation.setTimeline([ { frameIndex: 0, frameTime: 0.0, material: new THREE.MeshStandardMaterial(), vertexData: model.geometry.vertices, primitiveType: THREE.TRIANGLES, }, { frameIndex: 1, frameTime: 0.01, material: new THREE.MeshBasicMaterial(), vertexData: model.geometry.vertices.slice(1), primitiveType: THREE.TRIANGLES, }, // Add more frames as needed ]); animation.addEventListener('play', () => { model.scene.traverse((node) => { if (node.isMesh) { const material = node.material; material.needsUpdate = true; const mesh = node.mesh; mesh.rotation.y += 0.01; mesh.position.z += 0.01; mesh.rotation.z += 0.02; // Update mesh rotation and position based on animation // ... } }); }); animation.addEventListener('update', () => { // Update mesh rotation and position based on animation // ... }); animation.play(); });- Renderer Animation: Three.js也提供了Renderer Animation API，可以用来创建和播放渲染过程中的动画。在Three.js中，renderer是一个全局的Renderer对象，可以使用它来渲染模型和添加动画。当模型状态发生改变时，你可以将模型的geometry重新定义为渲染所需的模型，然后使用renderer对象的animation属性来设置渲染过程中的动画帧。
```javascript const gltfLoader = new THREE.GLTFLoader(); gltfLoader.load('model.gltf', (model) => { const geometry = model.geometry; geometry.verticesNeedUpdate = true; const material = new THREE.MeshStandardMaterial(); geometry.vertices = new Float32Array(geometry.vertices.length); geometry.facesNeedUpdate = true; geometry.faces = new Float32Array(geometry.faces.length); // Add more geometry and material as needed const renderer = new THREE.WebGLRenderer({ canvas: document.createElement('canvas') }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
const animation = new THREE.Animation(); animation.setTimeline([ { frameIndex: 0, frameTime: 0.0, material: new THREE.MeshStandardMaterial(), vertexData: model.geometry.vertices, primitiveType: THREE.TRIANGLES, }, { frameIndex: 1, frameTime: 0.01, material: new THREE.MeshBasicMaterial(), vertexData: model.geometry.vertices.slice(1), primitiveType: THREE.TRIANGLES, }, // Add more frames as needed ]); animation.addEventListener('play', () => { renderer.render(scene, camera); }); animation.addEventListener('update', () => { // Update mesh rotation and position based on animation // ... }); animation.play();}); ```
需要注意的是，以上三种方法都需要在服务器端设置相应的动画和模型数据，然后在客户端通过Three.js的渲染API来渲染模型并播放动画。在实际应用中，你可能需要根据具体需求和浏览器支持情况，选择最适合的方法来实现三维模型的实时状态监控。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部