示例

CSS

canvas { width: 100%; height: 100%;
}body { margin: 0; background: #000000;
}

JS

// Skull mesh by DGordillo http://www.blendswap.com/blends/view/4792var renderer, scene, camera, group;
var mouseX = 0;
var mouseY= 0;var skull, leftEye, rightEye;
var textMesh;
var pointLights = [];init();
animate();  function init() {// rendererrenderer = new THREE.WebGLRenderer({ alpha: true });renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true;document.body.appendChild(renderer.domElement);// cameracamera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, .1, 10000);camera.position.set(0, 0, 60);camera.zoom = 2;camera.updateProjectionMatrix();// scenescene = new THREE.Scene();scene.updateMatrixWorld();// lightsvar light = new THREE.SpotLight( 16726440, .5 );light.angle = 0.50;light.decay = 1;light.position.set( -50.56, -21.69, 50.41 );scene.add( light );// var sphereSize = 10;// var spotLightHelper = new THREE.SpotLightHelper( light, sphereSize );//scene.add( spotLightHelper );var pointLight = new THREE.PointLight( 216285, 3.1 );pointLight.decay = 1;pointLight.position.set( -2.37, -18.15, 20.48 );scene.add( pointLight );//  var sphereSize = 1;//  var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );//  scene.add( pointLightHelper );var sphere = new THREE.SphereGeometry( 0.1, 16, 8 );for (var i = 0; i <= 8; i++) {light = new THREE.PointLight( 16726440, .8, 10 );light.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 16726440 } ) ) );scene.add( light );pointLights.push(light);}// grid helpervar size = 100;var divisions = 10;var gridHelper = new THREE.GridHelper( size, divisions );//scene.add( gridHelper );// load meshesvar loader = new THREE.JSONLoader(); loader.load('https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/blender/skull.json', generateSkull );loader.load('https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/blender/eyes.json', generateLeftEye );loader.load('https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/blender/eyes.json', generateRightEye );// create group group = new THREE.Group();group.position.x = 2;scene.add( group );// window resizewindow.addEventListener( 'resize', onWindowResize, false );// mouse movedocument.addEventListener('mousemove', onMouseMove, false);// load textgenerateText();};// generate text
function generateText(){var loader = new THREE.FontLoader();loader.load( 'https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/scripts/optimer_regular.typeface.json', function ( font ) {var textGeometry = new THREE.TextGeometry( "wow !", {font: font,size: 7.5,height: 3,curveSegments: 10});var textMaterial = new THREE.MeshPhongMaterial( { color: 16726440, specular: 0xFF00FF });var mesh = new THREE.Mesh( textGeometry, textMaterial );mesh.scale.z =mesh.scale.y=mesh.scale.x=.4;mesh.position.y = -10;mesh.position.x = -6;mesh.rotation.y = .3;scene.add( mesh );});}; // generate skull
function generateSkull(geometry, material){geometry.computeVertexNormals();skull = new THREE.Mesh(geometry, material);skull.scale.y = skull.scale.z = skull.scale.x = 8.37;group.add( skull );
}; // generate eye
function generateLeftEye(geometry, material){geometry.computeVertexNormals();geometry.center();leftEye = new THREE.Mesh(geometry, material);leftEye.scale.y = leftEye.scale.z = leftEye.scale.x = 8.5;leftEye.position.set(-4.5,1.7,4.3);leftEye.material.forEach(material => material.shininess = 40);// var box = new THREE.BoxHelper( eye, 0xffff00 );// scene.add( box );group.add( leftEye );
};// generate eye
function generateRightEye(geometry, material){geometry.computeVertexNormals();geometry.center();rightEye = new THREE.Mesh(geometry, material);rightEye.scale.y = rightEye.scale.z = rightEye.scale.x = 8.5;rightEye.position.set(0,1.7,4.3);rightEye.material.forEach(material => material.shininess = 40);// var box = new THREE.BoxHelper( eye, 0xffff00 );// scene.add( box );group.add( rightEye );
}; // Follows the mouse event
function onMouseMove(event) {event.preventDefault();cursorX = event.clientX;mouseX = (event.clientX / window.innerWidth) * 2 - 1;mouseY = - (event.clientY / window.innerHeight) * 2 + 1;
};// on resize
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );
}// render
function render() {renderer.render( scene, camera );
};// animate
function animate(event) {requestAnimationFrame( animate );if (group) {group.rotation.y = mouseX * .15;group.rotation.x = mouseY * -.15;}if (rightEye && leftEye) {leftEye.rotation.y = rightEye.rotation.y = mouseX * .50;leftEye.rotation.x = rightEye.rotation.x = mouseY * -.50;} var time = Date.now() * 0.0008 ;pointLights[0].position.x = Math.sin( time * 0.3  ) * 15;pointLights[0].position.y = Math.sin( time * 0.5  ) * 10;pointLights[0].position.z = Math.cos( time * 0.4  ) * 10;pointLights[1].position.x = Math.sin( time * 0.6  ) * 10;pointLights[1].position.y = Math.cos( time * 0.7 ) * 10;pointLights[1].position.z = Math.sin( time * 0.3 ) * 15;pointLights[2].position.x = Math.cos( time * 0.5  ) * 15;pointLights[2].position.y = Math.cos( time * 0.6 ) * 10;pointLights[2].position.z = Math.sin( time * 0.8 ) * 10;pointLights[3].position.x = Math.sin( time * 0.3  ) * 10;pointLights[3].position.y = Math.cos( time * 0.5 ) * 15;pointLights[3].position.z = Math.cos( time * 0.7 ) * 10;pointLights[4].position.x = Math.sin( time * 0.7  ) * 15;pointLights[4].position.y = Math.sin( time * 0.3 ) * 20;pointLights[4].position.z = Math.cos( time * 0.2 ) * 10;pointLights[5].position.x = Math.sin( time * 0.5  ) * 20;pointLights[5].position.y = Math.cos( time * 0.8 ) * 10;pointLights[5].position.z = Math.sin( time * 0.5 ) * 15;pointLights[6].position.x = Math.sin( time * 0.5  ) * 10;pointLights[6].position.y = Math.cos( time * 0.8 ) * 10;pointLights[6].position.z = Math.cos( time * 0.7 ) * 15;pointLights[7].position.x = Math.sin( time * 0.3  ) * 10;pointLights[7].position.y = Math.cos( time * 0.5 ) * 15;pointLights[7].position.z = Math.sin( time * 0.2 ) * 10;pointLights[8].position.x = Math.sin( time * 0.8  ) * 15;pointLights[8].position.y = Math.cos( time * 0.3 ) * 10;pointLights[8].position.z = Math.cos( time * 0.3 ) * 10;render();
};

