three.js 运行3D模型
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: 80%;
cursor: pointer;
position: relative;
/*background-image:url(img/bg.png);*/
}
.box{
height: 20%;
background: #EDEDED;
display: flex;
}
.box div{
width: 50%;
height: 100%;
}
.box>.left>p{
margin:15px auto;
}
.box>.left{
border-right:1px solid #4D4D4D;
}
.box>.left>input{
display:block;margin:15px auto;
}
</style>
// 运行模型所需要的第三方 js 文件
<script src="js/threejs/three.js"></script>
<script src="js/threejs/Detector.js"></script>
<script src="js/threejs/stats.min.js"></script>
<script src="js/threejs/ColladaLoader.js"></script><!--3D模型加载器-->
<script src="js/threejs/DDSLoader.js"></script>
<script src="js/threejs/OrbitControls.js"></script>
<script src="js/threejs/VTKloader.js"></script>
<script src="js/threejs/TrackballControls.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body style="height: 100%;">
// 初始化 canvas
<div id="canvas_view">
<div id="text_title" style="position: absolute;width:100%;height:20px;margin-top:200px;text-align: center;">请上传模型</div>
</div>
<div class="box">
<div class="left">
<p> 上传模型:</p>
<div class="model_box" style="width:90%;padding: 10px 20px;height: auto;">
<button class="model" style="display: none;"></button>
</div>
</div>
<div class="right" style="overflow: scroll">
<div class="bg_color_box" style="width: 100%;height:50px;background:lightcoral;display: flex;">
<div style="text-align: center;line-height: 50px;">设置背景颜色：</div>
<div style="line-height: 50px;text-align: left;">
<input type="color" class="bg_color" value="#c0c0c0">
</div>
</div>
<!--循环-->
<div class="show_element" style="width: 100%;display: none;">
<div style="border-bottom: 2px solid #ccc;width: 100%;height: 86px;display: flex;">
<div class="model_text" style="width: 100px;text-align: center;line-height: 86px;"></div>
<div id="model_text2" style="flex: 1">
<div style="width: 100%;height:45px;">
<div style="width: 100%;height:auto;padding:10px 0;display: flex;">
<span> 设置颜色： </span>
<input type="color" class="color" value="#400000" style="display: block;margin:0;">
</div>
</div>
<div style="width: 100%;height: 45px;">
<div style="width: 100%;height:auto;padding:10px 0;display: flex;">
<span> 设置透明度： </span>
<input type="range" class="range" value="80" style="background: red;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//加载模型 构造函数的方法
<script src="resources/model.js"></script>
//初始化 调用 函数
<script src="resources/controller.js"></script>
</body>
</html>
model.js 实例指向的原型方法
/**
* -------------- on 2018/8/7.
*/ function init() {
//创建渲染器
width = document.getElementById("canvas_view").width=document.documentElement.clientWidth;
height = document.getElementById("canvas_view").height=document.documentElement.clientHeight*0.8;
renderer = new THREE.WebGLRenderer({
antialias : true//抗锯齿属性
});
renderer.setPixelRatio( window.devicePixelRatio );
//设置渲染器宽高
renderer.setSize(width, height);
//add到页面中
document.getElementById('canvas_view').appendChild(renderer.domElement);
//设置渲染器背景颜色和透明度
renderer.setClearColor('#c0c0c0', 1); //更改背景颜色=============================
$(".bg_color_box .bg_color").change(function () {
var color = this.value;
renderer.setClearColor(color, 1);
}); //创建相机
camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 2000);
//定义相机的位置
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({
x : 0,
y : 0,
z : 0
});
//控制器
controls = new THREE.TrackballControls( camera ,renderer.domElement );
this.screen.left = 0;
this.screen.top = 0;
this.screen.width = document.documentElement.clientWidth;
this.screen.height = document.documentElement.clientHeight*0.8; //创建场景
scene = new THREE.Scene();
scene.add( camera );
//添加三维辅助线
var axisHelper = new THREE.AxisHelper(500);
scene.add(axisHelper);
} //创建光源，AmbientLight，
function light_fn() {
//环境光
light = new THREE.AmbientLight(0xFF0000);
//定义光源位置
light.position.set(100, 100, 200);
//添加到场景
scene.add(light); //方向光
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
} //创建实物
function initObject() {
//统一文件路径
var str = "../model/",
//后缀名
suffix = ".vtk",
//表示加载每个文件的按钮【tumors：非文件名，仅仅代表按钮，很多小肿瘤的按钮集合】
arr_link = ["liver-1","couinaud-1","couinaud-2","couinaud-3","couinaud-4", "couinaud-5",
"couinaud-6","couinaud-7","couinaud-8","tumor-3","tumors"], //肿瘤文件名
tumors = ["tumor-1","tumor-2","tumor-4","tumor-5","tumor-6",
"tumor-7","tumor-8","tumor-9","tumor-10","tumor-11"]; //克隆按钮
for(var a in arr_link){
$(".left div .model").css("display","inline");
if(a>="1"){$(".left div .model:eq(0)").clone(true).appendTo('.model_box')}
$(".left div .model:eq(-1)").text(arr_link[a]);
} var model_arr = [];
var idx;
var url;
var urls;
$(".model").click(function () {
idx = model_arr.indexOf($(this).index());
if(idx<0){
model_arr.push($(this).index());
if(arr_link[$(this).index()] == "tumors"){
for(var d in tumors){
urls = str + tumors[d] + suffix;
loader_model(urls,$(this).index(),d);//加载单个模型
}
arr_fn($(this).index(),model_arr);//加一个设置盘
}else{
url = str + arr_link[$(this).index()] + suffix;//拼接字符串
loader_model(url,$(this).index());//加载单个模型
arr_fn($(this).index(),model_arr);//加一个设置盘
}
}else{alert("不可重复上传");}
});
//克隆节点
function arr_fn(idx,arr) {
var text_title = document.getElementById("text_title");
if(text_title) text_title.parentNode.removeChild(text_title);//删除"请上传模型"文本;
//true 深度克隆事件
$(".show_element").css("display","inline");
if(arr.length>1){$(".show_element:eq(0)").clone(true).appendTo('.right');}
var text = $(".left div .model:eq("+idx+")").text();
$(".show_element:eq(-1) .model_text").text(text);//给text赋值【eq(-1)获取最后一个元素】
$(".show_element:eq(-1) .color").val("#400000");//初始化颜色
$(".show_element:eq(-1) .range").val("80");//初始化透明度
} //颜色设置
$(".show_element .color").change(function () {
var str = "请先上传模型";
var idx;
var model_idx = $(this).parents("#model_text2").siblings(".model_text").html();
for(var b in arr_link){
if(model_idx==arr_link[b]){
idx=b;
}
}
if(arr_link[Number(idx)] == "tumors"){
for(var e in tumors){
var num_t = Number(e)+1;
var vars_name_t = "tumor"+num_t;
if(eval(vars_name_t)){eval(vars_name_t).color.set( this.value );}else{alert(str)}
}
}else{
var num = Number(idx)+1;
var vars_name = "material"+num;
if(eval(vars_name)){eval(vars_name).color.set( this.value );}else{alert(str)}
}
}); //透明度设置
$(".show_element .range").change(function () {
var range = Number($(this).val())/100;
var str = "请先上传模型";
var idx;
var model_idx = $(this).parents("#model_text2").siblings(".model_text").html();
for(var c in arr_link){
if(model_idx==arr_link[c]){
idx=c;
}
}
if(arr_link[Number(idx)] == "tumors"){
for(var e in tumors){
var num_t = Number(e)+1;
var vars_name_t = "tumor"+num_t;
if(eval(vars_name_t)){eval(vars_name_t).opacity = range;}else{alert(str)}
}
}else{
var num = Number(idx)+1;
var vars_name = "material"+num;
if(eval(vars_name)){eval(vars_name).opacity = range;}else{alert(str)}
}
}); //加载模型函数
function loader_model(url,idx,tumors_idx) {
var loader = new THREE.VTKLoader();
loader.load( url, function ( geometry ) {
geometry.computeVertexNormals();
var mesh;
var material = new THREE.MeshPhongMaterial( {
color: "#400000",//模型颜色
opacity: 0.8,//模型透明度
depthWrite: false,
transparent: true,
polygonOffset: true,
polygonOffsetFactor: 1, // positive value pushes polygon further away
polygonOffsetUnits: 1
} ); if(tumors_idx){
//变量拼接
// var num_t = Number(tumors_idx)+1;
// var vars_name_t = "tumor"+num_t;
// var vars_name1_t = eval(vars_name_t);
// eval(vars_name_t) = material;mesh = new THREE.Mesh( geometry, vars_name1_t ); switch (Number(tumors_idx)+1){
case 1:tumor1=material;mesh = new THREE.Mesh( geometry, tumor1 );break;
case 2:tumor2=material;mesh = new THREE.Mesh( geometry, tumor2 );break;
case 3:tumor3=material;mesh = new THREE.Mesh( geometry, tumor3 );break;
case 4:tumor4=material;mesh = new THREE.Mesh( geometry, tumor4 );break;
case 5:tumor5=material;mesh = new THREE.Mesh( geometry, tumor5 );break;
case 6:tumor6=material;mesh = new THREE.Mesh( geometry, tumor6 );break;
case 7:tumor7=material;mesh = new THREE.Mesh( geometry, tumor7 );break;
case 8:tumor8=material;mesh = new THREE.Mesh( geometry, tumor8 );break;
case 9:tumor9=material;mesh = new THREE.Mesh( geometry, tumor9 );break;
case 10:tumor10=material;mesh = new THREE.Mesh( geometry, tumor10 );break;
}
}else{
//变量拼接
// var num = Number(idx)+1;
// var vars_name = "material"+num;
// var vars_name1 = eval(vars_name);
// eval(vars_name) = material;mesh = new THREE.Mesh( geometry, vars_name1 ); switch (Number(idx)+1){
case 1:material1=material;mesh = new THREE.Mesh( geometry, material1 );break;
case 2:material2=material;mesh = new THREE.Mesh( geometry, material2 );break;
case 3:material3=material;mesh = new THREE.Mesh( geometry, material3 );break;
case 4:material4=material;mesh = new THREE.Mesh( geometry, material4 );break;
case 5:material5=material;mesh = new THREE.Mesh( geometry, material5 );break;
case 6:material6=material;mesh = new THREE.Mesh( geometry, material6 );break;
case 7:material7=material;mesh = new THREE.Mesh( geometry, material7 );break;
case 8:material8=material;mesh = new THREE.Mesh( geometry, material8 );break;
case 9:material9=material;mesh = new THREE.Mesh( geometry, material9 );break;
case 10:material10=material;mesh = new THREE.Mesh( geometry, material10 );break;
case 11:material11=material;mesh = new THREE.Mesh( geometry, material11 );break;
}
}
mesh.position.set( -1, -1, -0.5 );
mesh.scale.multiplyScalar( 0.01 );
scene.add( mesh );
} );
//事件("事件名",事件处理函数,useCapture)
window.addEventListener( 'resize', onWindowResize, false );
} //点击事件的处理函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight*0.8;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight*0.8 );
controls.handleResize();
}
} //每帧都渲染一次场景与相机到渲染器中
function animation() {
renderer.render(scene, camera);
controls.update();
//循环执行animation函数
requestAnimationFrame(animation);
}
contorler.js 初始化函数
/**
* -------------- on 2018/8/7.
*/ //全局变量
var renderer,width,height,camera,scene,light,controls,stats,
//材质/变量【器官】
material1,material2,material3,material4,material5,material6,material7,material8,
material9,material10,material11,
//材质/变量【肿瘤】
tumor1,tumor2,tumor3,tumor4,tumor5,tumor6,tumor7,tumor8,tumor9,tumor10; if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
//初始化
init(); //创建光源
light_fn(); //创建实物
initObject(); //每帧渲染一次
animation();
如果错误，请指出。谢谢
three.js 运行3D模型的更多相关文章
- three.js实现3D模型展示
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能 ...
- 使用three.js创建3D机房模型-分享一
序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...
- vue.js+THREE.js演示服务端3D模型流程总结
three.js官网 ·场景搭建 使用npm或者其他获取安装three,就像npm i three,之后在需要演示模型的vue组件内import * as THREE from 'three',此时我 ...
- 从浏览器多进程到JS单线程，JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- 使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)
序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房 ...
- 使用webgl(three.js)创建3D机房(升级版)-普通机房
序: 目前市面上的数据中心主要分两大类,一类属于普通数据中心,机柜按照XY轴 有序排放,一类属于微模块集合的数据中心,多个机柜组合而成的微模块. 本节课主要详细讲解普通数据中心的可视化展示,浏览器直 ...
- 使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课
前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...
- ThreeJS 3d模型简介
本文主要是对Threejs中加载模型的支持种类进行简单的知识科普. 3ds (.3ds) 3ds是3ds max通用储存文件格式.使用的范围更宽,可被更多的软件识别使用. amf (.amf) AMF ...
随机推荐
- 51Nod 活动安排问题（排序+优先队列）
有若干个活动,第i个开始时间和结束时间是[Si,fi),同一个教室安排的活动之间不能交叠,求要安排所有活动,最少需要几个教室? Input 第一行一个正整数n (n <= 10000)代表活动的 ...
- 洛谷3857 [TJOI2008]彩灯
题目描述 已知一组彩灯是由一排N个独立的灯泡构成的,并且有M个开关控制它们.从数学的角度看,这一排彩灯的任何一个彩灯只有亮与不亮两个状态,所以共有2N个样式.由于技术上的问题,Peter设计的每个开关 ...
- Linux Shell脚本编程-函数
函数介绍 定义:把一段独立功能的的代码当做一个整体,并为之一个名字,命名的代码段,此即为函数: 功能:函数function是由若干条shell命令组成的语句块,实现代码重用和模块化编程. 注意: ...
- Object-C,遍历目录
最近武汉连续下雨很多天,降温了2次,温度一下子由28度到14度,再到8度,手太冷了. 加上最近发生了一些比较棘手的家庭琐事,最近没心情继续学习Object-C. 后来,我想明白了,心情不好的时候,还是 ...
- 【Codeforces Round #420 (Div. 2) B】Okabe and Banana Trees
[题目链接]:http://codeforces.com/contest/821/problem/B [题意] 当(x,y)这个坐标中,x和y都为整数的时候; 这个坐标上会有x+y根香蕉; 然后给你一 ...
- Android Studio更改项目SDK的版本
Elipse 中的安卓项目,在Android Studio中可以通过File -->new -- > Import Project的方法建立起来.但是有时候需要用到更改项目的API Lev ...
- 水池接雨水的经典问题I&II
https://leetcode.com/problems/trapping-rain-water https://leetcode.com/problems/trapping-rain-water- ...
- Android布局文件的载入过程分析:Activity.setContentView()源代码分析
大家都知道在Activity的onCreate()中调用Activity.setContent()方法能够载入布局文件以设置该Activity的显示界面.本文将从setContentView()的源代 ...
- LicManager系统对各license类型终端客户机器的监控
与catia软件相似.以下这些软件都是汽车project设计软件.对汽车工业的的研发设计有着不可替代的作用.但它们都有着不同于各自的优势与不足之处. 可是在LicManager许可监控系统下,它们都是 ...
- 深度拷贝java对象
有时,如,修改session中对象的时候,如果直接修改session中的对象,修改步骤比较多,一部分修改成功,另一部分不成功,这个时候程序报错,数据库会回滚,但是session已经修改一部分了. 这样 ...