Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yma16
threejs
提交
df07573b
T
threejs
项目概览
yma16
/
threejs
通知
7
Star
5
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
分析
仓库
DevOps
项目成员
Pages
T
threejs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Pages
分析
分析
仓库分析
DevOps
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
提交
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
df07573b
编写于
10月 12, 2020
作者:
yma16
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
上传新文件
上级
c83bb318
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
91 addition
and
0 deletion
+91
-0
loadmodel_views/views/sample01/0.加载obj文件.html
loadmodel_views/views/sample01/0.加载obj文件.html
+91
-0
未找到文件。
loadmodel_views/views/sample01/0.加载obj文件.html
0 → 100644
浏览文件 @
df07573b
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title></title>
01:Three.js经典应用-360度物品展示01
</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>
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var
scene
=
new
THREE
.
Scene
();
/**
* OBJ文件加载 只加载obj文件中的几何信息,不加载材质文件.mtl
*/
var
loader
=
new
THREE
.
OBJLoader
();
loader
.
load
(
'
./model.obj
'
,
function
(
obj
)
{
// 控制台查看返回结构:包含一个网格模型Mesh的组Group
console
.
log
(
obj
);
//加载纹理贴图
var
texture
=
new
THREE
.
TextureLoader
().
load
(
'
texture1.png
'
);
// 基础Basic网格材质,不受光照影响 Phong网格材质受光照影响
obj
.
children
[
0
].
material
=
new
THREE
.
MeshBasicMaterial
({
//obj.children[0].material= new THREE.MeshPhongMaterial({
map
:
texture
//设置颜色纹理贴图
})
scene
.
add
(
obj
);
obj
.
children
[
0
].
scale
.
set
(
5
,
5
,
5
);
//网格模型缩放
})
/**
* 光源设置
*/
//点光源
var
point
=
new
THREE
.
PointLight
(
0xffffff
);
point
.
position
.
set
(
400
,
200
,
300
);
//点光源位置
scene
.
add
(
point
);
//点光源添加到场景中
//环境光
var
ambient
=
new
THREE
.
AmbientLight
(
0xffffff
,
0.3
);
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录