最近项目需要折腾three.js，有关three.js几点说明
1.作用 threejs适合创建简单的模型视图
2.对于复杂的模型图（如：室内模型图）需要美术3D制作，前端导成特定格式文件(如*.mtl/*.obj 格式文件 )，
之后利用threejs插件MTLLoader.js/OBJLoader.js导入数据即可
基础案例 https://github.com/AragornZJF/ThreeExample.js Chapter7.3.2
或者游戏案例 http://www.w3cmark.com/2016/threejs-mark-02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>材质</title>
<style>
#canvas-frame {
width: 100%;
height: 600px;
}
</style>
</head>
<body onload="threeStart()">
<div id="canvas-frame" ></div>
</body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript"> var renderer, //渲染器
width = document.getElementById('canvas-frame').clientWidth, //画布宽
height = document.getElementById('canvas-frame').clientHeight; //画布高
//初始化渲染器
function initThree(){
renderer = new THREE.WebGLRenderer({
antialias : true
//canvas: document.getElementById('canvas-frame')
});
renderer.setSize(width, height);
renderer.setClearColor(0xFFFFFF, 1.0);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
//初始化场景
var scene;
function initScene(){
scene = new THREE.Scene();
}
var camera;
function initCamera() { //透视相机
camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
camera.position.x = 450;
camera.position.y = 100;
camera.position.z = 700;
camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;
camera.lookAt({ //相机的中心点
x : 0,
y : 0,
z : 0
});
} function initLight(){
// light--这里使用环境光
//var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
//light.position.set(600, 1000, 800);
var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
scene.add(light);
}
function initObject(){ //初始化对象
//导入材质
var texture = THREE.ImageUtils.loadTexture('img/floor.jpg', {}, function() {
renderer.render(scene, camera);
});
/**
* 关于material材料注意点说明
* MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
* MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
* MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
*/
var material = new THREE.MeshLambertMaterial({
map: texture
}); //创建一个立方体
var geometry = new THREE.BoxGeometry(600, 25, 1000);
//将material材料添加到几何体geometry
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function initGrid(){ //辅助网格
var helper = new THREE.GridHelper( 1000, 50 );
helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
}
function threeStart(){
//初始化渲染器
initThree();
//初始化场景
initScene();
//初始透视化相机
initCamera();
//初始化光源
initLight();
//模型对象
initObject();
//初始化网格辅助线
initGrid();
//渲染成像
renderer.render(scene, camera);
} </script>
</html>
效果图
作者：Avenstar
出处：http://www.cnblogs.com/zjf-1992/p/6130614.html
关于作者：专注于WEB前端开发、喜欢阅读
本文版权归作者所有,转载请标明原文链接。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！
支付宝
微信