骷髅（skeleton）相关推荐

建立海盗的天堂：盗贼之海的AI设定（三）：巨齿鲨、海怪和骷髅船的AI运行
欢迎来到AI与游戏,<盗贼之海>系列的第三篇.在前两篇,我分析了Rare公司是如何平衡这款海盗题材游戏的AI系统在不同服务器的游戏体验,另外骷髅和鲨鱼AI是如何促使玩家无论在陆地还是水中都 ...
Vue 组件库 HeyUI@1.17.0 发布，新增 Skeleton 组件
新增组件:Skeleton 加载占位图加载占位图就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容. 详情请查看: https://www. ...
我的世界java存档怎么导入_我的世界：地图种子输入“skull”，真的会找到沙漠骷髅岛么？...
背景:早年间,流传于Minecraft的一个视频.玩家在地图种子中输入"skull",能够在沙漠中发现一座"沙漠骷髅岛".一时间大量的玩家来到这个种子寻找传说中 ...
文献记录(part26)--Action recognition using kinematics posture feature on 3D skeleton joint locations
学习笔记,仅供参考,有错必纠关键词:动作识别:骨架数据:运动学姿势特征(KPF):基于位置的统计特征(PSF):关节角度:联合阵地:深层神经网络:集合架构:Convrnn基准数据集:线性关节位置特征 ...
认识Skeleton Screen【屏幕加载骨架】
一直以来,无论是web还是iOS.android的应用中,为了提升应用的加载等待这段时间的用户感知体验,各种奇门遁甲之术层出不穷.其中,菊花图以及由它衍生各种加载动画是一个非常大的流派,如下图所示: ...
stub 和 skeleton 的讲解，自己实现一个stub和skeleton程序
RMI的本质就是实现在不同JVM之间的调用,它的实现方法就是在两个JVM中各开一个Stub和Skeleton,二者通过socket通信来实现参数和返回值的传递. 有关RMI的例子代码网上可以找到不少, ...
使用 Skeleton Screen 提升用户感知体验
使用 Skeleton Screen 提升用户感知体验转载于:https://www.cnblogs.com/befash/p/7850013.html
视频数据：骨骼数据采集（Skeleton Data）
骨骼数据不像前两个数据,转成字节数组,加载到图片控件上. 一个Kinect for windows设备最多识别6个人,其中只有两个人能识别完整,一个完整的人Kinect for windows中提供了 ...
html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果（带动画）
效果自上而下渐隐渐现源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...

骷髅（skeleton）

骷髅

示例

CSS

JS

骷髅（skeleton）相关推荐

最新文章

热门文章