将 canvas 放入自定义 div 中？

Question

我从一个显示集成 three.js + greensock 的示例开始开发。 Link: http://www.kadrmasconcepts.com/blog/2012/05/29/greensock-three-js/ 我正在尝试将 three.js + greensock 使用的 canvas 放到我设计的页面中的 div 中。但是 canvas 总是被附加到屏幕底部。我尝试执行 getelementbyid 并访问我的 div 对象，但没有成功。

当前：

https://www.dropbox.com/s/kowowsjvdnwkl0f/bart.png?dl=0

如当前实施所示，canvas 在蓝色面板下方，但希望它在红色面板内 (div)。

谁能帮我解决一下。我在下面附上我的代码...提前非常感谢！

php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Horse Demo</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="author" content="Jason Kadrmas" />

        <!-- Bootstrap Core CSS -->
        <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- MetisMenu CSS -->
        <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

        <!-- Timeline CSS -->
        <link href="css/timeline.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="css/sb-admin-2.css" rel="stylesheet">

        <!-- Morris Charts CSS -->
        <link href="bower_components/morrisjs/morris.css" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- jQuery -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>

        <!-- Morris Charts JavaScript -->
        <script src="bower_components/raphael/raphael-min.js"></script>
        <script src="bower_components/morrisjs/morris.min.js"></script>
        <script src="js/morris-data.js"></script>

        <!-- Custom Theme JavaScript -->
        <script src="js/sb-admin-2.js"></script>


        <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
        <link href='css/simple.css' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="js/lib/plugins/CSSPlugin.min.js"></script>
        <script type="text/javascript" src="js/lib/easing/EasePack.min.js"></script>
        <script type="text/javascript" src="js/lib/TimelineLite.min.js"></script>
        <script type="text/javascript" src="js/lib/TweenLite.min.js"></script>
        <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>-->
        <script type="text/javascript" src="js/lib/Three.js"></script>
        <script type="text/javascript" src="js/ThreeScene.js"></script>

        </head>
    <body>
        <div class="wrapper">
<!--            <div class="navbar-inner">
                <div class="container">
                    <span class="btn-navheader">Timeline Demo - Horse</span>
                    <a href="#" class="btn btn-default" style="display: none;">Reset</a>
                    <a href="#" class="btn btn-default" style="display: none;">Pause</a>
                    <a href="#" class="btn btn-default" style="display: none;">Start</a>
                </div>
            </div>-->
            <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">                
                <a class="navbar-brand">Balloon Task v1.0</a>
            </div>
            <!-- /.navbar-header -->           
        </nav>

        <div class="container-fluid"> 
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">                                
                                <div class="col-xs-6 text-left">                                    
                                    <div class="">Balloon Number</div>
                                </div>
                                <div class="col-xs-6 text-right">
                                    <div class="huge">1/30</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>                                
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>


                <div class="col-lg-9 col-md-18">
                    <div class="panel panel-red">
                        <div class="panel-heading">
                            <div class="row">
                                <div id="taskcanvas" class="canvas"> 
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        <div class="row bottom-container"> 
        <div class="col-md-12">
            <span>Timeline Demo - Horse</span>
            <a href="#" class="btn btn-default">Reset</a>
            <a href="#" class="btn btn-default">Pause</a>
            <a href="#" class="btn btn-default">Start</a>   
        </div>
        </div>
        </div>


        </div>    
        <!-- /#wrapper -->

        <script language="javascript" type="text/javascript">

            var width = 500,
                    height = 500,
                    camera,
                    scene,
                    renderer,
                    SHADOW_MAP_WIDTH = 2048,
                    SHADOW_MAP_HEIGHT = 2048,
                    dominoGeometry,
                    dominoMaterial,
                    dominoPos = -180,
                    tweens = [],
                    type = 0,
                    d = 8,
                    basicScene,
                    tl = new TimelineLite({onComplete: complete});

            init();

            function init() {

                basicScene = new THREE.BasicScene({width: width, height: height});

                TweenLite.ticker.addEventListener("tick", render);

                initObjects();
            }

            // Horse morph variables.
            var horse;
            var paused = true;
            var theta = 0;

            var duration = 2100;
            var keyframes = 15, interpolation = duration / keyframes;
            var lastKeyframe = 0, currentKeyframe = 0;

            function render() {
                basicScene.renderer.render(basicScene.scene, basicScene.camera);

                if (horse && !paused) {

                    // Alternate morph targets

                    var time = Date.now() % duration;

                    var keyframe = Math.floor(time / interpolation);

                    if (keyframe != currentKeyframe) {

                        horse.morphTargetInfluences[ lastKeyframe ] = 0;
                        horse.morphTargetInfluences[ currentKeyframe ] = 1;
                        horse.morphTargetInfluences[ keyframe ] = 0;

                        lastKeyframe = currentKeyframe;
                        currentKeyframe = keyframe;
                    }

                    horse.morphTargetInfluences[ keyframe ] = (time % interpolation) / interpolation;
                    horse.morphTargetInfluences[ lastKeyframe ] = 1 - horse.morphTargetInfluences[ keyframe ];

                }
            }

            function initObjects() {

                dominoGeometry = new THREE.CubeGeometry(100, 100, 100, 1, 1, 1);
                dominoMaterial = new THREE.MeshPhongMaterial();
                dominoMaterial.color = new THREE.Color().setRGB(1, 1, 1);
                dominoMaterial.ambient = new THREE.Color().setRGB(0.0196078431372549, 0.0196078431372549, 0.0196078431372549);
                dominoMaterial.specular = new THREE.Color().setRGB(0.06666666666666667, 0.06666666666666667, 0.06666666666666667);

                var light = new THREE.DirectionalLight();
                light.intensity = 0.7;
                light.castShadow = true;
                light.position.set(-320, 350, 100);
                basicScene.add(light);

                // Floor
                var geometry = new THREE.PlaneGeometry(1800, 800, 3, 3);
                var material = new THREE.MeshPhongMaterial({color: 0xffffff, wireframe: false});

                material.ambient = new THREE.Color().setRGB(0.0196078431372549, 0.0196078431372549, 0.0196078431372549);
                material.specular = new THREE.Color().setRGB(0.06666666666666667, 0.06666666666666667, 0.06666666666666667);

                var mesh = new THREE.Mesh(geometry, material);
                mesh.receiveShadow = true;
                mesh.position.set(0, -50, 0);
                basicScene.add(mesh);

                initDominoes();
                initHorse();
            }

            function initDominoes() {

                var mesh, i;

                for (i = 0; i < 4; i++) {
                    mesh = new THREE.Mesh(dominoGeometry, dominoMaterial);
                    mesh.position.set(dominoPos, 0, 0);
                    mesh.rotationAutoUpdate = false;
                    mesh.castShadow = true;
                    mesh.receiveShadow = false;
                    mesh.scale.set(0.1, 1, 0.4);
                    basicScene.add(mesh);
                    dominoPos += 50;

                    tweens.push(TweenLite.to(mesh.rotation, 2, {y: Math.PI * 2, ease: Bounce.easeOut, delay: d * 0.1 + i * 0.2}));
                }
            }

            function initHorse() {

                var loader = new THREE.JSONLoader(true);

                loader.load("models/horse.js", function (geometry) {

                    horse = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0x0aa8a5, morphTargets: true}));
                    horse.scale.set(0.75, 0.75, 0.75);
                    horse.position.set(-600, -50, 0);
                    horse.rotation.y = Math.PI / 2;
                    basicScene.add(horse);

                    // Click handlers
                    $('.start').on('click', start).show();
                    $('.pause').on('click', pause).show();
                    $('.reset').on('click', complete).show();

                    // Horse
                    tweens.push(TweenLite.to(horse.position, d, {x: 900}));
                    tweens.push(TweenLite.to(horse.position, d * 0.1, {y: 150, delay: d * 0.07, ease: Sine.easeOut}));
                    tweens.push(TweenLite.to(horse.position, d * 0.12, {y: -50, delay: d * 0.18, ease: Sine.easeIn}));

                    tl.insertMultiple(tweens);
                    tl.pause();
                });
            }

            function pause() {
                paused = true;
                tl.pause();
            }

            function start() {
                paused = false;
                tl.play();
            }

            function complete() {
                pause();
                tl.progress(0);
            }


        </script>       

    </body>
