有个入门的网站。以下是学习摘要。
第1章 开启three.js之旅(一)
里面提到了【初级教程\chapter1\1-1.html】。源码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</body>
</html>
但是实际运行时有问题,报错:
Refused to execute script from 'https://raw.github.com/mrdoob/three.js/master/build/three.js'because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
网上对该问题的解答 :Chrome refused to execute this JavaScript file,真的是说了很多东西,不过都不太懂,以后可以再回头看一看。其中有一个解决这个问题的简单方法,去掉源码中<script>的src中的网址的第一个小数点,即:
https://raw.github.com/mrdoob/three.js/master/build/three.js
change to
https://rawgithub.com/mrdoob/three.js/master/build/three.js,验证OK。
另外,在chrome中调试javascript代码。没搞通。
第1章 开启Threejs之旅(二)
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//视角,aspect,near,far
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);//平行光
light.position.set(100, 100, 200);
scene.add(light);
}
var xxx;
function initObject() {
...
scene.add( xxx );
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
<pre name="code" class="html"><style type="text/css">
div#canvas-frame{
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<body οnlοad="threeStart();">
<div id="canvas-frame"></div>
</body>
第2章 还记得点、线、面吗(一)
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );
linewidth 线条的宽度,默认时候1个单位宽度。
linecap 线条两端的外观,默认是圆角端点。
linejoin 两个线条的连接点处的外观,默认是“round”,表示圆角。
vertexColors 定义线条材质是否使用顶点颜色。这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。
fog 定义材质的颜色是否受全局雾效的影响。;
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
var color1 = new THREE.Color( 0x444444 );
var color2 = new THREE.Color( 0xFF0000 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push( color1, color2 );
var line = new THREE.Line( geometry, material, THREE.LinePieces );
scene.add(line);
第2章 还记得点、线、面吗(二)
var cube;
function initObject() {
var geometry = new THREE.SphereGeometry( 130, 50, 50);
var mesh2 = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial( { color: 0xA1634E} ) );
mesh2.scale.x = 0.75;
scene.add( mesh2 );
}
var controls;
function setControl() {
controls = new THREE.TrackballControls( camera );
}
第3章 让场景动起来
动画方式:
1.移动render object
2.移动camera
设置循环的动画:
function animate() {
// do something, move render object or move camera
render();
requestAnimationFrame( animate );
}
视觉残留:
当物体在快速运动时,当人眼所看到的影像消失后,人眼仍能继续保留其影像1/24秒左右的图像,这种现象被称为视觉暂留现象。
性能监视器Stats
在Three.js中,性能由一个性能监视器来管理,它的介绍在 stats.js 可以看到。性能监视器的截图如下所示:
其中FPS表示:上一秒的帧数,这个值越大越好,一般都为60左右。点击上面的图,就会变成下面的另一个视图。
MS表示渲染一帧需要的毫秒数,这个数字是越小越好。再次点击又可以回到FPS视图中。
性能监视器的启用:
var renderer;
var stats;
function initThree() {
// init renderer
...
// init stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}
记得在渲染函数里面调用stats.update();来实时刷新
动画引擎Tween.js
定义Tween对象
function initTween() {
new TWEEN.Tween( mesh.position)
.to( { x: -400 }, 3000 ).repeat( Infinity ).start();
}
记得在渲染函数里面调用TWEEN.update();来实时刷新
TODO :制作Demo(点在曲线上运动)
1.Linear
2.Bezier wiki
3.CatmullRom wik
可以参看tween.js-master/examples/06_array_interpolation.html中的实现。提示:
TWEEN.Interpolation.Linear
TWEEN.Interpolation.Bezier
TWEEN.Interpolation.CatmullRom
第4章 三维空间的观察
在Threejs中相机的表示是THREE.Camera,它是相机的抽象基类,其子类有两种相机,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。类图如下所示:
正投影 :
OrthographicCamera( left, right, top, bottom, near, far ),例如:
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );将浏览器的宽高设置为视景体的宽高,相机正好在窗口中心
透视投影:
PerspectiveCamera( fov, aspect, near, far ), 例如:
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
第5章 五彩的光源
THREE.Light是所有光源的基类。构造方式THREE.Light ( hex ),其中hex是一个16进制的数,代表光源的color环境光
THREE.AmbientLight( hex )
点光源
THREE.PointLight( color, intensity, distance ),其中
color:光的颜色
intensity:光的强度,默认是1.0,就是说是100%强度的灯光。
distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从intensity衰减为0。 默认情况下,这个值为0.0,表示光源强度不衰减。
聚光灯
THREE.SpotLight( hex, intensity, distance, angle, exponent )
hex:聚光灯发出的颜色
intensity:同点光源
distance:同点光源
angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度
exponent:光源模型中,衰减的一个参数,越大衰减约快
方向光
THREE.DirectionalLight( hex, intensity )
hex:光的颜色
intensity:光的强度
第6章 将canvas作为纹理,将动画作为纹理(二)
原文在这里
第7章 3D模型的加载与使用