Three.js - 渲染器与响应性

上一页
下一页

场景的基本功能

您知道场景是用于容纳相机、灯光和我们想要在屏幕上渲染的对象的容器。让我们来看一下场景对象的一些基本功能：

添加对象

`add(object)` 函数用于将对象添加到场景中。

const scene = THREE.Scene()
scene.add(cube) // adds the cube
scene.add(sphere) // adds a sphere

移除对象

`remove(object)` 函数用于从场景中移除对象。

scene.remove(cube) // removes the last added cube
scene.remove(sphere) // removes a sphere

子对象

`scene.children` 返回场景中所有对象的数组，包括相机和灯光。

console.log(scene.children) // outputs all the objects in the scene
console.log(scene.children.length) // outputs number of elements on the
scene

注意 - 我们可以使用对象的 `name` 属性为任何对象命名。名称对于调试非常方便，也可以直接从场景中访问对象。

查看以下示例。

scene.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js – The scene
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
               Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
            background-color: #262626;
            overflow: hidden;
         }
         #btn-conatiner {
            position: absolute;
            top: 0;
            left: 0;
            height: 10vh;
            width: 100%;
         }
         @media screen and (max-width:600px){
            #btn-container{
               display: flex;
               flex-direction: column;
            }
         }
         .btn {
            padding: 5px 15px;
            margin: 5px 15px;
            font-weight: bold;
            text-transform: uppercase;
         }
         .add {
            color: green;
         }
         .rem {
            color: red;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="btn-conatiner">
         <button class="btn add">Add Cube</button>
         <button class="btn rem">Remove Cube</button>
      </div>
      <div id="threejs-container"></div>
      <script type="module">
         // Experimenting with different methods of scene
         // add, remove, children, getElementById
         // sizes
         let width = window.innerWidth
         let height = window.innerHeight
         const gui = new dat.GUI()
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // lights
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
         scene.add(ambientLight)
         const light = new THREE.PointLight(0xffffff, 0.5)
         light.position.set(-10, 10, -10)
         // for shadow
         light.castShadow = true
         light.shadow.mapSize.width = 1024
         light.shadow.mapSize.height = 1024
         light.shadow.camera.near = 0.1
         light.shadow.camera.far = 1000
         scene.add(light)
         // camera
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000)
         camera.position.set(0, 10, 40)
         camera.lookAt(0, 0, 0)
         gui.add(camera.position, 'z', 10, 200, 1).name('camera-z')
         // plane
         const planeGeometry = new THREE.PlaneGeometry(100, 100)
         const plane = new THREE.Mesh(
            planeGeometry,
            new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.DoubleSide })
         )
         plane.rotateX(Math.PI / 2)
         plane.position.y = -1.75
         plane.receiveShadow = true
         scene.add(plane)
         // scene.add
         function addCube() {
            const cubeSize = Math.ceil(Math.random() * 3)
            const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)const cubeMaterial = new THREE.MeshLambertMaterial({
               color: Math.random() * 0xffffff
            })
            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
            cube.castShadow = true
            cube.name = 'cube-' + scene.children.length
            cube.position.x = -30 + Math.round(Math.random() * 50)
            cube.position.y = Math.round(Math.random() * 5)
            cube.position.z = -20 + Math.round(Math.random() * 50)
            scene.add(cube)
         }
         const add = document.querySelector('.add')
         add.addEventListener('click', () => {
            addCube()
            console.log('cube added')
         })
         // scene.remove
         function removeCube() {
            const allChildren = scene.children
            const lastObject = allChildren[allChildren.length - 1]
            if (lastObject.name) {
               scene.remove(lastObject)
            }
         }
         const remove = document.querySelector('.rem')
         remove.addEventListener('click', () => {
            removeCube()
            console.log('cube removed')
         })
         // scene.children
         console.log(scene.children)
         // responsivenesswindow.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // animation
         function animate() {
            requestAnimationFrame(animate)
            renderer.render(scene, camera)
         }
         // rendering the scene
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

打开您的控制台以查看场景中的元素。

Add_Cube

使用 name 属性

`scene.getObjectByName(name)` 函数直接根据名称从场景中返回对象。

您还可以添加另一个参数 - `recursive`。

scene.getObjectByName(name, recursive)

如果将 `recursive` 参数设置为 `true`，Three.js 将搜索对象的完整树以查找具有指定名称的对象。

向场景添加雾

此属性允许您设置场景的雾。雾会渲染一种薄雾，隐藏远处的物体。

scene.fog = new THREE.Fog(0xffffff, 0.015, 100)

这行代码定义了白色雾 (0xffffff)。您可以使用前面两个属性来调整雾的显示方式。0.015 值设置 near 属性，100 值设置 far 属性。使用这些属性，您可以确定雾的起始位置以及雾变浓的速度。

使用 `THREE.Fog` 对象，雾会线性增加。还有一种不同的方法可以设置场景的雾；为此，请使用以下定义：

scene.fog = new THREE.FogExp2(0xffffff, 0.01)

这次，我们没有指定 near 和 far，只指定颜色 (0xffffff) 和雾的密度 (0.01)。最好对这些属性进行一些实验，以获得您想要的效果。

使用 overrideMaterial 属性

`overrideMaterial` 属性强制场景中的所有对象使用相同的材质。

scene.overrideMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff })

在这里，场景上的所有对象都使用相同的材质，即 `MeshLambertMaterial`。

注意 - `THREE.Scene` 是一种有时也称为场景图的结构。场景图是一种可以保存图形场景所有必要信息的结构。在 Three.js 中，这意味着 `THREE.Scene` 包含渲染所需的所有对象、灯光和其他对象。

Scene_Graph

渲染器

渲染器使用相机和场景中的信息在屏幕上（即 `` 元素）绘制输出。

在 Hello Cube 应用中，我们使用了 `WebGLRenderer`。还有一些其他渲染器可用，但 `WebGLRenderer` 迄今为止是最强大的渲染器，通常也是您唯一需要的渲染器。

注意 - 存在基于 canvas 的渲染器、基于 CSS 的渲染器和基于 SVG 的渲染器。虽然它们可以工作并可以渲染简单的场景，但我不会推荐使用它们。它们没有积极开发，非常占用 CPU，并且缺少诸如良好的材质支持和阴影之类的功能。

打印页面
上一页
下一页
广告
© . All rights reserved.