Hướng dẫn is javascript good for 3d games? - javascript có tốt cho trò chơi 3d không?

Tôi biết bạn đang nghĩ gì: Tại sao bạn lại sử dụng JavaScript để phát triển trò chơi? Tôi đã nghĩ điều tương tự khi lần đầu tiên tôi phát hiện ra rằng bạn có thể sử dụng JavaScript, cũng như HTML5, để phát triển các trò chơi 3D.

Sự thật là, kể từ khi giới thiệu API JavaScript WebGL, các trình duyệt hiện đại có khả năng trực quan cho phép chúng hiển thị đồ họa 2D và 3D phức tạp và phức tạp hơn mà không cần dựa vào các plugin của bên thứ ba.

Bạn có thể bắt đầu hành trình phát triển trò chơi web của mình với Pure JavaScript, đây có lẽ là cách tốt nhất để tìm hiểu nếu bạn là người mới bắt đầu. Nhưng tại sao lại phát minh lại bánh xe khi có rất nhiều động cơ trò chơi được áp dụng rộng rãi để lựa chọn?

Trong hướng dẫn này, chúng tôi sẽ khám phá sáu công cụ trò chơi JS/HTML5 hàng đầu, được xếp hạng theo số lượng sao GitHub và hướng dẫn bạn cách sử dụng chúng.

1. ba.js

Three.js là một trong những thư viện JavaScript phổ biến nhất để tạo và hoạt hình đồ họa máy tính 3D trong trình duyệt web bằng WebGL. Nó cũng là một công cụ tuyệt vời để tạo các trò chơi 3D cho các trình duyệt web.

Vì ba.js dựa trên JavaScript, nên việc thêm bất kỳ tương tác nào giữa các đối tượng 3D và giao diện người dùng, chẳng hạn như bàn phím và chuột. Điều này làm cho thư viện hoàn toàn phù hợp để tạo các trò chơi 3D trên web.

Ưu điểm

• Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: The most important advantage of Three.js — aside from its ability to perform complex rendering very well — is that it’s very easy to get started with
• Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: Due to its popularity, there are countless examples to help you get started
• Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: Three.js has plenty of users and, therefore, a sizable community of developers working with and creating various third-party tools
• Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Robust documentation is usually a great indicator of a strong library, and Three.js has excellent docs
• Hiệu suất tuyệt vời: ba.js có lợi thế về hiệu suất so với các thư viện khác mà tôi đã sử dụng: Three.js has a performance advantage over other libraries I have used
• Kết xuất PBR: ba.js đã kết xuất PBR tích hợp, giúp kết xuất đồ họa chính xác hơn: Three.js has built-in PBR rendering, which makes rendering graphics more accurate

Nhược điểm

• Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: This makes a lot of modern rendering techniques impossible/infeasible to implement with Three.js
• Không phải là một công cụ trò chơi: Nếu bạn đang tìm kiếm các tính năng ngoài kết xuất - bạn đã giành được nhiều: If you’re looking for features beyond rendering – you won’t find many here
• Hướng đến người mới: Bởi vì API phục vụ cho người mới, nhiều tính năng nâng cao được ẩn: Because the API caters to novices, many advanced features are hidden
• Thiếu hỗ trợ: Không có hỗ trợ tích hợp để lập chỉ mục không gian, làm cho raycast chính xác hoặc loại bỏ frustum và phát hiện va chạm là vô vọng trong các kịch bản phức tạp: There is no built-in support for spatial indexing, making exact raycasting, or frustum culling, and collision detection is hopelessly inefficient in complex scenarios

Ba.js trong hành động

Nếu bạn đang tìm cách đi sâu vào việc tạo các đối tượng 3D đơn giản hoặc phức tạp trên web, ba.js là thư viện đi. Những lợi thế hàng đầu của nó bao gồm một cộng đồng tài năng và rộng lớn và rất nhiều ví dụ và tài nguyên.

Three.js là thư viện hoạt hình 3D đầu tiên mà tôi đã làm việc và tôi đã giới thiệu nó cho bất kỳ ai bắt đầu phát triển trò chơi.

Hãy để tạo ra một hình học xoay đơn giản để chứng minh những gì ba.js có thể làm.

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

Tạo chức năng

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Tiếp theo, tạo hàm

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

Kết quả đã hoàn thành sẽ trông như thế này:

