2016-12-05 47 views
0

我的專業graphicdesigner與three.js所我想我的html內的多個three.js所動畫,但他們是重疊的

enter image description here

我嘗試了很多東西有問題,但是這並不好。我只是複製了導入的模型並重新命名了它。我在互聯網上嘗試一切。這有效,但它們重疊,我也有2個不同的名字。這是我的.js

var container, stats; 
     var camera, scene, renderer; 
     var mouseX = 0, mouseY = 0; 
     var windowHalfX = window.innerWidth/4; 
     var windowHalfY = window.innerHeight/4; 
     init(); 
     animate(); 
     function init() { 
       // important for multiple canvasuse 
container = document.getElementById('container1'); 
document.body.appendChild(container); 
        // cam 
       camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
       camera.position.z = 4; 
        // scene 
       scene = new THREE.Scene(); 
        // light 
       var ambient = new THREE.AmbientLight(0x444444); 
       scene.add(ambient); 
       var directionalLight = new THREE.DirectionalLight(0xffeedd); 
       directionalLight.position.set(0, 1, 1).normalize(); 
       scene.add(directionalLight); 
        // BG 
       scene.background = new THREE.Color(0xffffff); 
        // BEGIN Clara.io JSON loader code 
       var objectLoader = new THREE.ObjectLoader(); 
       objectLoader.load("untitled-scene.json", function (obj) { 
        scene.add(obj); 
       }); 
        // mlg render 
       renderer = new THREE.WebGLRenderer(); 
       renderer.setSize(400, 200); 
       container.appendChild(renderer.domElement); 
       document.addEventListener('mousemove', onDocumentMouseMove, false); 
         // resize? 
       window.addEventListener('resize', onWindowResize, false); 
       } 
        // draw a different, next canvas 
container = document.getElementById('container2'); 
document.body.appendChild(container); 

        // cam 
       camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
       camera.position.z = 4; 
        // scene 
       scene = new THREE.Scene(); 
        // light 
       var ambient = new THREE.AmbientLight(0x444444); 
       scene.add(ambient); 
       var directionalLight = new THREE.DirectionalLight(0xffeedd); 
       directionalLight.position.set(0, 1, 1).normalize(); 
       scene.add(directionalLight); 
        // BG 
       scene.background = new THREE.Color(0xffffff); 

       // BEGIN Clara.io JSON loader code 
       var objectLoader = new THREE.ObjectLoader(); 
       objectLoader.load("untitled-scene2.json", function (obj) { 
        scene.add(obj); 
       }); 
       // mlg rendere reloaded 
        renderer = new THREE.WebGLRenderer(); 
        renderer.setSize(400, 200); 
        container.appendChild(renderer.domElement); 
       document.addEventListener('mousemove', onDocumentMouseMove, false); 
       // 
       window.addEventListener('resize', onWindowResize, false); 


      function onWindowResize() { 
       windowHalfX = window.innerWidth/2; 
       windowHalfY = window.innerHeight/2; 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(canvas_width, canvas_height); 
      } 
      function onDocumentMouseMove(event) { 
       mouseX = (event.clientX - windowHalfX)/16; 
       mouseY = (event.clientY - windowHalfY)/16; 
      } 
      // 
      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
      } 
      function render() { 
       camera.position.x += (mouseX - camera.position.x) * .03; 
       camera.position.y += (- mouseY - camera.position.y) * .03; 
       camera.lookAt(scene.position); 
       renderer.render(scene, camera); 
      } 

這裏馬HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>farts</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       color: #808080; 
       font-family:Monospace; 
       font-size:13px; 
       text-align:center; 

       background-color: #fff; 
       margin: 0px; 
       overflow: hidden; 
       width: 100%; 
       height: 100%; 
      } 
      #info { 
       color: #00f; 
       position: absolute; 
       top: 10px; 
       width: 100%; 
       text-align: left; 
       z-index: 100; 
       display:block; 
      } 

      #container1 { 
       width: 300px; 
       height: 200px; 
       border: 5px solid red; 
       float:left; 
       margin-top: 200px; 
      } 
      #container2 { 
       width: 300px; 
       height: 200px; 
       border: 1px solid blue; 
       float:left; 
      } 



     </style> 
    </head> 

    <body> 
     <div id="info"> 
farts <br /> 
     </div> 
     <div id="container1"> 
     <script src="num1.js"></script><br/> 
     <script src="three.js"></script> 
     <script src="Detector.js"></script> 
     <script src="stats.min.js"></script> 
     </div> 
     <div id="container2"> 
     <script src="num1.js"></script><br/> 
     <script src="three.js"></script> 
     <script src="Detector.js"></script> 
     <script src="stats.min.js"></script> 
     </div> 
    </body> 
</html> 

這只是一個有趣的項目,但我有愛提供的。

回答

0

變化:

renderer.setSize(400, 200); 

爲:

renderer.setSize(300, 200); 

因爲你的div有尺寸(300,200),你把它渲染其它尺寸(400,200),這就是爲什麼你的畫布出來的你的div和與你不應該有問題編輯你的CSS。

相關問題