本文主要介绍了three.js 入门案例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
最近公司需要用tree.js实现一个3d图的显示，就看了官方文档，正好有时间，就记录下来。
由于我们公司的前端框架用的是angular，所以我就把我的treejs封装在一个directives里面。后面放源码
首先我们要知道three.js的下载地址它的地址是： https://github.com/mrdoob/three.js。
其次，什么是three.js？
three.js的几个步骤：
1：引入three.js文件（打开调试窗口，并在console下输入 three.revision命令，得到版本号，成功）
2：设置一个场景// var scene = new three. scene();
3： var camera = new three. perspectivecamera( 75, window.innerwidth /window.innerheight, 0.1, 1000)；设置一个 透视相机
4： var renderer = new three. webglrenderer(); renderer. setsize(window.innerwidth, window.innerheight); 设置一个渲染器
5：把一个物体添加到场景中
modelurl是所添加文件例如：$scope. dview = cy3dview. newcanvas ; $scope. dview. config( 'canvas')
$scope.process3durl = data.result.data.engineering_stl_mcube; $scope.dview.plan($scope.process3durl)
function plan(modelurl) {
stlloader = new three.stlloader();
group = new three.object3d();
stlloader.load(modelurl, function (geometry) {
//console.log(geometry);
var mat = new three.meshlambertmaterial({color: 0x7777ff});
group = new three.mesh(geometry, mat);
group.rotation.x = -0.5 * math.pi;
group.scale.set(0.6, 0.6, 0.6);
scene.add(group); animation();
}); }
6：渲染
renderer.render(scene, camera);
ok 是不是很简单，个人认为是这样，没有看懂的小伙伴可以私信我哦
源码如下：
(function(window, document) {
'use strict';
var three = window.three;
var angular = window.angular;
angular.module('cy-3d-view', []).factory('cy3dview', cy3dview);
cy3dview.$inject = ['$rootscope'];
function cy3dview($rootscope) {
return {
newcanvas: new object(newcanvas($rootscope))
};
}
function newcanvas() {
var scene, camera, renderer, controls, group, ambient, fov, near, far, stlloader;
var width, height, keylight, filllight, backlight, spotlight, lighting;
function config() {
//设置3d图的宽和高
width = document.getelementbyid('canvas').clientwidth;
height = document.getelementbyid('canvas').clientheight;
renderer = new three.webglrenderer({
antialias: true
});
renderer.setsize(width, height);
renderer.shadowmapenabled = true;
document.getelementbyid('canvas').appendchild(renderer.domelement);
renderer.setclearcolor(0xffffff, 1.0);
scene = new three.scene();
lighting = false; //设置3d图的颜色
ambient = new three.ambientlight(0xffffff, 1.0);
scene.add(ambient);
keylight = new three.directionallight(new three.color('hsl(30, 100%, 75%)'), 1.0);
keylight.position.set( - 100, 0, 100);
filllight = new three.directionallight(new three.color('hsl(240, 100%, 75%)'), 0.75);
filllight.position.set(100, 0, 100);
backlight = new three.directionallight(0xffffff, 1.0);
backlight.position.set(100, 0, -100).normalize();
spotlight = new three.spotlight(0xffffff);
spotlight.position.set(150, 150, 150);
scene.add(spotlight); //照相机配置
fov = 40;
near = 1;
far = 1000;
camera = new three.perspectivecamera(fov, width / height, near, far);
camera.position.x = 150;
camera.position.y = 150;
camera.position.z = 150;
camera.lookat({
x: 0,
y: 0,
z: 0
});
camera.lookat(new three.vector3(0, 40, 0));
controls = new three.orbitcontrols(camera, renderer.domelement);
controls.enabledamping = true;
controls.dampingfactor = 0.25;
controls.enablezoom = false;
window.addeventlistener('resize', onwindowresize, false);
window.addeventlistener('keydown', onkeyboardevent, false);
window.addeventlistener('mousewheel', mousewheel, false);
}
function mousewheel(e) {
e.preventdefault();
if (e.wheeldelta) { //判断浏览器ie，谷歌滑轮事件
if (e.wheeldelta > 0) { //当滑轮向上滚动时
fov -= (near < fov ? 1 : 0);
}
if (e.wheeldelta < 0) {
//当滑轮向下滚动时
fov += (fov < far ? 1 : 0);
}
} else if (e.detail) {
//firefox滑轮事件
if (e.detail > 0) {
//当滑轮向上滚动时
fov -= 1;
}
if (e.detail < 0) {
//当滑轮向下滚动时
fov += 1;
}
}
camera.fov = fov;
camera.updateprojectionmatrix();
renderer.render(scene, camera);
}
function onwindowresize() {
camera.aspect = width / height;
camera.updateprojectionmatrix();
renderer.setsize(width, height);
}
function onkeyboardevent(e) {
if (e.code === 'keyl') {
lighting = !lighting;
if (lighting) {
ambient.intensity = 0.25;
scene.add(keylight);
scene.add(filllight);
scene.add(backlight);
} else {
ambient.intensity = 1.0;
scene.remove(keylight);
scene.remove(filllight);
scene.remove(backlight);
}
}
}
function plan(modelurl) {
stlloader = new three.stlloader();
group = new three.object3d();
stlloader.load(modelurl,
function(geometry) {
//console.log(geometry);
var mat = new three.meshlambertmaterial({
color: 0x7777ff
});
group = new three.mesh(geometry, mat);
group.rotation.x = -0.5 * math.pi;
group.scale.set(0.6, 0.6, 0.6);
scene.add(group);
animation();
});
}
function animation() {
renderer.render(scene, camera);
requestanimationframe(animation);
}
return {
config: config,
plan: plan,
};
}
})(window, document);
相关推荐：
three.js基础入门学习教程
three.js创建场景实例详解
three.js如何本地运行详解
以上就是three.js 入门实例教程的详细内容。