这是three.js动画代码示例：
<script defer="defer">
var angularspeed = 0.2;
var lastTime = 0;
function animate(){
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularspeed * timeDiff * 2 * Math.PI / 1000;
plane.rotation.z += angleChange;
lastTime = time;
renderer.render(scene,camera);
requestAnimationFrame(function(){
animate();
});
}
var renderer = new THREE.Webglrenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
camera.position.y = -450;
camera.position.z = 400;
camera.rotation.x = 45 * (Math.PI / 180);
var scene = new THREE.Scene();
var plane = new THREE.Mesh(new THREE.PlaneGeometry(300,300),new THREE.MeshnormalMaterial());
plane.overdraw = true;
scene.add(plane);
animate();
</script>
我想通过div id将这个动画代码绑定到一些特定的div.所以,动画会显示在div里面.这将允许我轻松地使用css操纵动画位置.我在想这样的事情：
HTML：
<canvas id="myCanvas" width="578" height="200"></canvas>
JavaScript的：
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here
但是我没有找到一种方法来做这样的事情与three.js.如代码示例所示,没有可以引用的canvas元素.有任何想法吗？
解决方法
您可以使用如下所示的模式：
<div id="canvas">
#canvas {
background-color: #000;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px;
padding: 0px;
position: static; /* fixed or static */
top: 100px;
left: 100px;
}
container = document.getElementById( 'canvas' );
document.body.appendChild( container );
renderer = new THREE.Webglrenderer();
renderer.setSize( 200,200 );
container.appendChild( renderer.domElement );
小提琴：http://jsfiddle.net/fek9ddg5/1/
另见THREE.js Ray Intersect fails by adding div
three.js r.69