淘宝网站开发系统上海网站建设免费推

淘宝网站开发系统,上海网站建设免费推,景安网站备案的服务码,利州区住房和城乡建设部网站场景结构 场景在 3D 引擎是一个图中节点的层次结构#xff0c;其中每个节点代表了一个局部空间#xff08;local space#xff09;。示例 假设我们需要做一个太阳系的例子。对于太阳来说#xff0c;它只需要保持自身不动#xff0c;那么他的child有水金地火木土星……这些…场景结构场景在 3D 引擎是一个图中节点的层次结构其中每个节点代表了一个局部空间local space。示例假设我们需要做一个太阳系的例子。对于太阳来说它只需要保持自身不动那么他的child有水金地火木土星……这些child可能还有自己的卫星比如月球绕着地球转。但是对于月球来说它需要关注太阳在哪吗当然不用。月球只需要关注它的parent地球绕着地球转动即可。同样的假设月球上有个宇航员他不需要关注太阳和地球怎么动他的移动只需要相对于月球即可。我们可以使用一个场景Scene来模仿上述的例子。创建中心的太阳// 要更新旋转角度的对象数组 const objects []; // 一球多用 const radius 1; // 设置球的半径 const widthSegments 20; // 设置球的边数 const heightSegments 20; // 设置球的边数 const sphereGeometry new THREE.SphereGeometry( radius, widthSegments, heightSegments ); const sunMaterial new THREE.MeshPhongMaterial({ emissive: 0xffff00 }); const sunMesh new THREE.Mesh(sphereGeometry, sunMaterial); sunMesh.scale.set(5, 5, 5); // 扩大太阳的大小 scene.add(sunMesh); objects.push(sunMesh);放射属性emissive是基本上不受其他光照影响的固有颜色。光照会被添加到该颜色上。要注意要让太阳能够正确显示我们需要按需设置camera这决定了相机的可视范围。// 创建透视摄像机 const fov 75; const aspect 2; // 相机默认值 const near 0.1; const far 100; const camera new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 50, 0); camera.up.set(0, 0, 1); camera.lookAt(0, 0, 0);我们要创建一个俯视图所以把相机设置在了y轴50的方向上同时需要设置对于摄像机朝上的up位置想象我们俯视000位置的太阳我们相机的上方应该在z轴方向上然后我们需要使用lookAt让其看向原点。相当于三步确定相机位置、上下和聚焦点只有这三点都确定我们才能完全确定一个相机的摆放方式。注意我们需要调整far沿用之前的far5会让离相机远的object显示不出来。创建完成后我们想让太阳旋转起来只需要调整objects数组设定其旋转方式。objects.forEach((obj) { obj.rotation.y time; });这个object的坐标应该是对于创建的3dObject它会随着时间绕y轴旋转time的角度。创建地球// 创建地球 const earthMaterial new THREE.MeshPhongMaterial({ color: 0x2233ff, emissive: 0x112244, }); const earthMesh new THREE.Mesh(sphereGeometry, earthMaterial); earthMesh.position.x 10; scene.add(earthMesh); objects.push(earthMesh);const widthSegments 10; // 设置球的边数 const heightSegments 10; // 设置球的边数我们可以适当设置球的边数这样更容易看出来它在旋转。在这种情况下我们虽然可以看到地球正确绘制并自转了但它并没有绕着太阳公转。sunMesh.add(earthMesh);我们不应该把earth添加到场景scene中而是直接添加给sun.但是地球居然变得和太阳一样大而且会飞出视野范围。我们让earthMesh成为sunMesh的一个子节点。sunMesh.scale.set(5, 5, 5)将其比例设置为 5x。这意味着sunMeshs的局部空间是 5 倍大。这表示地球现在大了 5 倍它与太阳的距离 (earthMesh.position.x 10) 也是 5 倍。为了解决这个问题我们添加一个空的场景图节点。我们将把太阳和地球都作为该节点的子节点。// 创建太阳系容器 const solarSystem new THREE.Object3D(); scene.add(solarSystem); objects.push(solarSystem);这里我们创建了一个 [Object3D]。像 [Mesh]一样它也是场景图中的一个节点但与 [Mesh] 不同的是它没有材质material和几何体geometry。它只是代表一个局部空间。新的场景图变为创建月球延续同样的模式我们再加一个月亮。新的场景图应该像这样雨是我们再次添加了更多的隐形场景图节点。首先是一个名为earthOrbit的 [Object3D]并将新增earthMesh和moonOrbit都添加到其中。然后我们把moonMesh添加到moonOrbit上。轴可视化[AxesHelper]。它画了 3 条线分别代表本地的 X(红色) Y(绿色) 以及 Z(蓝色)轴。// 为每个节点添加一个AxesHelper objects.forEach((node) { const axes new THREE.AxesHelper(); axes.material.depthTest false; axes.renderOrder 1; node.add(axes); });我们希望轴即使在球体内部也能出现。要做到这一点我们将其材质material的depthTest属性设置为 false这意味着它们不会检查其是否在其他东西后面进行绘制。我们还将它们的renderOrder属性设置为 1默认值为 0这样它们就会在所有球体之后被绘制。否则一个球体可能会画在它们上面把它们遮住。可能很难看到其中一些轴因为有 2 对重叠的轴。sunMesh和solarSystem都在同一位置。同样地earthMesh和earthOrbit也在同一位置。让我们添加一些简单的控制方法让我们可以为每个节点打开/关闭它们。同时我们还可以添加另一个名为 [GridHelper]的帮助工具。它可以在 X,Z 平面上创建一个 2D 网格。默认情况下网格是 10x10 单位。使用[lil-gui]这是一个在 three.js 项目中非常流行的 UI 库。lil-gui 会获取一个对象和该对象上的属性名并根据属性的类型自动生成一个 UI 来操作该属性。我们要为每个节点制作一个 [GridHelper] 和一个 [AxesHelper]。我们需要为每个节点添加一个标签所以我们将删除旧的循环转而调用一些函数为每个节点添加帮助程序。需要注意的是我们将 [AxesHelper]的renderOrder设置为 2将[GridHelper]的设置为 1这样轴就会在网格之后绘制。否则网格可能会覆盖轴。场景图示例在建立场景图之前我们需要明确每个场景的具体架构。在一个简单的游戏世界中一辆汽车可能有这样的场景图。如果你移动车体所有的轮子都会随之移动。如果你想让车身和轮子分开弹跳你可以将车身和轮子作为代表汽车框架的框架frame节点的子节点。对于游戏世界中的人类对于一辆简单的坦克日地月代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head style /* 居中显示并留白背景和卡片式样式 */ html, body { height: 100%; margin: 0; background: #000000; display: flex; align-items: center; justify-content: center; } /* 画布占满容器 */ canvas { display: block; width: 98vw; height: 98vh; border-radius: 4px; background: #000; /* 可选避免未渲染时看起来空白 */ } /style body canvas idc/canvas script typemodule // 引入ThreeJs import * as THREE from three; import { GUI } from three/addons/libs/lil-gui.module.min.js; // 渲染(WebGL渲染器) // 自己创建的canvas在使用时候会更灵活(直接对canvas进行修改) const canvas document.querySelector(#c); const renderer new THREE.WebGLRenderer({antialias: true, canvas}); const gui new GUI(); // 创建透视摄像机 const fov 75; const aspect 2; // 相机默认值 const near 0.1; const far 100; const camera new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 50, 0); camera.up.set(0, 0, 1); camera.lookAt(0, 0, 0); // camera.position.z 4; // 设置相机位置 // 创建场景 const scene new THREE.Scene(); scene.background new THREE.Color(0xAAAAAA); // 创建灯光(三维效果会更明显) const color 0xFFFFFF; const intensity 3; const light new THREE.DirectionalLight(color, intensity); light.position.set(-1, 2, 4); scene.add(light); // 要更新旋转角度的对象数组 const objects []; // 一球多用 const radius 1; // 设置球的半径 const widthSegments 10; // 设置球的边数 const heightSegments 10; // 设置球的边数 const sphereGeometry new THREE.SphereGeometry( radius, widthSegments, heightSegments ); // 创建太阳系容器 const solarSystem new THREE.Object3D(); scene.add(solarSystem); objects.push(solarSystem); // 创建太阳 const sunMaterial new THREE.MeshPhongMaterial({ emissive: 0xffff00 }); const sunMesh new THREE.Mesh(sphereGeometry, sunMaterial); sunMesh.scale.set(5, 5, 5); // 扩大太阳的大小 solarSystem.add(sunMesh); objects.push(sunMesh); // 创建地球轨道容器 const earthOrbit new THREE.Object3D(); earthOrbit.position.x 10; solarSystem.add(earthOrbit); objects.push(earthOrbit); // 创建地球 const earthMaterial new THREE.MeshPhongMaterial({ color: 0x2233ff, emissive: 0x112244, }); const earthMesh new THREE.Mesh(sphereGeometry, earthMaterial); earthOrbit.add(earthMesh); objects.push(earthMesh); // 创建月球轨道容器 const moonOrbit new THREE.Object3D(); moonOrbit.position.x 2; earthOrbit.add(moonOrbit); // 创建月球 const moonMaterial new THREE.MeshPhongMaterial({color: 0x888888, emissive: 0x222222}); const moonMesh new THREE.Mesh(sphereGeometry, moonMaterial); moonMesh.scale.set(.5, .5, .5); moonOrbit.add(moonMesh); objects.push(moonMesh); // 打开/关闭轴和网格的可见性 // lil-gui 要求一个返回类型为bool型的属性来创建一个复选框所以我们为 visible属性 // 绑定了一个setter 和 getter。 从而让lil-gui去操作该属性. class AxisGridHelper { constructor(node, units 10) { const axes new THREE.AxesHelper(); axes.material.depthTest false; axes.renderOrder 2; // 在网格渲染之后再渲染 node.add(axes); const grid new THREE.GridHelper(units, units); grid.material.depthTest false; grid.renderOrder 1; node.add(grid); this.grid grid; this.axes axes; this.visible false; } get visible() { return this._visible; } set visible(v) { this._visible v; this.grid.visible v; this.axes.visible v; } } function makeAxisGrid(node, label, units) { const helper new AxisGridHelper(node, units); gui.add(helper, visible).name(label); } makeAxisGrid(solarSystem, solarSystem, 25); makeAxisGrid(sunMesh, sunMesh); makeAxisGrid(earthOrbit, earthOrbit); makeAxisGrid(earthMesh, earthMesh); makeAxisGrid(moonOrbit, moonOrbit); makeAxisGrid(moonMesh, moonMesh); // 是否需要调整渲染器大小以适应显示尺寸 function resizeRendererToDisplaySize(renderer) { const canvas renderer.domElement; const pixelRatio window.devicePixelRatio; const width Math.floor( canvas.clientWidth * pixelRatio ); const height Math.floor( canvas.clientHeight * pixelRatio ); const needResize canvas.width ! width || canvas.height ! height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } function render(time) { time * 0.001; // 将时间单位变为秒 // 调整渲染器大小以适应显示尺寸 if (resizeRendererToDisplaySize(renderer)) { const canvas renderer.domElement; camera.aspect canvas.clientWidth / canvas.clientHeight; // 更新相机宽高比 camera.updateProjectionMatrix(); // 更新投影矩阵 } objects.forEach((obj) { obj.rotation.y time; }); renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); /script /body /html