Three.js基础学习教程
转载 &更新时间：日 10:41:04 & 作者：Avenstar
这篇文章主要为大家详细介绍了Three.js基础学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、Three.js官网及使用Three.js必备的三个条件
1.Three.js 官网
2.使用Three.js必备的三个条件
(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)
大致意思是使用three.js可以实现任何显示的东西，必须满足三个条件: a scene场景、a camera相机、a renderer渲染器. 三者缺一不可。
二、使用Three.js必备三个条件（a scene场景、a camera相机、a renderer渲染器）之间的关系　
如上图所示，来说明a scene场景、a camera相机、a renderer渲染器三者之间关系[/code]
1.场景scene是一个物体的容器【通俗理解装东西的嘛】，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
2.相机camera的作用就是面对场景，在场景中取一个合适的景，把它拍下来。【可以想象成人的眼睛】
3.渲染器renderer的作用就是将相机拍摄下来的图片，放到浏览器中去显示
三、通过上述理论来实践官网案例
效果图如下
官网案例实现源码
&title&My first three.js app&/title&
body { margin: 0; }
canvas { width: 100%; height: 100% }
&script src="./lib/three.js"&&/script&
//创建一个场景对象
var scene = new THREE.Scene();
//创建一个相机对象
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
//创建一个渲染器对象
var renderer = new THREE.WebGLRenderer();
//设置画布尺寸
renderer.setSize( window.innerWidth, window.innerHeight );
//设置画布色
renderer.setClearColor(0x00AABB, 1.0);
//将渲染画布添加到浏览器中，以便后面剩放相机拍下的景
document.body.appendChild( renderer.domElement );
//创建一个几何体长、宽、高分别为1几何体对象
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//材料、皮肤
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//将material材料添加到几何体geometry，产生新的对象几何体cube
var cube = new THREE.Mesh( geometry, material );
//将几何体添加至场景中
scene.add( cube );
//设置相机z轴，垂直电脑屏幕位置
camera.position.z = 5;
var render = function () {
/*requestAnimationFrame( render ); //循环渲染
cube.rotation.x += 0.1; //x轴每秒旋转60次
cube.rotation.y += 0.1;//y轴每秒旋转60次*/
renderer.render(scene, camera); //实时将相机拍下的几何体渲染到场景中
通过官网案例不难发现，camera照相机默认的观察方向是屏幕的方向(z轴负方向),当变化坐标以后，就要将照相机指向原点，才能观察到物体
z轴负方向？？？因此这里很有必要说说三维坐标（如下图）
照相机指向原点？？？来说说相机camera相机（很重要!!想象一下人看不到东西是什么感觉）.
案例中采用透视相机（从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。）
var camera = new THREE.PerspectiveCamera(fov, aspect , near,far)
new THREE.PerspectiveCamera(fov, aspect , near,far)& 透视相机
视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
纵横比：aspect
相机离视体积最近的距离：near
相机离视体积最远的距离：far
综上，相信结合上述三维坐标、相机图理解相机、就应该变得很简单咯哦.接下来接着修改上述案例（说明 后面案例鼠标滚动放大缩小、三维旋转都是基于相机来实现的）
四、将官网案修改且设置相机朝向及相机位置
利用[lookAt]方法来设置相机的视野中心。 「lookAt()」的参数是一个属性包含中心坐标「x」「y」「z」的对象。
设置相机的上方向为正方向y轴 camera.up.x = 0; camera.up.y = 1/*相机朝向--相机上方为y轴*/; camera.up.z = 0;
五、实现旋转立方体
旋转动画原理相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，实时将相机拍摄下来的图片，放到浏览器中去显示
//相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
function animation(){
var timer = Date.now()*0.0001;
camera.position.x = Math.cos(timer)*100;
camera.position.z = Math.sin(timer)*100;
camera.lookAt(scene.position); //设置相机视野中心
renderer.render(scene, camera);
requestAnimationFrame(animation);//渲染回调函数
实现效果图如下所示
旋转立方体——案例源码
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&旋转立方体 &/title&
#canvas-frame {
width: 100%;
height: 600
&body onload="threeStart()"&
&div id="canvas-frame" &&/div&
&script type="text/javascript" src="./lib/three.js" &&/script&
&script type="text/javascript"&
var renderer, //渲染器
width = document.getElementById('canvas-frame').clientWidth, //画布宽
height = document.getElementById('canvas-frame').clientH //画布高
//初始化渲染器
function initThree(){
renderer = new THREE.WebGLRenderer({
antialias : true
//canvas: document.getElementById('canvas-frame')
renderer.setSize(width, height);
renderer.setClearColor(0xFFFFFF, 1.0);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
//初始化场景
function initScene(){
scene = new THREE.Scene();
function initCamera() { //透视相机
camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
camera.position.x = 50;
camera.position.y = 150;
camera.position.z =150;
camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;
camera.lookAt({ //相机的中心点
// camera 正交相机
/*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
camera.position.x = 250;
camera.position.y = 100;
camera.position.z = 1800;
camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;
camera.lookAt({ //相机的中心点
function initLight(){
// light--这里使用环境光
//var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
//light.position.set(600, );
var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
light.position.set(600, ); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
scene.add(light);
function initObject(){ //初始化对象
//初始化地板
initFloor();
function initGrid(){ //辅助网格
var helper = new THREE.GridHelper( 1000, 50 );
helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
function initFloor(){
//创建一个立方体
var geometry = new THREE.BoxGeometry(80, 20, 80);
for ( var i = 0; i & geometry.faces. i += 2 ) {
var hex = Math.random() * 0
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
//将material材料添加到几何体geometry
var mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
//初始化页面加载
function threeStart(){
//初始化渲染器
initThree();
//初始化场景
initScene();
//初始透视化相机
initCamera();
//初始化光源
//initLight();
//模型对象
initObject();
//初始化网格辅助线
initGrid();
//renderer.render(scene, camera);
//实时动画
animation();
* 旋转原理
* 相机围绕y轴旋转
* 不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，
* 实时将相机拍摄下来的图片，放到浏览器中去显示
function animation(){
//渲染成像
var timer = Date.now()*0.0001;
camera.position.x = Math.cos(timer)*100; //相机位置x轴方向
camera.position.z = Math.sin(timer)*100; //相机位置y轴方向
//设置相机视野中心
camera.lookAt(scene.position);
//渲染成像
renderer.render(scene, camera);
//渲染回调animation函数
requestAnimationFrame(animation);
至此完毕，附上个人绘制思路流程图
【参考资料】
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具请您先，然后提交此项目的竞标方案。
还不是智城用户? 智城期待您的加入，请成为我们的一员吧！
用户名/电子邮件08.ThreeJs开发指南-第八章-加载外部模型
第八章 创建、加载高级网格和几何体
对象的组合
当从一个几何体中创建网格，并使用多种材质时，Three.js就会创建一个组。
该几何体的多个副本就会添加到这个组里，每份副本都有自己特定的材质。
我们看到的结果是，一个网格拥有多个材质，实际上它是一个包含多个网格的组。
sphere = createMesh(new THREE.SphereGeometry(5,10,10));
cube = createMesh(new THREE.CubeGeometry(6,6,6));
group = new THREE.Object3D();
group.add(sphere);
group.add(cube);
scene.add(group);
如果旋转一个组，不是旋转组中的每个对象，而是旋转整个组。
为了方便观察，在组的中心放置一个箭头。
var arrow = new THREE.ArrowHelper (new THREE.Vector3(0,1,0),group.position,10,0x0000ff);
scene.add(arrow);
使用组的时候，依然可以引用和修改组中的一个单独的几何体。
将多个网格合并成一个网格
当渲染的对象比较多时，即使在组中，每个对象还是独立的，需要对它们分别进行处理和渲染。
通过THREE.GeometryUtils.merge函数可以将多个几何体合并起来，创建一个联合体。
var geometry = new THREE.Geometry();
for(var i = 0 ;i&controls.numberOfOi++){
THREE.GeometryUtils.merge(geometry,addCube());
scene.add(new THREE.Mesh(geometry,cubeMaterial));
从外部资源加载几何体
JSON：Three.js有它自己的json格式，你可以使用它以声明的方式定义几何体和场景。但是它不是一种正式的格式。
OBJ和MTL：OBJ是一种简单的三维文件格式，用来定义对象的几何体。MTL文件通常和OBJ文件一起使用，在一个MTL文件中，定义对象的材质。
Collada：用来定义XML类文件中数字内容的格式。差不多所有的三维软件和渲染引擎都支持这个格式。
STL：立体成型术 。 广泛用于快速成型。例如，三维打印机的模型文件通常是STL文件。Three.js有一个可定制的STL导出工具，STLExporter.js。可以将Three.js中的模型导出到一个STL文件。
CTM：由openCTM创建的格式。可以用来压缩存储表示三维网格的三角形面片。
VTK：Visualization Tookit 定义的文件格式，用来指定顶点和面。VTK有两种格式，Three.js支持旧的格式，即Asscii格式。
PDB：特别的数据格式，由 蛋白质数据银行 场景，用来定义蛋白质的形状。Three.js可以加载并显示这种描述格式的蛋白质。
PLY：多边形文件格式。通常保存三维扫描仪的数据。
Three.js的json格式
1.保存和加载几何体
HTML5本地存储API，通过这个API可以很容易将持久化信息保存在客户端的浏览器中，以后还可以读取，即使浏览器关闭，重启之后也可以。
1.引入GeometryExporter.js。
2.保存几何体到浏览器本地存储中。
var exporter = new THREE.GeometryExporter()
var result = exporter.parse(knot.geometry)
localStorage.setItem("json",JSON.stringfy(result))
//将一个json对象转换为一个字符串
JSON.stringfy(result);
json对象的格式如下：
'metadata':{
'version':4,
'type':'geometry',
'generator':GeometryExporter''
'vertices':[14.,-0.0065944,...],
'faces':[49,0,8,...]
Three.js保存的是原始的几何体。它将所有顶点和面的信息保存起来，但是你并不知道这到底是一个怎样的几何体。
加载保存的几何体到场景中。
var json =
localStorage.getItem('json');
var localGeometry = JSON.parse(json);
var loader = new THREE.JSONLoader();
var geom = loader.parse(localGeometry);
loadedMesh = createMesh(geom.geometry);
loadedMesh.position.x = -35;
loadedMesh.position.z = -5;
scene.add(loadedMesh);
JSONLoader还提供了一个load函数，可以传递一个url地址，改地址指向一个含有json定义的文件。
这里，我们只保存了几何体，其他的信息都丢失了，比如材质、光源、位置等。我们可以使用SceneExporter保存这些信息。
保存和加载场景
1.引入SceneExporter.js
2.导出场景
var exporter = new THREE.SceneExporter();
var sceneJson = JSON.stringfy(exporter.parse(scene));
localStorage.setItem('scene',sceneJson);
3.加载场景
var json = localStorage.getItem('scene');
var sceneLoader = new THREE.SceneLoader();
sceneLoader.parse(JSON.parse(json),function(e){
scene = e.
传递给loader的最后一个参数”.”是一个URL相对地址。例如，在材质中使用的纹理，就可以从这个相对地址中获取。本例中，我们没有使用纹理，所以传递但其概念目录即可。
同GeometryLoader一样，你也可以使用load函数直接加载一个JSON文件。
使用Blender
在blender中安装Three.js导出器：
G:\Study\WebGL\three.js-r73\utils\exporters\blender\addons中的io_three目录拷贝到Blender安装目录下的addons目录下。
激活导出器：
打开Blender-&File-&User Preferences-&Addons-&搜索three-&勾选复选框
在Blender里加载和导出模型
File-&Open-&assets/models/misc_chair01.blend
File-&Export-&Three.js
导出的json文件中引用了纹理图片，所以我们要确保Three.js能够找到这个纹理文件。
在Blend中打开UV/Image Editor视图。File-&…
Image-&Save as Image
保存到和json模型相同的文件夹下。
在Three.js中加载模型：
var loader = new THREE.JsonLoader();
loader.load('../assets/models/misc_chair01.js',function(geometry,material){
mesh = new THREE.Mesh(geometry,material[0]);
mesh.scale.x = 15;
mesh.scale.y = 15;
mesh.scale.z = 15;
scene.add(mesh);
},'../assets/models');
Three.js导入三维文件格式
1.OBJ和MTL格式
两种格式相互配合。OBJ定义几何体格式，而MTL定义所用的材质。两者都是文本格式。
在Three.js中如果只加载几何体，则只需引入OBJLoader.js
var loader = new THREE.OBJLoader();
loader.load('../assets/models/pinecone.obj',function(geometry){
var material = new THREE.MeshLambertMaterial({
color:0x5C3A21
geometry.children.forEach(function(child){
if(child.children.length==1){
if(child.children[0] instanceof THREE.Mesh){
child.children[0].material =
geometry.scale.set(100,100,100);
geometry.rotation.x = -0.3;
scene.add(geometry);
如果加载几何体并直接赋予材质，需要引入：
OBJLoader.js
MTLLoader.js
OBJMTLLoader.js
var loader = new THREE.OBJMTLLoader();
loader.load('load',function(event){
var object = event.
var wing2 = object.children[5].children[0];
var wing1 = object.children[4].children[0];
wing1.material.alphaTest = 0.5;
wing1.material.opacity = 0.6;
wing1.material.transparent = true;
wing2.material.alphaTest = 0.5;
wing2.material.opacity = 0.6;
wing2.material.transparent = true;
object.scale.set(140,140,140);
object.rotation.x = 0.2;
object.rotation.y = -1.3;
scene.add(object);
loader.load('../assets/models/butterfly.obj','../assets/models/butterfly.mtl');
有时间加载的模型源文件中材质的设置可能有问题，为此我们不得不去检查模型材质的定义，并修改一些属性。
2.加载Collada模型
扩展名.dae ，是另一种通用的、定义场景和模型（以及动画）的文件格式。
Collada不仅可以定义几何体，也定义了材质，甚至还可以定义光源。
引入js库：ColladaLoader.js
loader.load('../assets/models/dae/Trunck_dae.dae',function(result){
mesh = result.scene.children[0].children[0].clone();
mesh.scale.set(4,4,4);
scene.add(mesh);
result对象的结构如下：
var result = {
scene:scene,
morphs:morphs,
skins:skins,
animations:animData,
第一次加载该模型的时候，材质不能正确的渲染。因为材质的纹理使用TGA格式，而Three.js不支持该格式。
所以我们将TGA格式转换为PNG格式，再修改.dar模型文件中的xml元素，使其指向转换后的PNG文件。
3.加载STL、CTM和VTK模型
&1&引入[NameOfFormat]Loader.js文件
&2&使用[NameOfFormat]Loader.load()函数从URL中加载。
&3&检查回调函数的返回结果，并对它进行渲染。
4.展示蛋白质数据银行中的蛋白质
蛋白质数据银行收集了很多分子、蛋白质的详细信息。还可以以PDB格式下载这些分子的数据结构。
Three.js中解析PDB文件：
引入：PDBLoader.js
var loader = new THREE.PDBLoader();
var group = new THREE.Obeject3D();
loader.load('../assets/models/diamond.pdb',function(geometry,geometryBonds){
var i = 0;
geometry.vertices.forEach(function(position){
var sphere = new THREE.SphereGeometry(0.2);
var material = new THREE.MeshPhongMaterial({
color:geometry.colors[i++];
var mesh = new THREE.Mesh(sphere,material);
mesh.position =
group.add(mesh);
for(var j = 0 ;j&geometryBonds.vertices.j+=2){
var path = new THREE.SplineCurve3([
geometryBonds.vertices[j],
geometryBonds.vertices[j+1]
var tube = new THREE.TubeGeometry(path,1,0.04);
var material = new THREE.MeshPhongMaterial({
color:0xcccccc
var mesh = new THREE.Mesh(tube,material);
group.add(mesh);
console.log(geometry);
console.log(geometryBonds);
scene.add(group);
从PLY模型中创建粒子系统
引入：PLYLoader.js
var loader = new THREE.PLYLoader();
var group = new THREE.Object3D();
loader.load('../assets/models/test.ply',function(geometry){
var material = new THREE.ParticleBasicMaterial({
color:0xffffff,
opacity:0.6,
transparent:true,
blending:THREE.AdditiveBlending,
map:generateSprite()
group = new THREE.ParticleSystem(geometry,material);
group.sortParticles = true;
console.log(group);
scene.add(group);
没有更多推荐了，webGL+threejs制作web三维视图入门教程
作者：用户
本文讲的是webGL+threejs制作web三维视图入门教程，
这是一篇的webGL+threejs构建web三维视图的入门教程，可以了解到利用threejs创建简单的三维图形，并且控制图形运动。一、创建场景我们所见的视图由两个部分共同创建，scene和camera。首先定义一个场景：var
这是一篇的webGL+threejs构建web三维视图的入门，可以了解到利用threejs创建简单的三维图形，并且控制图形运动。一、创建场景我们所见的视图由两个部分共同创建，scene和camera。首先定义一个场景：var scene = new THREE.Scene();然后定义一个相机：var camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );等等，定义相机需要视窗的长宽。现在我要让我的绘图显示在页面的一个区域（&div&)标签中。我们来选中这个元素，获取它的长宽。var container = document.getElementById('canvasdiv');var width = canvasdiv.clientWvar height = canvasdiv.clientH这样再加上前面的一行代码，我们就完成了对相机的定义。然后把相机位置设定在z轴上方便观察。camera.position.set(0,0,10)现在我们需要一个渲染器把定义好的场景渲染出来。var renderer = new THREE.WebGLRenderer();给这个渲染器合适的大小。renderer.setSize( width, height );然后将其加入到dom中。canvasdiv.appendChild( renderer.domElement );（运行以后发现这其实就是一个canvas元素。其实我们也可以在中创建canvas元素再将renderer绑定到它上面。var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') });）最后进行渲染。renderer.render(scene,camera);这样，就建立了一个简单的3d场景。二、绘制图形
我将threejs中的物体理解为模型+材料。以一个长方体为例。创建模型：var geometry = new THREE.BoxGeometry( 1,2,1 );定义材料：var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );有了这两者，我们就可以构建一个长方体方块了。var cube = new THREE.Mesh( geometry, material );我们将其添加到场景中显示。scene.add( cube );这样，一个三维的长方体就绘制完成了关于其他形状的绘制，张雯莉的threejs入门指南中介绍的很详细，在此不多赘述。这部分的完整代码如下：&!DOCTYPE html&&html&&head&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/"&#canvasdiv{
width: 600
height: 600}
&script src="js/three.min.js"&&/script&&/head&&body&
&div id="canvasdiv"&
&/div&&script type="text/javascript" &var container = document.getElementById('canvasdiv')var scene = new THREE.Scene();var width = canvasdiv.clientWvar height = canvasdiv.clientHvar camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );camera.position.set(0,0,10);var renderer = new THREE.WebGLRenderer();renderer.setSize( width, height );canvasdiv.appendChild( renderer.domElement );var geometry = new THREE.BoxGeometry( 2,1,1 );var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );renderer.render(scene,camera);&/script&&/body&&/html&
看上去它只是一个长方形而已，但是它确实是一个立体图形，你可以改变一下camera的位置来观察一下。camera.position.set( 5,3,10 );好了，这样看起来是一个立体的长方体了吧。三、创建3d对象
大多数时候，我们需要讲绘制的图形整合到一起进行控制。此时，我们便需要一个3d对象。在上面绘制的那个长方体上面再放一个球。var geometry = new THREE.SphereGeometry( 0.5,100,100 );var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } );var ball = new THREE.Mesh( geometry,material );ball.position.set( 0,0,1 );scene.add(ball);另说一句，默认放置mesh的位置是( 0,0,0 )，和改变相机位置一样，我们可以用ball.position.set方法来改变图形或对象的位置。因此动画也利用这个方法来实现。然后要把它们整合成一个对象。首先我们创建一个对象。var myobj = new THREE.Object3D();然后把我们画的图形添加到对象里就ok啦。myobj.add( cube );myobj.add( ball );这时候我们已经有了一个3d对象，它包含我们刚刚绘制的长方形和球。于是就没有必要像原来那样把图形一个一个地放置到场景里，只需要把刚刚创建的对象放置到场景里。scene.add( myobj );完整代码如下：&!DOCTYPE html&&html&&head&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&#canvasdiv{
width: 600
height: 600}
&script src="js/three.min.js"&&/script&&/head&&body&
&div id="canvasdiv"&
&/div&&script type="text/javascript" &var container = document.getElementById('canvasdiv')var scene = new THREE.Scene();var width = canvasdiv.clientWvar height = canvasdiv.clientHvar camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );camera.position.set( 0,0,10 )var renderer = new THREE.WebGLRenderer();renderer.setSize( width, height );canvasdiv.appendChild( renderer.domElement );var geometry = new THREE.BoxGeometry( 2,1,1 );var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );var cube = new THREE.Mesh( geometry, material );//scene.add( cube );var geometry = new THREE.SphereGeometry( 0.5,100,100 );var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } );var ball = new THREE.Mesh( geometry,material );ball.position.set( 0,0,1 );//scene.add(ball);var myobj = new THREE.Object3D();myobj.add( cube );myobj.add( ball );scene.add( myobj );renderer.render(scene,camera);&/script&&/body&&/html&显示效果：
threejs支持从外部导入.obj文件，听说这种文件是用3DsMax绘制的，用PS也可以编辑。我们需要引入OBJMTLLoader.js，MTLLoader.js文件；也有一个OBJLoader.js，但利用这个库只能导入模型而不能导入绘制obj时添加的材质，个人感觉不是非常实用，就不做介绍了。这时候，我们需要把文件们放到一个服务器上，否则会出现跨域问题。为了让图像更明显，我们添加一些光线。scene.add( new THREE.AmbientLight( 0xffffff ) );这里，我们通过导入图片来设置这个对象的纹理。var texture = new THREE.Texture();var loader = new THREE.ImageLoader( );loader.load( 'tank.jpg', function ( image ) {
texture.image =
texture.needsUpdate =} ); 开始导入我们的3D对象！var loader = new THREE.OBJMTLLoader();
loader.load('tank.obj','tank.mtl',function(object){
object.traverse(function(child){
if (child instanceof THREE.Mesh){
//将贴图赋于材质
child.material.map =
child.material.transparent =
object.position.set(0,0,0);
scene.add( object );
camera.lookAt( object.position );
renderer.render( scene,camera );
模型导入进去了，但是看起来还是很奇怪，这就要我们加一些其他光线渲染一下。在这里我们添加平行光线。var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );directionalLight.position.set( 1, 1, 1 );scene.add( directionalLight );
变得光泽多了。从外部导入obj的完整代码：&!DOCTYPE html&&html&&head&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&#canvasdiv{
width: 1200
height: 800}
&script src="js/three.min.js"&&/script&
&script src="js/MTLLoader.js"&&/script&
&script src="js/OBJMTLLoader.js"&&/script& &/head&&body&
&div id="canvasdiv"&
&/div&&script type="text/javascript" &var container = document.getElementById('canvasdiv')var scene = new THREE.Scene();var width = canvasdiv.clientWvar height = canvasdiv.clientHvar camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );camera.position.set( -10,10,10);var renderer = new THREE.WebGLRenderer();renderer.setSize( width, height );canvasdiv.appendChild( renderer.domElement );var texture = new THREE.Texture();var loader = new THREE.ImageLoader(
);loader.load( 'tank.jpg', function ( image ) {
texture.image =
texture.needsUpdate =} );var loader = new THREE.OBJMTLLoader();
loader.load('tank.obj','tank.mtl',function(object){
object.traverse(function(child){
if (child instanceof THREE.Mesh){
//将贴图赋于材质
child.material.map =
//重点，没有该句会导致PNG无法正确显示透明效果
child.material.transparent =
object.position.set(0,0,0);
scene.add( object );
camera.lookAt( object.position );
renderer.render( scene,camera ); });
scene.add( new THREE.AmbientLight( 0xffffff ) );var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );directionalLight.position.set( 1, 1, 1 )scene.add( directionalLight );renderer.render(scene,camera);&/script&&/body&&/html&四、动画
现在我们想办法让这些图形动起来。在threejs中运用最多的动画是用requestAnimationFrame()方法。也可以利用传统的setInterval()做，但用这个会掉帧。这里我们做一个render函数，来进行渲染和动画调用。这里以前面添加了myobj对象的代码为基础。现在来不断地改变对象的角度方便对其进行观察。&!DOCTYPE html&&html&&head&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&#canvasdiv{
width: 600
height: 600}
&script src="js/three.min.js"&&/script&&/head&&body&
&div id="canvasdiv"&
&/div&&script type="text/javascript" &var container,camera,scene,renderer,var init = function () {
container = document.getElementById('canvasdiv')
scene = new THREE.Scene();
var width = canvasdiv.clientW
var height = canvasdiv.clientH
camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );
camera.position.set( 0,0,10 )
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
canvasdiv.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 2,1,1 );
var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );
var cube = new THREE.Mesh( geometry, material );
//scene.add( cube );
var geometry = new THREE.SphereGeometry( 0.5,100,100 );
var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } );
var ball = new THREE.Mesh( geometry,material );
ball.position.set( 0,0,1 );
//scene.add(ball);
myobj = new THREE.Object3D();
myobj.add( cube );
myobj.add( ball );
scene.add( myobj );
}var render = function () {
requestAnimationFrame( render );
myobj.rotation.x+=0.01;
myobj.rotation.y+=0.01;
renderer.render(scene,camera);}init()render()&/script&&/body&&/html&接着让我们对动画进行控制。在我实现的项目中，是通过websocket连接后台传入参数来控制对象运动的，这里就介绍一下使用参数控制吧。这里有一个问题，就是requestAnimationFrame回调的函数不能带有参数，否则会出现奇怪的bug。所以我选择用一个全局对象来进行控制。var control={s:0,p:0,q:0,j:0,}这里s是运动的速度，p,q,j分别是myobj将要运动到的位置的x,y,z坐标。我们先写一个控制它在x轴上运动的函数：var run = function () {
if ( myobj.position.x&control.p ) {
myobj.position.x += control.s;
requestAnimationFrame( run );
renderer.render( scene,camera )
if ( myobj.position.x&control.p ) {
myobj.position.x -= control.s;
requestAnimationFrame( run );
renderer.render( scene,camera )
};} 再在render函数中添加对run的调用requestAnimationFrame( run )。这样就可以在命令行中改变对象control的值实现控制myobj的运动。但是在运动停止后我的浏览器为什么会变得很卡，而且运动速度回有变化。我还不知道原因。不知道有没有朋友和我有同样的问题。于是我把函数拆成了两个，这样浏览器性能好些。var run = function () {
if ( myobj.position.x&control.p ) {
myobj.position.x += control.s;
requestAnimationFrame( run );
renderer.render( scene,camera )}var runx = function () {
if ( myobj.position.x&control.p ) {
myobj.position.x -= control.s;
requestAnimationFrame( runx );
renderer.render( scene,camera )
} 同样的，也可以写出在y,z轴上运动的函数。在x轴上运动的完整代码：&!DOCTYPE html&&html&&head&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&#canvasdiv{
width: 600
height: 600}
&script src="js/three.min.js"&&/script&&/head&&body&
&div id="canvasdiv"&
&/div&&script type="text/javascript" &var container,camera,scene,renderer,var init = function () {
container = document.getElementById('canvasdiv')
scene = new THREE.Scene();
var width = canvasdiv.clientW
var height = canvasdiv.clientH
camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );
camera.position.set( 0,0,10 )
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
canvasdiv.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 2,1,1 );
var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );
var cube = new THREE.Mesh( geometry, material );
//scene.add( cube );
var geometry = new THREE.SphereGeometry( 0.5,100,100 );
var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } );
var ball = new THREE.Mesh( geometry,material );
ball.position.set( 0,0,1 );
//scene.add(ball);
myobj = new THREE.Object3D();
myobj.add( cube );
myobj.add( ball );
scene.add( myobj );
}var control={
j:0,}var run = function () {
if ( myobj.position.x&control.p ) {
myobj.position.x += control.s;
requestAnimationFrame( run );
renderer.render( scene,camera )}var runx = function () {
if ( myobj.position.x&control.p ) {
myobj.position.x -= control.s;
requestAnimationFrame( runx );
renderer.render( scene,camera )
}var render = function () {
requestAnimationFrame( run );
requestAnimationFrame( runx );
renderer.render(scene,camera);}init()render()&/script&&/body&&/html&
到此，我们的入门教程就收工了。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索对象
threejs webgl、threejs入门指南、threejs 入门、webgl入门指南、webgl入门指南pdf，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
40+云计算产品，6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
云服务器9.9元/月，大学必备
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！