这是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
解决方法
您可以使用如下所示的模式:
<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