Three.js学习笔记（二）场景（scene）

最新推荐文章于 2024-04-04 16:26:29 发布

啦啦啦种太阳wqz

最新推荐文章于 2024-04-04 16:26:29 发布

阅读量2.7k

点赞数 2

文章标签： Three.js scene traverse方法 scene.add scene.remove

本文链接：https://blog.csdn.net/qq_29602347/article/details/100132867

版权

前言

场景就是一个容器，可以容纳相机、光源、对象等，所以对场景的深入了解显得尤为重要。本次笔记主要学习：

在Three.js中场景使用的组件
THREE.Scene对象的作用

一、创建场景

一个场景想要显示任何东西，需要下表所示的三种类型的组件：

组件	说明
摄像机	决定屏幕上哪些东西需要渲染
光源	决定材质如何显示以及用于产生阴影
对象	摄像机透视图里主要的渲染对象，如球、立方体等

二、场景的基本功能

通过下面一个实例，我们来学习一些和场景相关的方法：

THREE.Scene.Add：用于向场景中添加对象
THREE.Scene.Remove：用于移除场景中的对象
THREE.Scene.children：用于获取场景中所有的子对象列表
THREE.Scene.traverse：用于操作场景中的所有对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>scene</title>
  <script src="Three/three.js"></script>
  <script src="dat.GUI/dat.gui/build/dat.gui.js"></script>
  <style>
  body{
    margin: 0;
    overflow: hidden;
  }
  </style>
</head>
<body>
  <div id="WebGL-output"></div>
  <script>
    var scene;
    var camera;
    var renderer;
    var plane;
  function init(){

    //定义场景、相机、渲染器
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMapEnabled = true;

    //定义一个平面承载物体
    var planeGeometry = new THREE.PlaneGeometry(60,40,1,1);
    var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
        plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow = true;

        plane.position.set(0,0,0);
        plane.rotation.x = -0.5 * Math.PI;
        scene.add(plane);


        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);


    var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

    var controls = new function(){
        this.rotationSpeed = 0.02;
        this.numberOfObjects = scene.children.length;
        this.addCube = function(){
          var cubeSize = Math.ceil(3*Math.random());
          var cubeGeometry = new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
          var cubeMaterial = new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
          cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

          cube.castShadow = true;

          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.removeCube = function(){
          var objNumber = scene.children.length;
          var lastObject = scene.children[objNumber - 1];
          if(lastObject instanceof THREE.Mesh){
            scene.remove(lastObject);
            this.numberOfObjects = scene.children.length;
        }
      }
    };

    var gui = new dat.GUI();
        gui.add(controls,'rotationSpeed',0,1);
        gui.add(controls,'addCube');
        gui.add(controls,'removeCube');
        gui.add(controls,'numberOfObjects').listen();
    
        document.getElementById('WebGL-output').appendChild(renderer.domElement);
        renderScene();

    function renderScene(){
        requestAnimationFrame(renderScene);
        //让物体动起来
        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;
        }
      })

      renderer.render(scene, camera);
    }

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

运行起来发现除了一个平面什么也没有，但其实已经定义了很多个对象，通过点击addCube就可以添加对象。其中用到了scene.add()方法。而另一个方法removeCube()中则用到了scene.remove()方法；而通过scene.children.length则可以获取所有的子对象。
而renderScene()函数中使用的scene,.traverse();方法，将一个方法作为参数传递给traverse()方法，这个传递来的方法将会在场景中的每一个子对象上执行。
在这里插入图片描述
最终可以实现如下效果：

啦啦啦种太阳wqz

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Three.js学习笔记（二）场景（scene）

前言场景就是一个容器，可以容纳相机、光源、对象等，所以对场景的深入了解显得尤为重要。本次笔记主要学习：在Three.js中场景使用的组件THREE.Scene对象的作用一、创建场景一个场景想要显示任何东西，需要下表所示的三种类型的组件：组件说明摄像机决定屏幕上哪些东西需要渲染光源决定材质如何显示以及用于产生阴影对象摄像机透视图里主要的渲染对象...
复制链接

扫一扫