将three.js动画放入div [英] Putting three.js animation inside of div

问题描述

这是three.js动画代码示例:

This is three.js animation code example:

<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 操作动画位置.我想到了这样的事情:

I would like to bind this animation code to some specific div via div id. So, animation would be displayed inside of div. That would allow me to easily manipulate animation location with css. I was having in mind something like this:

html:

<canvas id="myCanvas" width="578" height="200"></canvas>

javascript:

javascript:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here

但是我还没有找到用three.js 做这样的事情的方法.正如您在代码示例中看到的，我没有可以参考的画布元素.有什么想法吗?

But I haven't found a way to do something like this with three.js. As you can see in code example, there is no canvas element that I can refer to. Any ideas?

推荐答案

您可以使用如下模式:

<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 失败添加div

three.js r.69

three.js r.69

这篇关于将three.js动画放入div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！