2. pixijs

Nếu bạn đang tìm kiếm một thư viện JS để tạo đồ họa phong phú và tương tác với sự hỗ trợ cho các ứng dụng đa nền tảng, thì không có gì khác ngoài PIXIJS. Công cụ tạo HTML5 này cho phép bạn phát triển hoạt hình và trò chơi mà không có kiến ​​thức trước về API WebGL.

Ưu điểm

• Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: Just like Three.js, PixiJS is very fast
• Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: Also like Three.js, Pixi.js supports multiple platforms
• Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: The API is easy for a beginner to understand
• Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Pixi.js uses a WebGL renderer but also supports a Canvas fallback

Nhược điểm

• Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: In my experience, Three.js is much easier to get started with
• Không phải là một công cụ trò chơi: Nếu bạn đang tìm kiếm các tính năng ngoài kết xuất - bạn đã giành được nhiều: Pixi.js proudly only support renderer

Hướng đến người mới: Bởi vì API phục vụ cho người mới, nhiều tính năng nâng cao được ẩn

Thiếu hỗ trợ: Không có hỗ trợ tích hợp để lập chỉ mục không gian, làm cho raycast chính xác hoặc loại bỏ frustum và phát hiện va chạm là vô vọng trong các kịch bản phức tạp

Ba.js trong hành động

  npm install pixi.js
  import * as PIXI from 'pixijs'

  //or CDN
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>

Nếu bạn đang tìm cách đi sâu vào việc tạo các đối tượng 3D đơn giản hoặc phức tạp trên web, ba.js là thư viện đi. Những lợi thế hàng đầu của nó bao gồm một cộng đồng tài năng và rộng lớn và rất nhiều ví dụ và tài nguyên.

import * as PIXI from 'pixi.js';

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources) => {
    const bunny = new PIXI.Sprite(resources.bunny.texture);
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    bunny.anchor.x = .5;
    bunny.anchor.y = .5;

    app.stage.addChild(bunny);

    app.ticker.add(() => {
        bunny.rotation += .01;
    });
});

Three.js là thư viện hoạt hình 3D đầu tiên mà tôi đã làm việc và tôi đã giới thiệu nó cho bất kỳ ai bắt đầu phát triển trò chơi.

Hãy để tạo ra một hình học xoay đơn giản để chứng minh những gì ba.js có thể làm.

Tạo chức năng

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Ưu điểm

• Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: Phaser is known to have a well-designed structure
• Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: The library supports the use of TypeScript for game development
• Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: Phaser primarily is a game development engine — and a good one at that
• Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Phaser supports a huge list of plugins
• Hiệu suất tuyệt vời: ba.js có lợi thế về hiệu suất so với các thư viện khác mà tôi đã sử dụng: Phaser supports WebGL and has Canvas enabled as a fallback

Nhược điểm

• Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: The build size of Phaser for desktop is quite massive
• Hỗ trợ kém cho phát triển di động: Tạo các ứng dụng di động gốc yêu cầu sử dụng Cordova hoặc một số khung của bên thứ ba khác: Creating native mobile apps requires using Cordova or some other third-party framework
• Quản lý nhà nước: Có thể hơi khó khăn để bắt đầu với người quản lý nhà nước Phaser: It can be somewhat difficult to get started with Phaser’s state manager

Phaser trong hành động

Phaser tốt để phát triển các ứng dụng trò chơi đa nền tảng. Sự hỗ trợ của nó cho một loạt các plugin và cộng đồng lớn các nhà phát triển xây dựng các trò chơi với Phaser giúp việc bắt đầu với khung.

Hãy để xây dựng một ứng dụng cơ bản với Phaser.

  npm install [email protected]
  //OR
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"> >/script>

Tiếp theo, chuyển trong một số cấu hình mặc định cho động cơ Phaser của bạn.

const config = {
  type: Phaser.Auto,
  width: 900,
  height: 700,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 200 },
    }
  },
  scene: {
    preload: preload,
    create: create
  }
};

const game = new Phaser.Game(config);

Tạo chức năng tải trước để tải trong các tệp tĩnh mặc định của bạn.

function preload() {
  this.load.setBaseURL('http://labs.phaser.io');
  this.load.image('sky', 'assets/skies/space3.png')
  this.load.image('logo', 'assets/sprites/phaser3-logo.png');
  this.load.image('red', 'assets/particles/red.png');
}

