我从一个显示集成three.js + greensock的示例开始开发。 链接：http://www.kadrmasconcepts.com/blog/2012/05/29/greensock-three-js/ 我试图将three.js + greensock使用的canvas放到我设计的页面内的div中。但画布总是附加到屏幕的底部。我试图做getelementbyid并访问我的div对象，但没有工作。
电流：
https://www.dropbox.com/s/kowowsjvdnwkl0f/bart.png?dl=0
目前的实现显示画布位于蓝色面板下方，但希望它位于红色面板（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+
}
答案 0 :(得分：0)
您可能意外移出了容器
container = document.body.appendChild( container );
container.appendChild( this.renderer.domElement );
将导致容器在身体上，这将显示在底部。
@Vinay有正确的答案，你可以给渲染器构造函数一个画布，这样你就可以在容器中创建自己的画布，然后将该画布直接传递给渲染器。