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

【问题标题】：How do I use a custom canvas for ThreeJS?如何为 ThreeJS 使用自定义画布？
【发布时间】：2020-01-10 07:55:46
【问题描述】：

我很难创建一个在场景中呈现 3D 文本的简单 ThreeJS 应用程序。网站上的所有示例都太重了，无法让像我这样的初学者入门。到目前为止，我无法在没有 hack 的情况下使场景出现，我想使用自己的 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>

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

编辑：画布：document.getElementById('my_canvas') -- 无效；(

【问题讨论】：

您能否通过live example 证明您的问题。这样可以更轻松地为您提供帮助。
我很困惑为什么this 示例有效，但它不在我的代码中：/
可能是 CSS 问题？您可以尝试删除所有样式以验证画布在视口中是否实际可见。

标签： javascript html css three.js

【解决方案1】：

我过去遇到过这个问题，您需要从您的画布 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>

【讨论】：

【解决方案2】：

你必须按顺序做三件事：

在文档中创建画布。
通过 JS 选择你的画布
将您的画布选择器传递给 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%;
}

【讨论】：