webgl是大部分浏览器直接支持的一种3D绘图标准。three.js在它的基础上进行了进一步的封装和简化开发开发过程。
three.js主要三个对象，一个行为
三个对象主要是场景(模型和灯光)，相机(观察场景的视角)，渲染器(场景渲染输出的目标)，行为就是渲染。
three.js完整运行流程：
111077-20170424125001006-1547749106.png
本文中所需要的js全部都可以在官网例子中找到https://github.com/mrdoob/three.js/archive/master.zip1.场景(Scene)场景有两个参数 1参是模型，2参是灯光
模型模型有两个参数 1参是几何模型，2参是材质
//网格模型 两个参数 1 几何模型 2材质var geometry = new THREE.BoxGeometry(100,100,100); //几何模型var material = new THREE.MeshLambertMaterial({color:0xff0000}); //材质var mesh = new THREE.Mesh(geometry,material);
scene.add(mesh); //网格添加到场景当中这里的模型可以添加多个！
灯光var light = new THREE.DirectionalLight(0xffffff); // light.position.set(30,500,800); //设置光源位置 light.castShadow = true; light.position.set( 300, 200, 800 ); light.decay = 2; light.penumbra = 0.2; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; scene.add(light); //光源添加到场景之中2.相机(Camera)
//相机对象 透视相机 var camera = new THREE.PerspectiveCamera(40,800/600,1,2000); camera.position.set(200,200,200) //设置相机的位置 camera.lookAt(scene.position); //相机朝向中心3.渲染器(Renderer)
//设置渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(800,600); //设置渲染器的大小4.将渲染器添加到文档之中
//渲染器添加到文档之中 document.body.appendChild(renderer.domElement); renderer.render(scene,camera); //渲染2个参数 1渲染的场景对象 2渲染的相机
这个我们就可以看到一个简单three的项目啦。
不过这个项目，它没有监听一些事件，比如说鼠标滚轮事件，拖动事件，three为我们提供了好多控制器(Controls)，我们只用引用这个控制器，并且调用它， 就OK啦
function render(){
renderer.render(scene,camera);
} //相机控制是场景交互和动画的基础
var controls = new THREE.OrbitControls(camera); //创建相机控制 2个参数 1是我们的相机 2可以忽略默认是文档
controls.addEventListener('change',render);加上这些就可以监听事件啦。
5.添加3D模型这里的3d文件指的是obj文件，就是一个人或者一个车子，一个房子，我们首先要引入一个加载器
//添加obj模型
var loader = new THREE.OBJLoader();
loader.load('img/man.obj',function(dogObject){
dogObject.scale.set(40,40,40); //缩放
dogObject.position.y = 50;
dogObject.position.y = -30;
// dogObject.rotateX(110);
dogObject.rotateY(120);
scene.add(dogObject);
renderer.render(scene,camera);
})这样就把一个简单的3D模型放到浏览器中啦，当然你也可以添加多个3D模型。还有一点要注意的是加载文件是一个异步的行为，所以加载完之后一定要重新再渲染一次。或许你添加完之后，发现这个3D模型是没有材质的，材质可以看做皮肤，这个模型表面是什么都没有的。那继续往下看
6.添加材质首先说下问题，添加一个obj的材质之前使用的是OBJMTLLoader.js，但是71以上的three版本，已经移除了这个组件，找啦好久找了一个新的解决方法，引入OBJLoader.js MTLLoader.js DDSLoader.js这3个js
var onProgress = function ( xhr ) { if ( xhr.lengthComputable ) { var percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
}; var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /.dds$/i, new THREE.DDSLoader() ); var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( './img/' ); //设置我们需要加载的mtl文件路径
mtlLoader.load( 'man.mtl', function( material ) { //这里加载我们需要的文件名
material.preload(); var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( material ); //材质，也可自定义
objLoader.setPath( './img/' ); //设置要加载的obj文件的路径
objLoader.load( 'man.obj', function ( object ) { //加载obj文件
object.position.z = 1; //这里设置我们的素材相对于原来的大小以及旋转缩放等
object.position.y = -0.5;
object.scale.x = 300;
object.scale.y = 300;
object.scale.z = 300;
object.rotation.x = 4.5;
object1 = object; //这里是对素材设置阴影的操作
for(var k in object.children){ //由于我们的素材并不是看上去的一个整体，所以需要进行迭代
//对其中的所有孩子都设置接收阴影以及投射阴影
//才能看到阴影效果
object.children[k].castShadow = true; //设置该对象可以产生阴影
object.children[k].receiveShadow = true; //设置该对象可以接收阴影
}
scene.add( object1 );
renderer.render(scene,camera);
}, onProgress, onError );
});然后只要调整路径和文件名称就OK啦。
7.添加天空盒什么是天空盒，给一张图吧,会给人身临其境的效果，感觉身处在这个3维空间里
20170802095554275.jpg
//天空盒
var path = 'img/'; var format = '.png'; var urls = [
path + 'px' + format,path + 'nx' + format,
path + 'py' + format,path + 'ny' + format,
path + 'pz' + format,path + 'nz' + format,
] var textureCube = THREE.ImageUtils.loadTextureCube(urls); var meterial = new THREE.MeshBasicMaterial({ color:0xffffff, envMap:textureCube
})
var shader = THREE.ShaderLib['cube'];
shader.uniforms['tCube'].value = textureCube;
var material = new THREE.ShaderMaterial({ fragmentShader:shader.fragmentShader, vertexShader:shader.vertexShader, uniforms:shader.uniforms, depthWrite:false, side:THREE.BackSide
}),
mesh = new THREE.Mesh(new THREE.BoxGeometry(1000,1000,1000),material);
scene.add(mesh);加入这些就OK啦。这些东西蛮好理解的， 就不一一作解释啦。最后给大家丢个全部代码吧！
8.事件three的事件，因为它是个canvas，不像svg可以拿到元素，three的事件只能拿坐标去判断你点击的是什么模型，当然这个three是有组件去判断的
var objects=[]; var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个object
document.addEventListener("mousedown", (event) => {
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
scene.children.forEach(child => {
if (child instanceof THREE.Mesh) {//根据需求判断哪些加入objects,也可以在生成object的时候push进objects
objects.push(child)
}
}) var intersects = raycaster.intersectObjects(objects); if (intersects.length > 0) { console.log(intersects[0]) try{ if(ifCubeIdArr.indexOf(intersects[0].object.uuid) != -1){ if(intersects[ 0 ].object.material.color.b == 1 && intersects[ 0 ].object.material.color.g == 1 && intersects[ 0 ].object.material.color.r == 1){
intersects[ 0 ].object.material.color.set( 0xff0000);
}else{
intersects[ 0 ].object.material.color.set( 0xffffff);
}
renderer.render(scene,camera);
}
objects = [];
}catch(e){
objects = [];
}
}
}, false)它有一个很严重的问题，困扰了我一段时间，就是我只想给一个模型添加事件，而不是给所有的模型都添加事件，官网看了一段时间，没有找到好的解决方法。后来自己写js解决这个问题，思路：在创建这个模型的时候会有一个uuid，保存这个uuid，放在一个数组。并且在点击事件的时候，去检索这个数组。9.添加文字 var fontLoader = new THREE.FontLoader(); //导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
fontLoader.load('js/optimer_regular.typeface.json',function(font){ for(let q = 0; q
body{ margin: 0; overflow: hidden;
} #percent { position: absolute; width: 200px; height: 20px; color: red; text-align: center;
}
作者：会飞的猪l
链接：https://www.jianshu.com/p/070baa80ca02
