创建立方体的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - indexed instancing (single box), dynamic updates</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
a {color: #08f;}
</style>
</head>
<body>
<div id="container"></div>
<script src="js/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/controls/MapControls.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var container;
var camera, scene, renderer, mesh;
var offsetAttribute, orientationAttribute;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
controls = new THREE.MapControls( camera,container );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
var pointLight = new THREE.PointLight( 0xff4444, 1 );
pointLight.position.set(50, 60, 100);
pointLight.castShadow = true;
scene.add( pointLight );
// 立方体
var cubeGeometry = new THREE.Geometry();
// 立方体的顶点
var vertices = [
new THREE.Vector3(10, 10, 10), //v0
new THREE.Vector3(-10, 10, 10), //v1
new THREE.Vector3(-10, -10, 10), //v2
new THREE.Vector3(10, -10, 10), //v3
new THREE.Vector3(10, -10, -10), //v4
new THREE.Vector3(10, 10, -10), //v5
new THREE.Vector3(-10, 10, -10), //v6
new THREE.Vector3(-10, -10, -10) //v7
];
cubeGeometry.vertices = vertices; //设置立方体的各个坐标点
// 立方的面,各个面的排列顺序
// 一个Face是一个三角形,两个Face才形成一个正方形,参照BufferGeometry的例子
var faces=[
new THREE.Face3(0,1,2), // Face 1-1
new THREE.Face3(0,2,3), // Face 1-2
new THREE.Face3(0,3,4), // Face 2-1
new THREE.Face3(0,4,5), // Face 2-2
new THREE.Face3(1,6,7), // Face 3
new THREE.Face3(1,7,2),
new THREE.Face3(6,5,4), // Face 4
new THREE.Face3(6,4,7),
new THREE.Face3(5,6,1), // Face 5
new THREE.Face3(5,1,0),
new THREE.Face3(3,2,7), // Face 6
new THREE.Face3(3,7,4)
];
cubeGeometry.faces = faces;
cube = new THREE.Mesh(cubeGeometry,new THREE.MeshBasicMaterial( { color: 0xff0000 } ));
scene.add(cube);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event ) {
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机投影矩阵,必须在参数发生变化后调用。
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
各个顶点的表示
直接用BufferGeometry创建Face
尝试着用BufferGeometry创建cubeGeometry。
// var cubeGeometry = new THREE.Geometry();
var cubeGeometry = new THREE.BufferGeometry();
但是执行后报以下错误
问题所在:gl.drawArrays是WebGl的Api,,BufferGeometry还缺少什么东西。
Geometry最后转换成BufferGeometry
在查找原因的过程中发现Geometry最后也会转换成BufferGeometry,所以上面的报错,还是在某个设置上出了问题。
分析threejs.js的代码
function projectObject( object, camera, groupOrder, sortObjects ) 方法
var geometry = objects.update( object ); // 这个处理把Geometry转换成BufferGeometry,attributes、drawRange、groups等信息补上