</html>

JS:

THREE.BasicScene = function( args ) {

    var container = document.getElementById( "taskcanvas" );

    var _this = this;

    this.width = args.width;
    this.height = args.height;

    // Setup scene, camera, and renderer
    this.scene = new THREE.Scene();
    this.camera = initCamera( this.scene );
    this.renderer = initRenderer();
        container.appendChild( this.renderer.domElement );

    container = document.body.appendChild( container );
    container.appendChild( this.renderer.domElement );

    function initCamera( scene ) {
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 380;
        camera.aspect = _this.width / _this.height;
        camera.updateProjectionMatrix();
        scene.add( camera );

        return camera;
    }

    function initRenderer() {
        var renderer = new THREE.WebGLRenderer( {  antialias: true } );
        renderer.setSize( _this.width, _this.height );
        renderer.shadowCameraNear = 3;
        renderer.shadowCameraFar = _this.camera.far;
        renderer.shadowCameraFov = 50;
        renderer.shadowMapBias = 0.0039;
        renderer.shadowMapDarkness = 0.3;
        renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
        renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
        renderer.shadowMapEnabled = true;
        renderer.shadowMapSoft = true;

        return renderer;
    }
};

THREE.BasicScene.prototype = {
    add: function( obj ) {
        this.scene.add( obj );
    }
};

CSS:

canvas {
    background-image: -webkit-linear-gradient(top, #cee4ff, #fff3e1);
    background-image: linear-gradient(to bottom, #cee4ff, #fff3e1);
    background-image:    -moz-linear-gradient(top, #cee4ff, #fff3e1);  //FF3.6+ 
    background-image:     -ms-linear-gradient(top, #cee4ff, #fff3e1);  //IE10 
    background-image:      -o-linear-gradient(top, #cee4ff, #fff3e1);  //Opera 11.10+ 
}

Answer 1

您可能不小心将容器移出

container = document.body.appendChild( container );
container.appendChild( this.renderer.domElement );

会导致容器在 body 上，显示在底部。

@Vinay 的答案是正确的，你可以给渲染器构造函数一个 canvas 这样你就可以在容器中创建自己的 canvas，然后将那个 canvas 直接传递给渲染器。

将 canvas 放入自定义 div 中？

put canvas in custom div?

three.js

html5-canvas

gsap