javascript - 如何为ThreeJS使用自定义 Canvas ？

我很难创建一个简单的ThreeJS应用程序，该应用程序可以在场景中渲染3D文本。网站上的所有示例都很繁重，无法让像我这样的初学者入门。到目前为止，如果没有技巧，我无法使场景出现，并且我想使用自己的canvas元素向其中添加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'）-不起作用;（

最佳答案

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

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