在 HTML5 Canvas 中渲染三个 js 场景答案

【问题标题】：Render Three-js Scene in HTML5 Canvas在 HTML5 Canvas 中渲染三个 js 场景
【发布时间】：2017-06-06 18:51:54
【问题描述】：

我不知道如何在我的索引页面上的画布中呈现 Three-js 场景。我有画布的基本模板和三js场景的基本模板。那么如何在画布中渲染场景呢？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Jquery links-->
    <script src="node_modules/jquery/dist/jquery.min.js" rel="script"></script>
    <!-- Bootstrap links -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" rel="script"></script>
    <!--Three-js links-->
    <script src="node_modules/three-js/three.js" rel="script"></script>
    <!-- Custom css and javascript links -->
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/canvas.js" rel="script"></script>
    <script src="js/artifactScene.js" rel="script"></script>
    <title></title>

</head>

<body onload="start()">
    <div class="container">

        <div id="indexRowOne" class="row">
            <!--#region sidebarColumn-->
            <div id="sidebarColumn" class="col-md-3 pull-left">
                <div class="sidebarContainer">
                    <button><img src="img/egyptMenuGlyph.png"><h4>Ancient Egypt</h4></button>
                    <button><img src="img/greeceMenuGlyph.png"><h4>Ancient Greece</h4></button>
                    <button><img src="img/romeMenuGlyph.png"><h4>Ancient Rome</h4></button>
                </div>
            </div>
            <!--#endregion sidebarColumn-->

            <div id="canvasColumn" class="col-md-6">
                <div class="canvasContainer">
                    <canvas id="artifactCanvas">
                    </canvas>
                </div>
            </div>

            <div id="artifactColumn" class="col-md-3 pull-right">
                <div class="artifactFrameDiv" >
                    <img src="artifacts/egypt/graniteHeadofAmenemnat/headOfAhkhmenet.png" class="artifactImage">
                    <img src="artifacts/egypt/horus_falcon/horusFalcon.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                </div>
            </div>
        </div>
    </div>
</body>

canvas.js

var gl; // A global variable for the WebGL context

function start() {
    var canvas = document.getElementById("artifactCanvas");
    // Initialize the GL context
    gl = initWebGL(canvas);
    canvas.width = 673;
    canvas.height = 472;
    // Only continue if WebGL is available and working
    if (!gl) {
        return;
    }
    // Set clear color to black, fully opaque
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // Enable depth testing
    gl.enable(gl.DEPTH_TEST);
    // Near things obscure far things
    gl.depthFunc(gl.LEQUAL);
    // Clear the color as well as the depth buffer.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
function initWebGL(canvas) {
    gl = null;
    // Try to grab the standard context. If it fails, fallback to experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    // If we don't have a GL context, give up now
    if (!gl) {
        alert("Unable to initialize WebGL. Your browser may not support it.");
    }
    return gl;
}

artifactScene.js

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();

【问题讨论】：

@SpencerWieczorek 控制台错误：未捕获的类型错误：无法在 artifactScene.js:6 处读取 null 的属性“appendChild”
我打算把这个贴在你删除的那个上：IntStream.range(n,n+5).collect(StringBuilder::new,(sb,i)->sb.append(matchArr[i]),StringBuilder::append).toString()
我想请教一下关于使用画布 dom 元素的说明。当我使用 WebGLRenderer( {canvas:canvas_id}) 时没有问题，但是如果我使用 getElementById("canvas_id") 选择该元素并使用它，我得到 WebGL_draw_buffers not supported 错误有什么区别？

标签： javascript html canvas three.js

【解决方案1】：

您可以通过

指定现有的画布

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

示例： http://jsfiddle.net/w3wna04q/1/

【讨论】：

同时删除document.body.appendChild( renderer.domElement );
@KScandrett 谢谢你让我走上了正确的道路。现在，我的画布中有立方体渲染。我只需要调整一些尺寸，我就可以做生意了。