threeJS-Helper13-SkeletonHelper(骨骼显示助手)

需要电子档书籍或者源码可以Q群：828202939 希望可以和大家一起学习、一起进步！！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！

本章节学习的内容可以从的官方文档中找到。本博客部分代码和模型从官网案例中提取

涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面

今天学习Helper里面的SkeletonHelper助手!

涉及知识点：平行光、平面、GLTF模型加载、动画、阴影、环境放射、OrbitControls控制对象等，不懂可以先忽略，后期会讲！

效果图：

代码：

<html><head><title>threeJS-Helper13-SkeletonHelper(骨骼显示助手)</title><style>body {background-color: #000;margin: 0px;overflow: hidden;}canvas {width: 100%;height: 100%}</style>
</head><body><script src="../../../build/three.js"></script><script src="../../js/loaders/GLTFLoader.js"></script><script src="../../js/lights/RectAreaLightUniformsLib.js"></script><script src="../../js/controls/OrbitControls.js"></script><script>var camera, scene, renderer, geometry, material, animate, controls; //常用变量var cube, dirLight, helper; //自定义对象变量var target = new THREE.Vector3(0, 0, 0);var model, skeleton, mixer, clock;var crossFadeControls = [];var idleAction, walkAction, runAction;var idleWeight, walkWeight, runWeight;var actions, settings;var singleStepMode = false;var sizeOfNextStep = 0;init();animate();function init() {scene = new THREE.Scene();scene.background = new THREE.Color(0xcfcfcf);clock = new THREE.Clock();camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 100, 150);camera.lookAt(target);camera.updateProjectionMatrix(); //相机更新var ambient = new THREE.AmbientLight(0xffffff, 0.1);scene.add(ambient);dirLight = new THREE.DirectionalLight(0xffffff);dirLight.position.set(-30, 120, -100);dirLight.castShadow = true;dirLight.shadow.camera.top = 100;dirLight.shadow.camera.bottom = -100;dirLight.shadow.camera.left = -100;dirLight.shadow.camera.right = 100;dirLight.shadow.camera.near = 0.1;dirLight.shadow.camera.far = 500;scene.add(dirLight);var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({color: 0x9cfcf99,depthWrite: false}));mesh.rotation.x = -Math.PI / 2;mesh.position.set(0, -20, 0)mesh.receiveShadow = true;scene.add(mesh);// PolarGridHelper( radius：标网格的半径, radials：径向线的数量, circles：圆圈数, // divisions：每个圆圈使用的线段数, color1：用于网格元素的第一种颜色, color2：用于网格元素的第一种颜色 )var radius = 100;var radials = 16;var circles = 8;var divisions = 64;var PolarGridHelper = new THREE.PolarGridHelper(radius, radials, circles, divisions);PolarGridHelper.position.set(0, -20, 0)scene.add(PolarGridHelper)renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.gammaInput = true;renderer.gammaOutput = true;document.body.appendChild(renderer.domElement);//OrbitControls控件操作模块controls = new THREE.OrbitControls(camera, renderer.domElement);controls.autoRotate = true;controls.autoRotateSpeed = 0.5;controls.addEventListener('change', function () {renderer.render(scene, camera);});// BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )geometry = new THREE.BoxGeometry(30, 30, 30, 3, 3, 3);material = new THREE.MeshStandardMaterial({color: 0xcfcfcf,wireframe: false,castShadow: true,receiveShadow: true,roughness: 0, //表面放射粗糙度metalness: 0 //金属感}); //wireframe默认为false// 右边立方体cube = new THREE.Mesh(geometry, material);cube.position.set(30, 0, 20);scene.add(cube);// 左边立方体var matStdObjects = new THREE.MeshStandardMaterial({color: 0xA0cf00,roughness: 0,metalness: 0.6});var mshStdBox = new THREE.Mesh(geometry, matStdObjects);mshStdBox.position.set(-30, 0, 20);mshStdBox.rotation.set(0, Math.PI / 2.0, 0);mshStdBox.castShadow = true;mshStdBox.receiveShadow = true;scene.add(mshStdBox);loadModel(); //添加任务模型}function loadModel() {var loader = new THREE.GLTFLoader();loader.load('../../models/gltf/Soldier.glb', function (gltf) {model = gltf.scene;scene.add(model);model.traverse(function (object) {if (object.isMesh) {object.castShadow = true;console.log(object);}});model.rotation.y = -Math.PI;model.scale.set(50, 50, 50);// 骨骼显示助手skeleton = new THREE.SkeletonHelper(model);scene.add(skeleton);var animations = gltf.animations;mixer = new THREE.AnimationMixer(model);idleAction = mixer.clipAction(animations[0]);walkAction = mixer.clipAction(animations[3]);runAction = mixer.clipAction(animations[1]);actions = [idleAction, walkAction, runAction];actions[1].play();animate();});}function activateAllActions() {actions.forEach(function (action) {action.play();});}function animate() {requestAnimationFrame(animate);var mixerUpdateDelta = clock.getDelta();if (mixer) mixer.update(mixerUpdateDelta);if (controls) controls.update();cube.rotation.y += 0.01;renderer.render(scene, camera);};</script>
</body></html>

threeJS-Helper13-SkeletonHelper(骨骼显示助手)相关推荐

threejs 物体根据相机位置显示_threejs
threejs 点击数: 10347 简介既然我们可以使用canvas元素创建纹理,Three.js也给我们提供了可以实现video创建纹理的方法.我们通过Three.js提供的VideoTextur ...
maya骨骼显示_干货 | 如何删除maya中绑定好的骨骼，只留下一个干净的模型
哈喽大家好我是曼特君五分钟小课堂又要开课辣快搬个小板凳准备好今天交大家maya中删除骨骼绑定的方法想把导入maya中带骨骼和绑定的模型除了模型以外的部分全部删除掉变成一个干净的模型文件 ...
threejs 物体根据相机位置显示_认识Threejs
Threejs定义 Threejs运行在浏览器的3d javascript库(three表示3D的意思,js表示javascript) Three主要对象 1.场景(Scene):是物体.光源等元素的 ...
threejs 物体根据相机位置显示_Threejs学习笔记(一) 基础篇
基本概念此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点. 一个完整的3D环境包含以下元素: 1.场景(Scene):是物体.光源等元 ...
threejs 物体根据相机位置显示_threejs中深度与透明
在 threejs 的日常开发中,我们经常会遇到关于深度.透明一些渲染问题.这里我们就来简单的做下讲解,希望能帮助大家绕开一些常见的坑. 深度我们来了解下 webgl 中的深度到底是怎么回事儿,首先 ...
maya骨骼显示_3DMax高级建模人物骨骼蒙皮！零基础快速入门！不要错过
网上关于3DMax高级教程骨骼蒙皮的视频教程确实比较多,但是说的较复杂,对于初学者很难在短时间内学会如何对人物模型进行骨骼蒙皮,这篇文章将简明扼要的介绍如何对3DMax人物模型进行骨骼蒙皮.(此篇 ...
推荐一款好用的串口波形显示助手----虚拟示波器
文章目录前言一.虚拟示波器是什么? 二.去哪里下载 1.下载源码 2.解压三.如何移植到单片机 1.添加.c,.h文件 2.替换串口字节发送函数,如send_char(databuf[i]); ...
ThreeJS 骨架图显示、骨骼修改颜色
ThreeJS 骨架图显示.骨骼修改颜色郭隆邦_技术博客 http://www.yanhuangxueyuan.com http://www.yanhuangxueyuan.com/Three.js ...
基于STM32单片机和Labview的温湿度波形实时显示串口助手（二）----手把手教学
文章目录前言一.温湿度检测波形显示系统界面二.软件程序框图 1.Init 2.Wait 3.Send 4.GetData 5.Deal 6.Exit 总结前言由于最近忙于如何开展自己研究方向 ...

threeJS-Helper13-SkeletonHelper(骨骼显示助手)

threeJS-Helper13-SkeletonHelper(骨骼显示助手)相关推荐

最新文章

热门文章