码迷,mamicode.com
首页 > Web开发 > 详细

Three.js学习笔记05

时间:2018-01-15 12:37:56      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:osi   new   class   属性   style   err   move   lis   erer   

场景相关函数和属性

技术分享图片

下面的代码中应用到了所有以上的函数及属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"
            src="libs/three.js"></script>
    <script type="text/javascript"
            src="libs/stats.js"></script>
    <script type="text/javascript"
            src="libs/dat.gui.js"></script>
    <style>
        body{
            /*移除滚动条*/
            margin:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>
<script type="text/javascript">
    function init(){
        var scene=new THREE.Scene();
        //scene.fog=new THREE.Fog(0xffffff,0.1,100);//颜色、近处、远处,越远浓度越高
        scene.fog=new THREE.FogExp2(0xffffff,0.015);//颜色、浓度

        var stats=new initStats();

        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
        camera.position.x=-30;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        scene.add(camera);

        var renderer=new THREE.WebGLRenderer();
        renderer.setClearColor(0xFFFFFF,1.0);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMapEnabled=true;

        var planeGeometry=new THREE.PlaneGeometry(60,50,1,1);
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;
        plane.receiveShadow=true;
        scene.add(plane);

        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-30,80,-10);
        spotLight.castShadow=true;//此光源产生阴影
        scene.add(spotLight);

        var ambientLight=new THREE.AmbientLight(0x0a0a0a);
       // ambientLight.castShadow=true;//此光源产生阴影
        scene.add(ambientLight);



        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var controls=new function(){
            this.rotationSpeed=0.02;
            this.numberOfObjects = scene.children.length;

            this.addCube=function(){
                var cubeSize = Math.ceil((Math.random() * 3));
                var cubeGeometry=new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
                var cubeMaterial=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
                var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
                cube.castShadow=true;
                cube.name="cube-"+scene.children.length;
                cube.position.x=-30+Math.round(Math.random()*planeGeometry.parameters.width);
                cube.position.y=Math.round(Math.random()*5);
                cube.position.z=-25+Math.round(Math.random()*planeGeometry.parameters.height);
                scene.add(cube);
                this.numberOfObjects=scene.children.length;
            };

            this.removeCube=function(){
                var allChildren=scene.children;//获取场景中所有子对象的列表
                var lastObject=allChildren[allChildren.length-1];
                if(lastObject instanceof THREE.Mesh){
                    scene.remove(lastObject);
                    this.numberOfObjects=scene.children.length;
                }
            };

            this.outputObjects = function () {
                console.log(scene.children);
            };

        };

       // scene.overrideMaterial=new THREE.MeshLambertMaterial({color:0xffffff});//设置所有物体的材质属性

        var gui=new dat.GUI();
        gui.add(controls,‘rotationSpeed‘,0,1.0);//范围为0-0.5
        gui.add(controls, ‘addCube‘);
        gui.add(controls, ‘removeCube‘);
        gui.add(controls, ‘outputObjects‘);
        gui.add(controls, ‘numberOfObjects‘).listen();

        render ();

        function render() {
            stats.update();
            scene.traverse(function (e) {//将一个函数作为参数传递进来,这个传递进来的函数将会在场景的每一个子对象上调用一次
                if (e instanceof THREE.Mesh && e != plane) {
                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
            });
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            stats.domElement.style.position = ‘absolute‘;
            stats.domElement.style.left = ‘0px‘;
            stats.domElement.style.top = ‘0px‘;
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

    }
    window.onload=init;
    </script>
</body>
</html>

运行效果如下图:

技术分享图片

 

Three.js学习笔记05

标签:osi   new   class   属性   style   err   move   lis   erer   

原文地址:https://www.cnblogs.com/yhhzxcvbnm/p/8287447.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!