Cuối cùng, xác định chức năng

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

function create(){
    this.add.image(500, 500, 'sky');
    const particles = this.add.particles('red')
    const emitter = particles.createEmitter({
      speed: 100,
      scale: {start: 1, end: 0},
      blendeMode: 'ADD'
    });
    const logo = this.physics.add.image(400, 100, 'logo');
    logo.setVelocity(100, 200);
    logo.setBounce(1,1);
    logo.setCollideWorldBounds(true);
    emitter.setFollow(logo)
}

4. Babylon.js

Babylon.js là một trò chơi mạnh mẽ, đẹp đẽ, đơn giản và mở và động cơ kết xuất được đóng gói vào một khung JavaScript thân thiện.

Ưu điểm

• Sân chơi: Sân chơi là một công cụ tuyệt vời để thử nghiệm mọi thứ trước khi phát triển đầy đủ - và nó có tài liệu tuyệt vời để khởi động: The Playground is a great tool for testing things out before going into full development — and it has great documentation to boot
• Hỗ trợ cộng đồng mạnh mẽ: Các nhà phát triển Babylon rất hữu ích và năng động: Babylon developers are very helpful and active
• CodeBase cập nhật: Khung này có một Codebase và các công cụ bên thứ ba được cập nhật thường xuyên đang được phát triển tích cực: The framework enjoys a frequently updated codebase and third-party tools are in active development
• Kết xuất PBR: Hỗ trợ hỗ trợ kết xuất PBR là tuyệt vời: Support for PBR rendering support is excellent
• Bầu chọn sự tự tin: Babylon được sử dụng và hỗ trợ bởi các thương hiệu lớn như Adobe, Microsoft, v.v.: Babylon is used and supported by large brands such as Adobe, Microsoft, and more
• Bảo trì: Lỗi thường được giải quyết khá nhanh: Bugs are often ironed out quite quickly

Nhược điểm

• Thiếu trưởng thành: Babylon là bản phát hành đầu tiên vào năm 2013, khiến nó khá trẻ so với nhiều đối thủ cạnh tranh: Babylon was the first release in 2013, which makes it quite young compared to many of its competitors
• Tài liệu: Động cơ thiếu tài liệu API.: The engine lacks API documentation.
• Không phù hợp cho các dự án nhỏ hơn

Babylon.js hoạt động

Nhiều thương hiệu lớn tin tưởng Babylon.js là công cụ phát triển trò chơi của họ.

Babylon và các mô -đun của nó được xuất bản trên NPM.

  npm install babylonjs --save

  // TO USE

  import * as BABYLON from 'babylonjs'

  // OR

  import { Scene, Engine } from 'babylonjs'

Tạo một tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Tiếp theo, tạo một tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Tạo tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Dưới đây là một bản xem trước về hoạt hình của bạn sẽ trông như thế nào.

5. Vật chất.js

Matter.js là một công cụ vật lý cơ thể JavaScript 2D, cứng nhắc cho web. Mặc dù nó là một công cụ vật lý JavaScript, bạn có thể kết hợp nó với các gói và plugin khác nhau để tạo ra các trò chơi web thú vị.

Ưu điểm

• Sân chơi: Sân chơi là một công cụ tuyệt vời để thử nghiệm mọi thứ trước khi phát triển đầy đủ - và nó có tài liệu tuyệt vời để khởi động: Matter.js offers numerous features, such as rigid, compound, and composite bodies; stable stacking and resting; conservation of motion; and many more

Nhược điểm

• Thiếu trưởng thành: Babylon là bản phát hành đầu tiên vào năm 2013, khiến nó khá trẻ so với nhiều đối thủ cạnh tranh: Matter.js’s lack of continuous collision detection (CCD) causes an issue where fast-moving objects pass through other objects

Tài liệu: Động cơ thiếu tài liệu API.

Không phù hợp cho các dự án nhỏ hơn

Babylon.js hoạt động

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Nhiều thương hiệu lớn tin tưởng Babylon.js là công cụ phát triển trò chơi của họ.

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Babylon và các mô -đun của nó được xuất bản trên NPM.

Tạo một tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

Tiếp theo, tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 3 và bao gồm mã sau.

Tạo tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

Ưu điểm

