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

Three.js场景搭建

最新推荐文章于 2025-05-30 14:58:22 发布

KalaerSun

最新推荐文章于 2025-05-30 14:58:22 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏： Three.js 文章标签： three.js

本文链接：https://blog.youkuaiyun.com/qq_25247589/article/details/53148136

Three.js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Three.js创建一个3D场景，包括设置渲染器、添加相机与光源、创建平面及立方体对象，并通过交互界面调整场景参数。

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

<!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