第一步：
画地面，并让地面旋转，以便观察
效果：
代码：
<!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
相关推荐
本案例为一个 threejs 的特效网页，大小球体进行包裹，外球体为透明材质，但是进行了线框渲染，使其能够通过外球踢查看其内球体。 在文章中详细解释了各个技术要求，包括： ... 3.6 animation 动画
html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效。该3D线条动画特效可以用鼠标进行互动，canvas的背景颜色可以随机改变。你可以使用它来制作页面顶部的Banner，效果会非常的酷。
三.JS文本动画使用Three.JS对文本进行动画处理CDN用于创建项目： <script src =' <script src =' <script src =' <script src =' <script src =' <script src =' <script src ='
锁定动画 使用 Three.js 制作的简单锁定动画。 可在
气泡动画着色器 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 yarn build 将要生产的应用程序生成到dist文件夹。 它在...
Three.js的3D线条动画 ...以及动画背景色 标签 HTML5，javascript，canvas，Three.js，动画，颜色。 什么是？ 我以一个prebuild three.js，并添加了精美的动画背景色，并调整了一些参数，例如行数，透视图和颜色。 ...
1第一节 helloWorld 2第二节 初识 ...- 骨骼动画实现案例 - JSON模型变形动画案例 - GLTF模型骨骼动画案例 第十二节 tween - 普通案例 13第十三节 场景交互 - 点击选中模型 - 框选案例 实战： 操作案例
:post_office: 使用Three.js构建建筑物波浪动画有关如何使用three.js和TweenMax创建3D建筑波浪动画的教程。 离子D.要求nodejs 8+内容with-controls/ and no-controls/ src/ scripts/... styles/... index....
dx动画与three.js库一起使用的小动画片段这依赖于three.js
react-model-viewer旨在与three.js模型加载react-model-viewer无缝接口以加载3D资产（ GTLFLoader ， OBJLoader等）。 此外，如果模型包含动画， THREE.AnimationMixer通过THREE.AnimationMixer支持动画。 import...
Three.js达人课相关案例 案例查看地址： 01第一节 helloWorld 02第二节 初识 03第三节 scene 04第四节 geometry 05第五节 material 06第六节 Light 平行光案例 点光源案例 聚光灯光源 户外光案例 07第七节 camera ...
已使用threejs创建了基本动画。 运行npm i以安装所有必需的软件包。 安装http-server模块以运行服务器。 运行npm i http-server -g进行全局安装 运行http-server . -p <port> http-server . -p <port>以及在该...
使用React，Three.js，物理引擎制作的3D网络动画 使用React，Three.js和物理引擎制作的3D网络动画。 3D片段根据物理引擎的重力移动，并且可以拖动。 用create-react-app制作。 科技类 堆栈：CSS，JavaScript，Three...
基本用法动画功能在下面的示例中，创建了一个循环，并添加了“动画功能”，该功能将与浏览器的渲染循环（内部使用requestAnimationFrame ）同步地被重复调用。 import AnimationLoop from 'animation-loop'const ...
ThreeJS 巴比伦JS CocosCreator +微信游戏引擎 有关如何使用运行时的更多信息，请转到此 Ice Demon角色样本作品由作者： Katarzyna Zalecka [ ]，Attribution-ShareAlike 3.0 Unported 在下载示例和更多内容。 ...
工具作者：用于简化 HTML 5 游戏开发的实用程序和工具。 版权所有 2014 黑塔娱乐动画查看器允许用户加载 THREE.js 动画模型的 HTML5 网页。MayaThree 出口商Maya 的 THREE.js 动画模型导出器。
实现火焰动画效果。其实作者是利用多张火焰图片，做成一个image sequence，然后播放这个sequence，从而产生动态的火焰效果。老实说，这不是一个很好的实现方法...该源码由源码天堂IOS动画(Animation)频道免费提供下载。
月船 - 2 一部动画短片，展示了使用 React JS、Three JS 和 react-three-fiber 制作的 ISRO（印度空间研究组织）Chandrayaan-2 月球任务的旅程
使用PIE库（基于THREE.js）制作的简单模拟时钟读取动画。 用法 首先，导航到“ Experiment目录并创建一个服务器。 例如，在python 3中，您可以使用以下命令python -m http.server 8000创建服务器。 在浏览器中运行...
Canvas2Png转换器 使用Three.js，Mozilla Audio Data API，Ajax和... 一个开源动画实验，使用Three.js创建抽象动画，使用ajax将图像代码发送到php文件，使用php将图像文件另存为PNG文件。 要求：本地服务器上运行php