我是three.js的新手,所以我需要一些帮助。
init();
animate();
function init()
{
container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0xc2c2c2, 1.0);
renderer.clear();
renderer.setSize( container.clientWidth, container.clientHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, container.clientWidth / container.clientHeight,0.001, 10000 );
camera.position.z = 5000;
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.minDistance = 0.001;
controls.maxDistance = 10000;
controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]
pointLight = new THREE.PointLight( 0xffffff ,5,10000);
pointLight.position.set(0,400,-500);
scene.add(pointLight);
relief(classes[0].value);
load_model(classes[0].models[2].name);
container.appendChild( renderer.domElement );
}
function animate()
{
requestAnimationFrame( animate );
render();
}
function render()
{
controls.update();
renderer.render( scene, camera );
}
//加载区域
function relief( vertices )
{
var geometry = new THREE.Geometry();
var array = vertices;
for(var i=0 ; i <array.length; i += 3)
{
geometry.vertices.push (new THREE.Vector3 (array[i],array[i+1],array[i+2]));
}
var h_php = 409 ;
var w = 409 ;
var h = h_php;
for(i = 0;i < (geometry.vertices.length-1)/2 ;i++)
{
if(i != h_php)
{
geometry.faces.push(new THREE.Face4(i*2,i*2+1,i*2+3,i*2+2));
}
else
{
h_php += h+1;
}
}
for(var j=0 ; j < w;j++)
{
for(i=h; i > 0; i--)
{
geometry.faceVertexUvs[0].push([ new THREE.UV( j/w, (i)/h ),
new THREE.UV((j+1)/w, (i)/h ),
new THREE.UV((j+1)/w, (i-1)/h ),
new THREE.UV( j/w, (i-1)/h ), ]);
}
}
geometry.computeFaceNormals();
geometry.computeCentroids()
var texture = THREE.ImageUtils.loadTexture('t.jpg');
texture.needsUpdate = true;
var mat = new THREE.MeshPhongMaterial( { map:texture, side: THREE.DoubleSide,} );
mat.transparent = false;
mesh = new THREE.Mesh( geometry ,mat );
mesh.dynamic = true;
mesh.rotation.x = -Math.PI/2;
mesh.castShadow = true;
mesh.receiveShadow = false;
scene.add(mesh);
}
function load_model( name )
{
loader = new THREE.ColladaLoader();
loader.load( name, function ( collada ) {
model = collada.scene;
model.scale.set(10,10,10);
model.position.set(1000,150,700);
model.rotation.x = -Math.PI/2;
scene.add(model);
} );
}
function Rel_vec(name,value)
{
this .name = name;
this .value = value;
this .models = [];
}
function child_vec(name,value)
{
this .name = name;
this .value = value;
}
classes [0] .value ---它是面积(约350K顶点)
classes [0] .models [2] .name ---它是collada模型的链接,
three.js中是否有任何工具可以进行双重缓冲? 如何避免闪烁?
这是截图。浏览器Chrome v 22.0.1229.79 m