Renko's blog

<script type="text/javascript">
    var scene = null;
    var camera = null;
    var renderer = null;

    var mesh = null;
    var id = null;
    var stat = null;

    function init() {

        stat = new Stats();
        stat.domElement.style.position = 'absolute';
        stat.domElement.style.right = '0px';
        stat.domElement.style.top = '0px';
        document.body.appendChild(stat.domElement);

        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);
        scene = new THREE.Scene();

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
        camera.position.set(5, 5, 20);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                new THREE.MeshLambertMaterial({
                    color: 0xffff00
                }));
        scene.add(mesh);

        var light = new THREE.DirectionalLight(0xffffff);
        light.position.set(20, 10, 5);
        scene.add(light);

        id = setInterval(draw, 20);  //每 20 毫秒执行 draw 函数
    }

    function draw() {

        stat.begin();

        mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
        renderer.render(scene, camera);

        stat.end();
    }

    function stop() {
        if (id !== null) {
            clearInterval(id);
            id = null;
        }
    }
</script>

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
            camera.position.set(-5, 25, 25);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);


            //光照
            var light = new THREE.PointLight(0xffffff, 1, 1000);
            light.position.set(15,25,20);
            scene.add(light);

            //材质
//            var texture = THREE.ImageUtils.loadTexture('img',{},function(){
//                renderer.render(scene,camera);
//            });

            var materials = [];
            for(var i = 0;i<6;++i){
                materials.push(new THREE.MeshBasicMaterial({
                    map: THREE.ImageUtils.loadTexture('img/'+i+'.png',{},function(){
                    renderer.render(scene,camera);
                }),
                    overdraw: true

                }));
            }

            var cube = new THREE.Mesh(new THREE.CubeGeometry(5,5,5),
                new THREE.MeshFaceMaterial(materials));
            scene.add(cube);


            //渲染
            renderer.render(scene,camera);

        }
    </script>

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
            camera.position.set(0, 0, 25);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);


            //光照
            var light = new THREE.PointLight(0xffffff, 1, 1000);
            light.position.set(15,25,20);
            scene.add(light);

            //材质
            var texture = THREE.ImageUtils.loadTexture('img/chess.png',{},function(){
                renderer.render(scene,camera);
            });
            //重复4次为8行8列
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(4,4);

            var material = new THREE.MeshLambertMaterial({
                map: texture
            });


            var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);
            scene.add(plane);


            //渲染
            renderer.render(scene,camera);

        }
    </script>

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
            camera.position.set(5, 5, 20);
            camera.lookAt(new THREE.Vector3(1, 0, 0));
            scene.add(camera);

            var material = new THREE.MeshBasicMaterial({
                color: 0xffff00
            });

            var loader = new THREE.FontLoader();
            loader.load('gothical_Regular.json', function(font) {
                var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
                    font: font,
                    size: 1,
                    height: 1
                }), material);
                scene.add(mesh);
            //渲染
            renderer.render(scene,camera);
            });
        }
    </script>

<script type="text/javascript">
        function init(){
            //渲染器
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            //场景
            var scene = new THREE.Scene();
            //照相机
            var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
            camera.position.set(4, -3, 5);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            //创建边长为1的红色正方体，wireframe（线框）材质，以便看到正方体后方的边
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
                    new THREE.MeshBasicMaterial({
                        color:0xff0000,
                        wireframe:true
                    })
            );
            scene.add(cube);
            //渲染
            renderer.render(scene,camera);
        }
    </script>

<script type="text/javascript">
      function init(){
          //渲染器
          var renderer = new THREE.WebGLRenderer({
              canvas:document.getElementById('mainCanvas')
          });
          renderer.setClearColor(0x000000);
          //场景
          var scene = new THREE.Scene();
          //照相机
          var camera = new THREE.PerspectiveCamera(60, 400 / 300, 1, 10);
          camera.position.set(0, 0, 5);
          scene.add(camera);
          //创建边长为1的红色正方体，wireframe（线框）材质，以便看到正方体后方的边
          var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
                  new THREE.MeshBasicMaterial({
                      color:0xff0000,
                      wireframe:true
                  })
          );
          scene.add(cube);
          //渲染
          renderer.render(scene,camera);
      }
  </script>

<script>
    function init(){
        var renderer = new THREE.WebGLRenderer({
            canvas:document.getElementById('mainCanvas')
        });
    }
</script>

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

renderer.setClearColor(0x000000);

var scene = new THREE.Scene();