这是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 做这样的事情的方法。正如您在代码示例中看到的,我没有可以参考的画布元素。有任何想法吗?