three.js学习点滴(1) — 创建场景

来源：互联网发布：网络系统工程师考试编辑：程序博客网时间：2024/06/07 23:55
创建场景直接上代码：
<!DOCTYPE html><html lang="en"><head><title>CreateScene.html</title></head><body><div id = "container3d"></div><script src="js/three.js"></script><script src="js/OrbitControls.js"></script><script src="js/Detector.js"></script><script src="js/stats.min.js"></script><script>var controls;var container,stats;var camera, scene;var renderer;var mesh, zmesh, geometry;var mouseX = 0, mouseY = 0;var isShowFPS = true;initScene();animate();//初始化场景function initScene(){//场景 scene = new THREE.Scene();//摄像机camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight , 1,20000);camera.position.set(0, 180,200);//控制器controls = new THREE.OrbitControls( camera );controls.addEventListener( 'change', render );//灯光var ambientLight = new THREE.AmbientLight(0xffffff);    scene.add(ambientLight);// directional lightingvar directionalLight = new THREE.DirectionalLight(0xffffff);  //美术场景渲染后，可以不用打这么多灯光了directionalLight.position.set(0, 0, 10);scene.add(directionalLight);//three.js自带的几何体(以平面为例)plane = new THREE.Mesh(new THREE.PlaneGeometry(500 ,500, 8 , 8 ) , new THREE.MeshBasicMaterial({color : 0x000000 , opacity : 0.25 , transparent : false , wireframe : true}));plane.visible = true;plane.position.set(-2 , 1,0);plane.rotation.set(-Math.PI/2,0,0 );scene.add(plane);// 容器 container = document.getElementById("container3d");//渲染器renderer = new THREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);//renderer.setScissor( 200, 200, window.innerWidth, window.innerHeight );//renderer.setViewport( 300, 0, window.innerWidth, window.innerHeight );container.appendChild(renderer.domElement);//  显示帧率if(isShowFPS){stats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.bottom = '0px';stats.domElement.style.zIndex = 100;container.appendChild( stats.domElement );}// SKYBOX/FOG  天空盒子//scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );  //是否有雾效果var materialArray = [];materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/px.jpg" ) }));materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/nx.jpg" ) }));materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/py.jpg" ) }));materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/ny.jpg" ) }));materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/pz.jpg" ) }));materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/skybox/nz.jpg" ) }));for (var i = 0; i < 6; i++){   materialArray[i].side = THREE.BackSide;}var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );var skyboxGeom = new THREE.CubeGeometry( 2000, 2000,2000, 1, 3, 1 );var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );scene.add( skybox );//红小球精灵var ballTexture = THREE.ImageUtils.loadTexture("textures/ball.png");var ballMaterial = new THREE.SpriteMaterial({map : ballTexture , useScreenCoordinates : true , alignment : THREE.SpriteAlignment.center});ballSprite = new THREE.Sprite(ballMaterial);ballSprite.scale.set(32,32,1.0);ballSprite.position.set(500,500,0);scene.add(ballSprite);//绑定事件window.addEventListener( 'resize', onWindowResize, false );};function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );render();controls.update();stats.update();}function render() {renderer.render( scene, camera );}</script></body></html>
运行结果：
0 0