Question

我无法弄清楚如何在索引页面的画布中渲染Three-js场景。我有画布的基本模板和three-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();

Answer 1

您可以通过

指定现有画布

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

实施例： http://jsfiddle.net/w3wna04q/1/

在HTML5 Canvas中渲染Three-js场景

1 个答案: