如何为 ThreeJS 使用自定义画布？

Question

我很难创建一个在场景上渲染 3D 文本的简单 ThreeJS 应用程序。网站上的所有示例都太繁重，无法让像我这样的初学者上手。到目前为止，我无法让场景在没有黑客的情况下出现，我想使用我自己的画布元素向其添加 css 属性。

这是我编写的用于使立方体出现在场景中的以下代码。

import * as THREE from 'three';
import 'bootstrap';
import css from '../css/custom_css.css';

let scene = new THREE.Scene();

let WIDTH = window.innerWidth;
let HEIGHT = window.innerHeight;

let camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
let renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xE8E2DD, 1);

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );

// Create the shape
let geometry = new THREE.BoxGeometry(1, 1, 1);
// Create a material, colour or image texture
let material = new THREE.MeshBasicMaterial( {
    color: 0xFF0000,
    wireframe: true
});

// Cube
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);

let material_text = new THREE.MeshPhongMaterial({
    color: 0xdddddd
});

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

    var geometry = new THREE.TextGeometry( 'Hello three.js!', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelOffset: 0,
        bevelSegments: 5
    } );

    let textMesh = new THREE.Mesh(geometry, material_text);
    scene.add(textMesh);

    console.log('added mesh')
} );


camera.position.z = 5;

// Game Logic
let update = function(){
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.005;
};

// Draw Scene
let render = function(){
  renderer.render(scene, camera);
};

// Run game loop, update, render, repeat
let gameLoop = function(){
    requestAnimationFrame(gameLoop);

    update();
    render();
};

gameLoop();

我知道这是一个画布问题，因为每个人都建议简单地添加

var renderer = new THREE.WebGLRenderer( { canvas: my_canvas } );

，但这对我不起作用。我知道不是因为如果我把它去掉并保留在里面

// Append Renderer to DOM
document.body.appendChild( renderer.domElement );

然后我就可以看到场景中的物体。

为什么它不允许我将场景放置在画布上？

我的画布写成

<!--                            Canvas                         -->
<canvas id="my_canvas" class="container-fluid h-100 w-100 p-0 position-fixed" style="background-color: white; z-index: -1"> </canvas>

编辑：对于任何愿意的人，您能否告诉我为什么我的文本没有出现在场景中而只有立方体出现？谢谢

编辑：canvas：document.getElementById（'my_canvas'）--不起作用；（

Answer 1

你必须按顺序做三件事：

1. 在文档中创建画布。
2. 通过 JS 选择你的画布
3. 将画布选择器传递给 ThreeJS 渲染器。

在 HTML 中：

<canvas id="my_canvas"></canvas>
<script>
    // Make sure your script tags are at the end of the document.
    // Otherwise, your selectors may not work
</script>

在 JavaScript 中：

// Select the canvas from the document
var canvReference = document.getElementById("my_canvas");

// Then pass it to the renderer constructor
var renderer = new THREE.WebGLRenderer({
    antialias:true,
    canvas: canvReference
});

完成此操作后，您可以通过 CSS 分配自定义 CSS 规则：

#my_canvas {
    width: 100%;
    height: 100%;
}

Answer 2

我过去遇到过这个问题，您需要position-fixed从画布中删除 CSS 类。（正如 @Mugen87 在他的评论中所说）。

<canvas id="my_canvas" class="container-fluid h-100 w-100 p-0" style="background-color: white; z-index: -1"> </canvas>