• Sân chơi: Sân chơi là một công cụ tuyệt vời để thử nghiệm mọi thứ trước khi phát triển đầy đủ - và nó có tài liệu tuyệt vời để khởi động: The primary focus of PlayCanvas is its game development engine
• Hỗ trợ cộng đồng mạnh mẽ: Các nhà phát triển Babylon rất hữu ích và năng động: PlayCanvas is an open-source tool for powerful game development
• CodeBase cập nhật: Khung này có một Codebase và các công cụ bên thứ ba được cập nhật thường xuyên đang được phát triển tích cực: The game development platform is mobile-first
• Kết xuất PBR: Hỗ trợ hỗ trợ kết xuất PBR là tuyệt vời: The engine’s zero compiled time naturally makes the process faster
• Đường ống tài sản: PlayCanvas sử dụng các thực tiễn tốt nhất để cho phép bạn quyết định cách phân phối nội dung của bạn và ở dạng nào: PlayCanvas uses best practices to allow you to decide how your content is delivered and in what form
• Công cụ vật lý tích hợp: Bạn có thể tích hợp vật lý vào trò chơi của mình khá dễ dàng bằng cách sử dụng động cơ vật lý đạn mạnh mẽ Ammo.js: You can integrate physics into your game rather easily using the powerful bullet physics engine ammo.js
• Tải lại nóng: Bạn không cần tải lại trình duyệt của mình mỗi khi bạn thay đổi: You don’t have to reload your browser each time you make changes
• Chỉ có các công cụ kết xuất trên trình duyệt: PlayCanvas có các tính năng WebGL nâng cao chỉ chạy trên trình duyệt: PlayCanvas has advanced WebGL features that run only on browsers

Nhược điểm

• Các dự án tư nhân được trả lương: Tầng miễn phí không hỗ trợ các dự án tư nhân, vì vậy tất cả các mã và tài sản đều được lưu trữ công khai: The free tier does not support private projects, so all code and assets are hosted publicly
• Va chạm bù: Không có phần bù va chạm: There is no collision offset
• Thiếu ví dụ: Hướng dẫn cho PlayCanvas rất ít: Tutorials for PlayCanvas are few and far between

PlayCanvas trong hành động

PlayCanvas là tuyệt vời để tạo ra các dự án công cộng nhỏ hoặc các dự án trường học - ít nhất, đó là những gì tôi đã sử dụng. Nếu bạn cần nhiều tính năng hơn và kiểm soát nhiều hơn đối với phát triển trò chơi của mình, bạn có thể muốn xem xét đăng ký các tính năng cao cấp.

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Tạo một tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Tiếp theo, tạo một tệp

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Để tạo máy ảnh và ánh sáng cho đối tượng:

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Mã trên sẽ tạo ra kết quả sau.

Suy nghĩ cuối cùng

Bằng cách phá vỡ các ưu điểm, nhược điểm và sử dụng các trường hợp liên quan đến mỗi công cụ trò chơi JS/HTML5 được liệt kê ở trên, tôi hy vọng bạn đã hiểu rõ hơn về việc này phù hợp nhất với loại trò chơi hoặc hoạt hình mà bạn đang tìm kiếm để tạo.

Trong hầu hết các trường hợp, tôi khuyên bạn nên sử dụng ba.js, đặc biệt là nếu bạn đang tìm kiếm nhiều hơn hoặc một công cụ kết xuất hơn là một công cụ trò chơi. Do sự phổ biến của nó trong hệ sinh thái nhà phát triển, nó sẽ dễ dàng tìm thấy tài nguyên toàn diện để giúp bạn phát triển và chạy.

Nếu bạn tập trung vào phát triển trò chơi nhiều hơn, tôi sẽ đề xuất Babylon.js vì sự đơn giản của nó. Babylon cũng có một cơ sở mã hóa được cập nhật và phát triển bên thứ ba hoạt động và tính năng sân chơi là một công cụ tuyệt vời để thử nghiệm. PlayCanvas là một tùy chọn sao lưu vững chắc - nó chủ yếu là một công cụ trò chơi và bạn có thể sử dụng nó để xây dựng các trò chơi 3D phức tạp.

Bạn sử dụng công cụ trò chơi nào trong các dự án phát triển trò chơi của mình? Hãy cho chúng tôi biết trong các ý kiến!

Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh

Mã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng.

Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.

Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn!

Hãy thử nó miễn phí.