为了优化资源使用,在渲染时默认只能看见一个面,要正反两个面的话,只需加入如下代码即可
g_viewInfo.performanceState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;
g_viewInfo.zOrderedState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;
以下是全部代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>primitive</title>
<script type="text/javascript" src="../o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.material')
o3djs.require('o3djs.io')
o3djs.require('o3djs.event')
o3djs.require('o3djs.arcball');
window.οnlοad=init;
window.onunload = uninit;
var g_o3d;
var g_client;
var g_pack;
var g_math;
var g_viewInfo;
var g_o3dElement;
var g_eyeposition = [3,4,14];
var g_finish = false;
var g_target;
var g_up;
var path;
var g_aball;
var g_thisRot;
var g_lastRot;
var g_dragging = false;
var g_o3dWidth = -1;
var g_o3dHeight = -1;
var temp;
var g_quaternions;
function init(){
o3djs.util.makeClients(clientStep2);
}
function clientStep2(clientElement){
initGlobals(clientElement);
initContext();
loadTexture()
/**
* 加入监听事件
*/
o3djs.event.addEventListener(g_o3dElement, 'mousedown', OnMouseDown);
o3djs.event.addEventListener(g_o3dElement, 'mousemove', OnMouseMove);
o3djs.event.addEventListener(g_o3dElement, 'mouseup', OnMouseUp);
o3djs.event.addEventListener(g_o3dElement, 'wheel', OnWheel);
g_finish = true; // for selenium testing.
}
function OnMouseDown(e){
g_lastRot = g_thisRot;
g_aball.click([e.x, e.y]);
g_dragging = true;
}
function OnMouseMove(e){
var rotationQuat = g_aball.drag([e.x, e.y]);
if (g_dragging) {
var rot_mat = g_quaternions.quaternionToRotation(rotationQuat);
g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat);
var m = g_client.root.localMatrix;
g_math.matrix4.setUpper3x3(m, g_thisRot);
g_client.root.localMatrix = m;
}
}
function OnMouseUp(e){
g_dragging = false;
}
/*
鼠标滚轮事件
*/
function OnWheel(e){
if (e.deltaY) {
g_eyeposition =
g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12,
g_eyeposition);
g_viewInfo.drawContext.view =
g_math.matrix4.lookAt(g_eyeposition,
g_target, // target
g_up);
}
}
/**
* 加载贴图
*/
function loadTexture(){
var path = window.location.href;
var index = path.lastIndexOf('/');
path = path.substring(0, index+1) + 'texture.png';
// alert(path)
// var g_sampler = g_pack.createObject('Sampler');
// g_sampler.addressModeU = g_o3d.Sampler.WRAP;
// g_sampler.addressModeV = g_o3d.Sampler.WRAP;
// g_sampler.minFilter = g_o3d.Sampler.ANISOTROPIC;
// g_sampler.maxAnisotropy = 4;
o3djs.io.loadTexture(g_pack,path,function(texture, exception){
if (exception) {
alert(exception);
} else {
temp = texture;
createShapes(temp);
}
})
};
/**
* 创建图形
* @param temp 传入图片
*/
function createShapes(temp){
var plane = o3djs.primitives.createPlane(
g_pack,
createMaterial(temp),
4, // Width.
4, // Depth.
1, // Horizontal subdivisions.
1); // Vertical subdivisions.
var transform = g_pack.createObject('Transform');
transform.addShape(plane);
transform.translate([0, 0, 0]);
transform.parent = g_client.root;
}
/**
* 创建材质
* @param temp
*/
function createMaterial(texture) {
var g_material= o3djs.material.createBasicMaterial(g_pack, g_viewInfo, texture);
g_material.getParam('emissive').value = [0, 0, 0, 1]; //发射光(本身的颜色)
g_material.getParam('ambient').value = g_math.mulScalarVector(0.5, [1,1,1,1]); //环境光
g_material.getParam('specular').value = g_math.mulScalarVector(1, [1,1,1,1]); //镜面光
g_material.getParam('shininess').value = 50; //光泽度(默认=50)
g_material.getParam('specularFactor').value = 0.3; //镜面系数(默认=1)
g_material.getParam('lightColor').value = [1, 1, 1, 1]; //光源颜色?
return g_material;
}
/**
* 初始化全局变量
* @param clientElements
*/
function initGlobals(clientElements){
g_o3dElement = clientElements[0];
window.g_client = g_client = g_o3dElement.client;
g_o3d = g_o3dElement.o3d;
g_math = o3djs.math;
g_pack = g_client.createPack();
g_quaternions = o3djs.quaternions;
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot
);
}
/**
* 初始化上下文
*/
function initContext(){
g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30),
g_o3dElement.clientWidth / g_o3dElement.clientHeight, // Aspect ratio.
1, // Near plane.
5000); // Far plane.
g_target = [0, 0, 0];
g_up = [0, 0, -1];
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
g_eyeposition, // eye
g_target, // target
g_up); // up
//去掉这两句 就可以 正反两个面都看见
// g_viewInfo.performanceState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;
// g_viewInfo.zOrderedState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;
g_lastRot = g_math.matrix4.identity();
g_thisRot = g_math.matrix4.identity();
g_aball = o3djs.arcball.create(100, 100);
}
function updateProjection() {
// Create a perspective projection matrix.
g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(45), g_o3dWidth / g_o3dHeight, 0.1,
5000);
}
/**
* 设置客户端大小
*/
function setClientSize() {
var newWidth = parseInt(g_client.width);
var newHeight = parseInt(g_client.height);
if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) {
g_o3dWidth = newWidth;
g_o3dHeight = newHeight;
updateProjection();
g_aball.setAreaSize(g_o3dWidth, g_o3dHeight);
}
}
function updateCamera() {
var up = [0, 1, 0];
g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_eyeposition,
g_target,
g_up);
//g_lightPosParam.value = g_eyeposition;
}
/**
* 回收资源
*/
function uninit(){
if(g_client){
g_client.cleanup();
}
}
</script>
</head>
<body>
<!-- Start of O3D plugin -->
<div id="o3d" style="width: 600px; height: 600px;"></div>
<!-- End of O3D plugin -->
</body>
</html>