webgl 可以load什么类型
发布网友
发布时间：2022-04-22 04:09
共1个回答
热心网友
时间：2024-08-15 07:24
在页面中，我们利用WebGL技术来呈现3D模型。
1.首先我们创建一个div，并将其加入到页面中。
1
2
container = document.createElement('div');
document.body.appendChild( container )
2.定义相机。
1
2
3
4
camera =new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight,1,
2000 );
camera.position.z = initalCameraZElem.value;
camera.position.x = initalCameraXElem.value;
camera.position.y = initalCameraYElem.value
3.定义场景。
1
scene = new THREE.Scene()
4.设置环境光，并将其加入场景。
1
2
varambient =
new THREE.AmbientLight( 0x101030);
scene.add( ambient );
5.设置平行光，并将其加入场景。
1
2
3
vardirectionalLight =
new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set(0,
0, 1 ).normalize();
scene.add( directionalLight );
6.设置材质。
1
2
3
4
5
6
7
8
9
10
vartexture =
new THREE.Texture();
varloader =
new THREE.ImageLoader();
loader.addEventListener('load',
function ( event ) {
texture.image = event.content;
texture.needsUpdate =true;
} );
loader.load('small.jpg' );
7.加载3D模型。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
varloader =
new THREE.OBJLoader();
loader.addEventListener('load',
function ( event ) {
varobject = event.content;
_object = object;
console.log(object);
for(
var i = 0, l = object.children.length; i < l; i ++ ) {
//object.children[ i].material.map = texture;
}
object.position.y = initalYElem.value;
object.position.x = initalXElem.value;
object.position.z = initalZElem.value;
scene.add( object );
});
loader.load( path );//path为模型的路径
8.渲染场景。
1
2
3
renderer =new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth , window.innerHeight);
container.appendChild( renderer.domElement );
模型可以为本地的，也可以为服务器上的。
如果加载的是本地模型，浏览器会报错，原因是浏览器默认不允许加载本地的文件，解决方法是：
以Chrome为例，右击Chrome图标，在目标后面添加如下命令：
--allow-file-access-from-files
即可加载本地的模型文件。
