这里为大家提供demo版的项目，我们跑的是VTK文件，最重要的原因是同样的模型VTK是最小的，当然其它文件格式也有对应的插件。
我们光以VTK来讲，跑VYK文件要用到的插件一共有下面四个。
threejs源码是从github上下载的，但是有时候github太慢，这里推荐用码云下载：
下载下来之后，在代码里面能找到以上的文件。
demo目录结构：
static 是插件目录，
index.html 是项目入口文件，
js 目录中的 model.js 文件就是我们的调用插件、调参数的代码啦~
index.html 文件代码：
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>model_load</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin:0;
padding:0;
}
#canvas_view {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
</style>
<script src="static/three.js"></script>
<script src="static/Detector.js"></script>
<script src="static/VTKloader.js"></script>
<script src="static/TrackballControls.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body style="height: 100%;">
<div id="canvas_view">
<div id="text_title" style="position: absolute;width:100%;height:20px;margin-top:200px;text-align: center;"></div>
</div>
</body>
<script src="js/model.js"></script>
</html>model.js 文件代码：
var renderer,width,height,camera,scene,light,controls,stats,
material_liver,material_tumor;
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
// 初始化渲染器，相机，控制器，三维辅助线
var init = function (){
//创建渲染器
width = document.getElementById("canvas_view").width = document.documentElement.clientWidth;
height = document.getElementById("canvas_view").height = document.documentElement.clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true//抗锯齿属性
});
renderer.setPixelRatio( window.devicePixelRatio );
//设置渲染器宽高
renderer.setSize(width, height);
//开启阴影支持
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//add到页面中
document.getElementById('canvas_view').appendChild(renderer.domElement);
//设置渲染器背景颜色和透明度
renderer.setClearColor(0xD8E1F0, 1);
//创建相机
camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 5000);
camera.position.set(0, 0, 250);
//定义相机的位置
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 3;
//设置相机的方向
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(0, 0, 0));
//控制器
controls = new THREE.TrackballControls( camera ,renderer.domElement );
controls.screen.left = 0;
controls.screen.top = 0;
controls.screen.width = document.documentElement.clientWidth;
controls.screen.height = document.documentElement.clientHeight;
// controls.rotateSpeed = 5.0;//按住鼠标左键后拖动查看时的旋转速度
// controls.zoomSpeed = 5;//用滚轮调整大小(远近)时候的速度
// controls.panSpeed = 2;//按住鼠标右键后的平移速度
// controls.noZoom = false;//如果设置为true, 则禁用 鼠标滚轮调整大小(远近)的功能
// controls.noPan = false;//如设置为true, 则禁用 按下鼠标右键平移的功能
// controls.staticMoving = true;//如果设置为false, 则移动速度贼鸡儿快,嗖的一下就不见了, 具体是干啥玩意的没摸清
// controls.dynamicDampingFactor = 0.3;//动态阻尼, 蛤? 我也不知道是啥,翻译过来就是
//创建场景
scene = new THREE.Scene();
scene.add( camera );
//添加三维辅助线
var axisHelper = new THREE.AxisHelper(500);scene.add(axisHelper);
light_fn();
};
//创建光源，AmbientLight，
var light_fn = function () {
//环境光
light = new THREE.AmbientLight(0xFF0000);
//定义光源位置
light.position.set(100, 100, 200);
//添加到场景
scene.add(light);
//方向光
var dirLight = new THREE.DirectionalLight( 0xffffff,1 );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
initObject();
};
//创建实物
var initObject = function() {
//加载模型函数
var loader_model = function (url,idx) {
var loader = new THREE.VTKLoader();
loader.load( url, function ( geometry ) {
geometry.computeVertexNormals();
var mesh;
var material = new THREE.MeshPhongMaterial( {
color: "#fb949d",//模型颜色
opacity: 0.6,//模型透明度
transparent: true,
side: THREE.BackSide,//FrontSid外侧，DoubleSide内外两测
depthTest: false
} );
var mal_material = new THREE.MeshPhongMaterial( {
color: "#e33233"
} );
if(idx == 0){
material_liver = material;
mesh = new THREE.Mesh( geometry, material_liver );
}else{
material_tumor = mal_material;
mesh = new THREE.Mesh( geometry, material_tumor );
}
mesh.position.set( -1.5, -1.5, -0.5 );
mesh.scale.multiplyScalar( 0.01 );
scene.add( mesh );
} );
//事件("事件名",事件处理函数,useCapture)
window.addEventListener( 'resize', onWindowResize, false );
};
//调整窗口大小
var onWindowResize = function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
};
loader_model("你的vtk文件地址，如：http://localhost/vtk/model-1.vtk",0);// 模型1
loader_model("你的vtk文件地址，如：http://localhost/vtk/model-2.vtk",1);// 模型2
...
animation();
};
//每帧都渲染一次场景与相机到渲染器中
var animation = function () {
renderer.render(scene, camera);
controls.update();
//循环执行animation函数
requestAnimationFrame(animation);
};
//初始化
init();运行 index.html：
实现起来是不是很简单？
threejs中提供了很多不同的材质， meshPhongMaterial 只是我用的其中一种，还有很多参数可以调，具体可以参考threejs官方网站。
小白入门可以通过 WebGL 中文网学习：WebGL中文网
完。
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
