web-dev-qa-db-ja.com

div内にthree.jsアニメーションを配置する

これは、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要素はありません。何か案は？

html5-canvasthree.js
14
Xardas

次のようなパターンを使用できます。

<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レイインターセクトがdivを追加することで失敗する

three.js r.69

21
WestLangley

レンダラーサイズをハードコード化したくない場合は、以下のコードが役立ちます。

キャンバスの高さと幅を動的に計算し、それに応じてレンダラーのサイズとカメラの位置を設定しています。

CSS

            #canvas {
             background-color: #FFF;
             width: 200px;
             height:200px;
             border: 1px solid black;
              }

HTML

<div id="canvas"/>

JavaScript

         //Add Renderer
         renderer = new THREE.CanvasRenderer();
         var container = document.getElementById('canvas');
         var w = container.offsetWidth;
         var h = container.offsetHeight;
         renderer.setSize(w, h);
         container.appendChild(renderer.domElement);

        //Add Camera
        camera = new THREE.PerspectiveCamera( 75, w / h, 2, 1000 );
        camera.position.z = 400;

        //Create Scene with geometry, material-> mesh
        scene = new THREE.Scene();
        geometry = new THREE.IcosahedronGeometry( 200, 3 );
        material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1 } );
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
1
Hitesh Sahu