Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yma16
threejs
提交
fe05176d
T
threejs
项目概览
yma16
/
threejs
通知
7
Star
5
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
分析
仓库
DevOps
项目成员
Pages
T
threejs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Pages
分析
分析
仓库分析
DevOps
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
提交
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
fe05176d
编写于
10月 12, 2020
作者:
yma16
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
上传新文件
上级
df07573b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
94 addition
and
0 deletion
+94
-0
loadmodel_views/views/sample01/1.加载obj和mtl文件.html
loadmodel_views/views/sample01/1.加载obj和mtl文件.html
+94
-0
未找到文件。
loadmodel_views/views/sample01/1.加载obj和mtl文件.html
0 → 100644
浏览文件 @
fe05176d
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>
02:Three.js经典应用-360度物品展示02
</title>
<style>
body
{
margin
:
0
;
overflow
:
hidden
;
/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script
src=
"../../js/three.js"
></script>
<!-- 引入threejs扩展控件OrbitControls.js -->
<script
src=
"../../js/controls/OrbitControls.js"
></script>
<!-- 引入obj模型加载库OBJLoader.js -->
<script
src=
"../../js/OBJLoader.js"
></script>
<!-- 引入obj模型材质加载库MTLLoader.js -->
<script
src=
"../../js/MTLLoader.js"
></script>
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var
scene
=
new
THREE
.
Scene
();
/**
* OBJ和材质文件mtl加载
*/
var
OBJLoader
=
new
THREE
.
OBJLoader
();
//obj加载器
var
MTLLoader
=
new
THREE
.
MTLLoader
();
//材质文件加载器
MTLLoader
.
load
(
'
./material.mtl
'
,
function
(
materials
)
{
// 返回一个包含材质的对象MaterialCreator
console
.
log
(
materials
);
//obj的模型会和MaterialCreator包含的材质对应起来
OBJLoader
.
setMaterials
(
materials
);
OBJLoader
.
load
(
'
./model.obj
'
,
function
(
obj
)
{
scene
.
add
(
obj
);
//返回的组对象插入场景中
obj
.
children
[
0
].
scale
.
set
(
5
,
5
,
5
);
//网格模型缩放
// 更换纹理贴图
var
texture
=
new
THREE
.
TextureLoader
().
load
(
'
texture3.png
'
);
obj
.
children
[
0
].
material
.
map
=
texture
})
})
/**
* 光源设置
*/
//点光源
var
point
=
new
THREE
.
PointLight
(
0xffffff
);
point
.
position
.
set
(
400
,
200
,
300
);
//点光源位置
// scene.add(point); //点光源添加到场景中
//环境光
var
ambient
=
new
THREE
.
AmbientLight
(
0xffffff
,
1
);
scene
.
add
(
ambient
);
/**
* 相机设置
*/
var
width
=
window
.
innerWidth
;
//窗口宽度
var
height
=
window
.
innerHeight
;
//窗口高度
var
k
=
width
/
height
;
//窗口宽高比
var
s
=
150
;
//三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
var
camera
=
new
THREE
.
OrthographicCamera
(
-
s
*
k
,
s
*
k
,
s
,
-
s
,
1
,
1000
);
camera
.
position
.
set
(
200
,
300
,
200
);
//设置相机位置
camera
.
lookAt
(
scene
.
position
);
//设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setSize
(
width
,
height
);
//设置渲染区域尺寸
renderer
.
setClearColor
(
0xb9d3ff
,
1
);
//设置背景颜色
document
.
body
.
appendChild
(
renderer
.
domElement
);
//body元素中插入canvas对象
// 渲染函数
function
render
()
{
renderer
.
render
(
scene
,
camera
);
//执行渲染操作
// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
requestAnimationFrame
(
render
);
//请求再次执行渲染函数render,渲染下一帧
}
render
();
//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化,改变相机对象的属性
var
controls
=
new
THREE
.
OrbitControls
(
camera
);
//监听鼠标事件,触发渲染函数,更新canvas画布渲染效果
controls
.
addEventListener
(
'
change
'
,
render
);
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录