第一步：
画地面，并让地面旋转，以便观察
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Knight</title>
<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
<script src="js/three.min.js"></script>
</head>
<body>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
//camera.position.z = 1000;
camera.position.set(0, 0, 1000);
//camera.up.z = 1;
camera.lookAt({x:0,y:0,z:0});
//scene.add(camera);
var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1); //Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb}); //MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
var ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 1, 1), new THREE.MeshBasicMaterial({color:0xbbbbbb,side:THREE.DoubleSide}));
//var ground = new THREE.Mesh(geometry, material);
ground.position.set(0, 0, 0);
//ground.rotation.x = -Math.PI/2;
this.scene.add(ground);
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var drLight = new THREE.DirectionalLight(0xeeeeee);
drLight.position.set(100, 100, 100);
scene.add(drLight);
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
renderer.setClearColor(0xffffff, 1.0);
document.body.appendChild(renderer.domElement);
var delta = 0;
function render(){
delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
//camera.lookAt({x:0,y:0,z:0});
ground.rotation.x = delta;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
第二步：
加载模型
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Knight</title>
<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
<script src="js/three.min.js"></script>
</head>
<body>
<script>
var scene,camera,renderer;
var mesh,ground;
var width = window.innerWidth;
var height = window.innerHeight;
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
camera.position.set(0, 0, 1000);
camera.lookAt({x:0, y:0, z:0});
scene.add(camera);
var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1); //Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb}); //MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
//var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
ground = new THREE.Mesh(geometry, material);
ground.position.set(0, 0, 0);
ground.rotation.x = -Math.PI/2;
scene.add(ground);
var loader = new THREE.JSONLoader();
loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) ); //蒙皮网格模型
mesh.position.set( 0, 0, 0 );
mesh.scale.set( 30, 30, 30 );
scene.add( mesh );
});
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var drLight = new THREE.DirectionalLight(0xeeeeee);
drLight.position.set(100, 100, 100);
scene.add(drLight);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
renderer.setClearColor(0xffffff, 1.0);
document.body.appendChild(renderer.domElement);
}
var delta = 0;
function animate(){
requestAnimationFrame(animate);
delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
ground.rotation.x = delta;
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
第三步：
重新设定相机位置，并添加旋转控件，以便从各个方位观察模型
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MyKnight</title>
<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
<script src="js/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
</head>
<body>
<script>
var scene,camera,renderer;
var mesh,ground;
var controls;
var width = window.innerWidth;
var height = window.innerHeight;
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
camera.position.set(-500, 500, 800);
camera.lookAt({x:0, y:0, z:0});
scene.add(camera);
var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1); //Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
//var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb}); //MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
ground = new THREE.Mesh(geometry, material);
ground.position.set(0, 0, 0);
ground.rotation.x = -Math.PI/2;
ground.receiveShadow = true;
scene.add(ground);
var loader = new THREE.JSONLoader();
loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) ); //蒙皮网格模型
mesh.position.set( 0, 0, 0 );
mesh.scale.set( 30, 30, 30 );
mesh.castShadow = true;
scene.add( mesh );
});
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var drLight = new THREE.DirectionalLight(0xeeeeee);
drLight.position.set(500, 500, 500);
drLight.castShadow = true;
scene.add(drLight);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
renderer.setClearColor(0xffffff, 1.0);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
controls = new THREE.TrackballControls(camera);
controls.staticMoving = true;
}
//var delta = 0;
function animate(){
requestAnimationFrame(animate);
controls.update();
//delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
//camera.rotation.y = delta;
//camera.lookAt(scene.position);
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
第四步：
使用Animation播放动画模型，并使用THREE.Clock()做计时器
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MyKnight</title>
<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
<script src="js/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
</head>
<body>
<script>
var scene,camera,renderer;
var mesh,ground;
var controls;
var width = window.innerWidth;
var height = window.innerHeight;
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
camera.position.set(-500, 500, 800);
camera.lookAt({x:0, y:0, z:0});
scene.add(camera);
var geometry = new THREE.PlaneBufferGeometry(1000, 1000, 1, 1); //Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
//var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb}); //MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
var loader = new THREE.JSONLoader();
loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
for ( var i = 0; i < materials.length; i ++ ) {
var m = materials[ i ];
m.skinning = true; //蒙皮
m.morphTargets = true; //变形目标
}
mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) ); //蒙皮网格模型
//mesh.position.set( 0, 0, 100 );
mesh.scale.set( 30, 30, 30 );
mesh.castShadow = true;
scene.add( mesh );
var animation = new THREE.Animation( mesh, geometry.animation );
animation.play();
});
ground = new THREE.Mesh(geometry, material);
ground.position.set(0, 0, 0);
ground.rotation.x = -Math.PI/2;
ground.receiveShadow = true;
scene.add(ground);
var drLight = new THREE.DirectionalLight(0xeeeeee);
drLight.position.set(500, 500, 500);
drLight.castShadow = true;
scene.add(drLight);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
renderer.setClearColor(0xffffff, 1.0);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
controls = new THREE.TrackballControls(camera);
controls.staticMoving = true;
}
var clock = new THREE.Clock();
function animate(){
requestAnimationFrame(animate);
controls.update();
THREE.AnimationHandler.update( 0.75*clock.getDelta() ); //控制动画速度（AnimationHandler类的update: function ( deltaTimeMS ) {...}方法，参数以ms为单位）
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
附注：笔者当前使用的three.js版本是r69
相关推荐
**3D签到墙ThreeJS动画详解** Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建3D图形。这个“3D签到墙”项目利用Three.js的强大功能，为活动、年会等场合提供一种新颖且互动的签到体验。通过WebGL，它...
Three.js 提供了`THREE.Animation`和`THREE.KeyframeAnimation`等类来支持这种动画形式。此外，还可以利用`requestAnimationFrame`函数来实现连续的帧更新，以达到流畅的动画效果。 **火焰和烟雾效果** 创建火焰和...
综上所述，"threejs 消防报警 报警精灵 动画"项目利用Three.js的强大功能，创建了一个逼真的3D消防报警系统，通过动画效果增强了用户体验。通过深入学习和实践Three.js，开发者可以创造出更多富有创新和实用性的3D...
首先，要理解的是，three.js中的动画是通过关键帧（Keyframe）和动画控制器（AnimationClip）来实现的。关键帧是时间轴上的特定时刻，模型的特定属性（如位置、旋转、缩放）在这些时刻的值。动画剪辑是包含一系列...
本示例"ThreeJS使用Curve曲线让物体沿轨迹运动DEMO"探讨了如何利用Three.js中的Curve类来创建自定义的路径，并使物体沿着这条路径移动。 首先，让我们理解什么是Curve。在Three.js中，Curve是定义二维空间中路径的...
在"004(特效)"这个文件中，可能包含了使用Canvas和Three.js实现的各种动画绘制效果。这些效果可能涵盖了以下知识点： 1. **基本图形绘制**：使用Canvas API创建简单的2D图形，如矩形、圆形、线条等，并通过改变颜色...
5. **动画效果**：在Three.js中，可以使用`THREE.Animation`或`THREE.AnimationMixer`类来控制和混合动画。`AnimationMixer`尤其适用于复杂的动画控制，它可以同时管理多个动画，并根据需要进行时间线混合，使动画更...
动画的实现可以通过Three.js提供的动画系统，如`THREE.Animation`或使用`requestAnimationFrame`函数来更新场景。在每一帧中，开发者会更新粒子或线条的位置，使得轨迹线随时间变化，同时地球也会根据设定的速度旋转...
【基于Threejs的鼠标移动图片跟随变形动画特效】是一个利用HTML5库Three.js实现的交互式视觉效果。Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形，无需用户安装任何插件。它使得Web...
【描述】提到的"threejs 室内机房源码"意味着这个代码集包含了实现以下功能的脚本： 1. **场景构建**：使用Three.js创建3D场景，包括地板、墙壁、天花板、设备等元素。 2. **模型导入**：可能涉及到将3D模型（如OBJ...
在本项目中，我们主要探讨如何在Vue3.0框架中整合Three.js库，以便导入三维模型，并实现模型的缩放、平移、旋转以及添加交互式动画效果，特别是通过鼠标点击来规划空间路径。Three.js是JavaScript的一个强大库，用于...
【基于threejs的3D爆炸碎片轮播图特效】是一个运用了HTML5库技术，特别是Three.js库，来实现一种创新且引人注目的视觉效果。Three.js是JavaScript的一个库，专为在Web浏览器中创建和展示三维图形而设计。这个特效...
7. **动画（Animation）**：Three.js提供了多种方式实现3D物体的动画效果，如`THREE.Object3D.rotation.y += ...`手动更新旋转角度，或者使用`THREE.AnimationMixer`结合JSON动画数据进行更复杂的动画控制。...
【标题】中的“网页模板——基于threejs实现3D爆炸碎片轮播图特效”表明这是一个使用Web技术，特别是three.js库来创建的3D视觉效果。Three.js是JavaScript的一个库，专为在Web浏览器中创建和展示三维图形设计。这个...
- 动画的加载和播放可能需要额外的处理，例如使用 `THREE.AnimationClip` 和 `THREE.AnimationMixer`。 总之，"threejs测试文件格式汇总" 提供了一个全面的资源集合，可以帮助开发者了解和实践在Three.js 中如何...
"基于threejs的3d学校示例"项目旨在展示如何使用Three.js来构建一个3D的学校环境。这个项目可能包括建筑物、道路、植被等元素，通过交互式的方式，让用户能够自由浏览、缩放、旋转这个3D空间。这样的应用可以用于...
这个"ThreeJS中文API文档"是为开发者提供的一种详细、易懂的参考资源，旨在帮助他们更好地理解和使用THREE.JS库。以下是对这个API文档中可能包含的一些关键知识点的详细解释： 1. **对象和类**：THREE.JS中的所有...
在本项目中，“html5+three.js彩色液态流动背景动画特效.zip”是一个利用HTML5和Three.js库实现的特效代码包。Three.js是一个基于WebGL的JavaScript 3D库，它简化了在浏览器中创建3D图形的过程。 首先，`index....
6. **动画更新(Animation Loop)**：为了让模型动态旋转，我们需要创建一个动画循环，使用requestAnimationFrame来更新每一帧。 ```javascript function animate() { requestAnimationFrame(animate); object....
【标题】"three.js全息光影动画特效.zip" 涉及的是使用three.js库创建的3D全息光影动画效果。three.js是一款基于WebGL的JavaScript 3D库，它使得在浏览器中进行3D图形编程变得简单易行。全息光影动画是一种通过模拟...