在HTML5画布中渲染三js场景

我无法弄清楚如何在索引页的画布中渲染“三js”场景。我有画布的基本模板和三js场景的基本模板。那么如何在画布上渲染场景？

index.html

    
    
    
    
    
    
    
    
    
    
    
    
    




    


        

            
            

                

                    
Ancient Egypt
                    
Ancient Greece
                    
Ancient Rome
                
            
            

            

                

                    
                    
                
            

            

                

                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        
    

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();

K Scandrett.. 5

您可以通过指定一个现有的画布

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

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

您可以通过指定一个现有的画布

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

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