进入第二章的书本了接下来就是单独的介绍各个具体属性了第一个是场景

来源：互联网发布：诺基亚5233软件下载编辑：程序博客网时间：2024/04/30 13:44

场景的属性比较有意思了具体都在注释里面

<!DOCTYPE html><html><head>    <title>Threejs</title>    <script type="text/javascript" src="Js/three.js"></script>    <script type="text/javascript" src="Js/jquery-1.9.0.js"></script><script type="text/javascript" src="Js/stats.js"></script><script type="text/javascript" src="Js/dat.gui.js"></script>    <style>        body {margin: 0;overflow: hidden;}    </style></head><body><div id="Stats-output"></div><!-- 上面是监视器,下面是输出 --><div id="WebGL-output"></div><script type="text/javascript" src="Js/index.js"></script></body></html>

js的文件

/** * Created by 12204 on 2016/11/12. */ function init() {  var stats = initStats();//初始化2监视器         //创建一个场景        var scene = new THREE.Scene();        // 创建一个相机        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);        // 创建一个渲染器        var renderer = new THREE.WebGLRenderer();        renderer.setClearColorHex();        renderer.setClearColor(new THREE.Color(0xEEEEEE));        renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;//告诉渲染器我需要影子        // 把坐标轴显示出来        var axes = new THREE.AxisHelper(20);        scene.add(axes);        // 创建一个平面var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});//新的材质对光源有反应        var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;//我接受影子照在我身上        //旋转平面的位置因为默认是与x轴平行的        plane.rotation.x = 1.5 * Math.PI;//-1.5到到0.5其实是一样的反向的问题//所以也可以这么写//plane.rotation.x = -0.5 * Math.PI;        plane.position.x = 0;        plane.position.y = 0;        plane.position.z = 0;        // 添加到场景中去        scene.add(plane);               // 相机放在哪里其实就是从哪个位置看        camera.position.x = -30;        camera.position.y = 40;        camera.position.z = 30;        camera.lookAt(scene.position);// 添加光照效果但是没有材质的话没啥区别var spotLight = new THREE.SpotLight(0xffffff);        spotLight.position.set(-60, 60, -10);        spotLight.castShadow = true;        scene.add(spotLight);        // 获取上下问创建一个渲染的位置        document.getElementById("WebGL-output").appendChild(renderer.domElement);        //渲染场景        renderer.render(scene, camera);var step = 0;        var controls = new function () {            this.rotationSpeed = 0.02;            this.numberOfObjects = scene.children.length;//获取当前scene对象中的所有对象的总数            this.removeCube = function () {                var allChildren = scene.children;//scene的children属性可以统计当前scene上面的所有对象                var lastObject = allChildren[allChildren.length - 1];                if (lastObject instanceof THREE.Mesh) {                    scene.remove(lastObject);//上面的if-else判断是为了检测当前对象的属性防止把光源和相机移除了                    this.numberOfObjects = scene.children.length;                }            };            this.addCube = function () {                var cubeSize = Math.ceil((Math.random() * 3));                var cubeGeometry = new THREE.BoxGeometry(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;//创建对象时指定的独一无二的名字//可以通过getChildByName来获取这个对象                cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));//随机生成方块位置,颜色                cube.position.y = Math.round((Math.random() * 5));                cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));                // 增加一个方块                scene.add(cube);                this.numberOfObjects = scene.children.length;            };            this.outputObjects = function () {                console.log(scene.children);            }        };        var gui = new dat.GUI();        gui.add(controls, 'rotationSpeed', 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();            // rotate the cubes around its axes            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;                }            });/*以上的代码也可以这么写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

0 0