level 3
请问我用blender导出了json模型文件,如何让它在浏览器中进行加载呢??
2015年12月21日 08点12分
1
level 1
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ShowJson</title>
</head>
<body>
<div id="Loading" style="color:#fff">Loading...</div>
<script src="~/Javascript/jquery-1.8.2.js"></script>
<script src="/JavaScript/three/build/three.js"></script>
<script src="~/JavaScript/three/src/loaders/JSONLoader.js"></script>
<script src="~/JavaScript/three/examples/js/controls/TrackballControls.js"></script>
<script>
$(document).ready(function () {
/* 场景 */
var WIDTH = document.documentElement.offsetWidth || 800,
HEIGHT = document.documentElement.clientHeight || 600;
var scene = new THREE.Scene();
/* 摄像头 */
var VIEW_ANGLE = 75,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(0, 0, 1000);
scene.add(camera);
/* 渲染器 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0x5A7995, 1.0);
document.body.appendChild(renderer.domElement);
/*控制物体*/
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.noZoom = false;
controls.staticMoving = true;
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
controls.noPan = false;
controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68];
controls.staticMoving = true;
/* 灯光 */
var light = new THREE.DirectionalLight(0xFFFFFF);
light.position.set(0, 0, 99).normalize();
scene.add(light);
/*材质*/
var material = new THREE.MeshPhongMaterial({
ambient: 0x552811,
specular: 0x333333,
shininess: 25,
bumpScale: 19,
metal: true,
transparent: true,
opacity: 0.1,
side:THREE.DoubleSide
});
/* 显示对象 */
var obj;
var loader = new THREE.JSONLoader(true);
loader.load("/JavaScript/Model.js", function (geometry)
{
console.log(geometry);
var loading = document.getElementById("Loading");
loading.parentNode.removeChild(loading);
obj = new THREE.Mesh(geometry, material);
obj.position.set(0, 1, 990);
scene.add(obj);
var start = new Date().getTime(), delta;
(function anime() {
delta = new Date().getTime() - start;
controls.update();
renderer.render(scene, camera);
return requestAnimationFrame(anime);
})();
});
/**加载**/
//A begin
var geometry = new THREE.PlaneGeometry(200, 400, 1, 1);
geometry.vertices[0].uv = new THREE.Vector2(0, 80);
geometry.vertices[1].uv = new THREE.Vector2(20, 80);
geometry.vertices[2].uv = new THREE.Vector2(20, 200);
geometry.vertices[3].uv = new THREE.Vector2(0, 200);
// A end
// B begin
// 纹理坐标怎么弄
var texture = THREE.ImageUtils.loadTexture("/JavaScript/qiang3.jpg", null, function (t) {
});
var material1 = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(geometry, material1);
scene.add(mesh);
// B end
})
</script>
</body>
</html>
2016年07月19日 03点07分
3