Question

问题：当WebGLRenderer（）附加在document.body中时，一切都显示正常但是当在Canvas中附加WebGLRenderer（）时，什么都没有显示。

这是我的代码：此时，在代码中，渲染器被附加在Canvas中（搜索：canvasObj.appendChild（renderer.domElement））并且没有显示任何内容，但是当在document.body，mesh中添加渲染器时/ image显示正常。

<html> 
<head> 
    <title>Scroller</title> 
</head> 
<body bgcolor="#100000"> 
    <canvas id="canvas1" width="640" height="480" color="#000000"></canvas></div>
    <!--<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js">-->
<script src="../build/three.js"></script> 
<script src="objloader.js"></script> 
<script>                
        var camera, scene, renderer, cameraControls;
        var canvasObj= document.getElementById('canvas1');
        var canvasWidth = 1024;
        var canvasHeight = 768;
        var mousePrevLocation = 0;
        var canvasRatio = 1;
        var distance = 500;
        var objectCameraDistance = 1000;
        var images = "images/B1.png";

        var clock = new THREE.Clock();
        var images_Object = new Array();
        var mesh_Object = new Array();
        var mesh_parent = new Array();
        loadImages();

        //scroll();

        function loadImages(){
            var zPos=0;
            var img = new Image();
            img.src =images;
            images_Object = img;
            img.onload = function(){
                console.log(images_Object.width);
                canvasSize("images/B2.png");
                while(true){
                    if(images_Object.width>0){
                        break;              
                    }
                }                   

            }

        }           
        function canvasSize(image){         
                var background = new Image();                   
                background.onload = function(){     
                    canvasRatio = (this.width)/(this.height);
                    canvasWidth = this.width/5;
                    canvasHeight = this.height/5;

                    canvasObj.width=canvasWidth;
                    canvasObj.height=canvasHeight;                          
                    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                    initRenderer(camera);
                }
                background.src =image;          
        }
        function initRenderer(camera) {
            camera = camera;
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize( window.innerWidth, window.innerHeight );
            canvasObj.appendChild(renderer.domElement);
            //document.body.appendChild(renderer.domElement);
            camera.position.z = objectCameraDistance;
            scene = new THREE.Scene();
            window.addEventListener( 'resize', onWindowResize, false );

            addObjects(images);
            animate();
        }       

        function addObjects(){
            var zPos=0;
            var scale = 1;
            var scaleFactor = 0;

            var geometry = new THREE.PlaneGeometry(images_Object.width,images_Object.height,20);
            var texture = THREE.ImageUtils.loadTexture( images_Object.src );
            var material = new THREE.MeshBasicMaterial( { map: texture , transparent: true,wireframe: false});
            mesh = new THREE.Mesh( geometry, material );
            mesh_Object= mesh;
            mesh.position.z =zPos;
            mesh.scale.set(scale,scale,scale);

            scale =  scale + (( objectCameraDistance + distance)/objectCameraDistance) - 1;
            scene.add( mesh );                  
            zPos -= distance;

        }

        function onWindowResize() {         
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

        }
        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );           
        }

    </script></body></html>

Answer 1

查看WebGLRenderer的文档。（http://threejs.org/docs/58/#Reference/Renderers/WebGLRenderer）。您需要在创建时将画布作为参数传递给渲染器。

WebGLRenderer（）和Canvas

1 个答案: