Three.js All In One

博客园 - xgqfrms

Three.js All In One

xgqfrms · 2026-06-04 · via 博客园 - xgqfrms

Three.js All In One

https://github.com/xgqfrms/three.js-all-in-one

3D `renderer` / 渲染器

Three.CanvasRenderer、Three.WebGLRenderer 和 Three.WebGPURenderer

THREE.CanvasRenderer ❌ (CanvasRenderingContext2D, HTML5 Canvas 2D)

const canvas = document.getElementById("myCanvas");
// Canvas 2D
const c2d = canvas.getContext("2d");

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

getContext(contextType)
getContext(contextType, contextAttributes)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

`THREE.WebGLRenderer` ✅ (WebGPU / WebGL 2)

const canvas = document.getElementById("myCanvas");
// WebGL
const gl = canvas.getContext("webgl");

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext

const canvas = document.getElementById("myCanvas");
// WebGL 2
const gl2 = canvas.getContext("webgl2");

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#webgl_2

https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext

const canvas = document.querySelector("#gpuCanvas");
// WebGPU
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API

https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext

async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  let adapter;
  try {
    adapter = await navigator.gpu.requestAdapter();
  } catch (error) {
    console.error(error);
  }
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();

  // …
}

new generation of native GPU APIs have appeared — the most popular being Microsoft's Direct3D 12, Apple's Metal, and The Khronos Group's Vulkan.

three.js renderer ✅ (WebGPU / WebGL 2)

https://threejs.org/docs/#Renderer

https://threejs.org/docs/?q=Renderer#WebGPURenderer

https://threejs.org/docs/?q=Renderer#WebGLRenderer

https://chatgpt.com/c/6a28d448-cde4-83ea-a1f8-043190dcec61

How to use the modern renderer:

Target an existing canvas:
You can pass an existing HTML <canvas> element directly to the renderer's configuration to avoid having Three.js automatically inject one.
Setup the render loop:
Use requestAnimationFrame to continually draw the scene from the perspective of the camera.

// 1. Get a reference to your HTML canvas
const canvas = document.getElementById('myCanvas');

// 2. Set up the Scene, Camera, and Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 复用已经存在的 canvas 画布，作为渲染器的容器 ✅
// 避免 three.js 自动插入一个新的 canvas 
const renderer = new THREE.WebGLRenderer({ canvas: canvas });

renderer.setSize(window.innerWidth, window.innerHeight);

// 3. Create a basic mesh and add it to the scene
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 4. Create your render loop
function animate() {
    // renderer.setAnimationLoop 设置高性能循环动画，避免使用手动 requestAnimationFrame ✅
    // requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
   renderer.render(scene, camera);
   // render();
}


// ✅
renderer.setAnimationLoop(animate);

// ❌
// animate();

// function render() {
//   renderer.render(scene, camera)
// }

https://threejs.org/docs/?q=animat#WebGLRenderer.setAnimationLoop

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

https://discourse.threejs.org/t/is-there-a-performance-difference-between-requestanimationframe-and-setanimationloop/27771

https://threejs-journey.com/lessons/animations

https://sbcode.net/threejs/animation-loop/
https://sbcode.net/threejs/render-loop/

The THREE.CanvasRenderer was a legacy module that allowed Three.js to render 3D scenes using the 2D Canvas API (CanvasRenderingContext2D) instead of WebGL.
It was officially removed from the core Three.js library over a decade ago.
If you are looking for how to render Three.js scenes into an HTML canvas today, you should use the modern THREE.WebGLRenderer instead.
It operates much faster by utilizing hardware acceleration.

THREE.CanvasRenderer 是一个旧模块，它允许 Three.js 使用 2D Canvas API (CanvasRenderingContext2D) 而非 WebGL 来渲染 3D 场景。
它已于十多年前从 Three.js 核心库中正式移除。
如果您现在想知道如何将 Three.js 场景渲染到 HTML Canvas 中，则应该使用现代的 THREE.WebGLRenderer。
它利用硬件加速，运行速度更快。

Canvas - `React Three Fiber`

https://r3f.docs.pmnd.rs/api/canvas

· TresJS

https://docs.tresjs.org/api/components/tres-canvas

three.js

https://threejs.org/

https://threejs.org/manual/

https://threejs.org/docs/

https://threejs.org/editor/

https://github.com/mrdoob/three.js

versions

https://github.com/mrdoob/three.js/releases

latest version

https://github.com/mrdoob/three.js/releases/tag/r184

https://github.com/mrdoob/three.js/releases/tag/r137

https://github.com/mrdoob/three.js/releases/tag/r95

demos

https://jsfiddle.net/w43x5Lgh/

import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

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

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

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// animation

function animate( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

https://github.com/xgqfrms/WebGL

https://github.com/josdirksen/learning-threejs-third

https://www.cnblogs.com/xgqfrms/p/13765798.html