three js 记录一下 基础的代码

 

1. 创建一个场景

   var scene = new THREE.Scene();

    

2. 创建一个摄像机：

   var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

       

3. 创建一个渲染器

   function initWebGLRenderder(){
     var renderer = new  THREE.WebGLRenderer({alpha:true});
     renderer.setSize(window.innerWidth, window.innerHeight);
     
     renderer.domElement.style.position = 'absolute';
     renderer.domElement.style.zIndex = 1;
     renderer.domElement.style.top = 0;
     return renderer
     }

    

4. 创建一个环境光：

   var ambientLight = new THREE.AmbientLight(0x555555);

    

5. 创建一个控制器：

   var control=new THREE.TrackballControls(camera);

    

6. 持续渲染：

   function animate() {
     control.update()
     requestAnimationFrame(animate);
     cssrenderer.render(cssScene,camera)
     renderer.render(scene, camera);
     
   }
   animate();

    

7. 创建一个cube:

   function createCube(){
     var geometry = new THREE.BoxGeometry();
     var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
     material.blending  = THREE.NoBlending;
     var cube = new THREE.Mesh(geometry, material);
     return cube;
   }

    

8. 创建一个精灵：

   function generateSprite(name) {
     var loader = new THREE.TextureLoader();
     var warningTextures = loader.load("./resources/"+name+".png");
     warningTextures.wrapS;
     warningTextures.wrapT;
     warningTextures.needsUpdate = true;
     var mat = new THREE.SpriteMaterial({ map: warningTextures, depthTest: false });
     var sprite = new THREE.Sprite(mat);
     return sprite;
   }