在bootstrap网格中放置一个three.js sceen

时间:2018-03-09 18:48:17

标签: javascript three.js

我试着理解如何在引导网格内部嵌入几个切换的three.js场景,由于某种原因,我在列内的画布拒绝与文本列在同一行,我无法弄清楚为什么,任何帮助将不胜感激。

预览:https://htmlpreview.github.io/?https://github.com/Phoreaka/PlateInGrid/blob/master/index.html

HTML:



<section id="intro">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-lg-4 col-md-4 textContainer ">
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                  
                  </div> <!-- col end -->
                  
                  
                  <div class="col-lg-8 col-md-8">
                      <div id="myCanvas"></div>
                  
                        <button id="polychrome"></button>
                        <button id="blue"></button>
                        <button id='PausePlay'>Pause</button>
                      
                  </div> <!-- col end --->
                  
              </div> <!--row end -->
          </div> <!-- container end -->
      </section>
&#13;
&#13;
&#13;

的CSS:

&#13;
&#13;
html, body {
    direction: rtl;
	font-family: 'Heebo', sans-serif;
    -webkit-font-smoothing: antialiased;
	margin: 0px;
	overflow: hidden;
}



.background {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -99;
    background-color: lightgray;
    background-repeat: no-repeat;
    background-size: cover;
    
}

#intro {
    width: 100wh;
    height: 100%;
}

.textContainer {
    height: auto;
    font-size: 22px;
}

#myCanvas {
    
}

canvas {
    height: 0;
}



#polychrome {
    background-color: rgba(246, 244, 231, 1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    bottom: 20px;
    border: 2px solid #194E9F;
    
}

#blue {
    background-color: rgba(246, 244, 231, 1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    bottom: 20px;
    border: 2px solid #194E9F;
}

#PausePlay {
    background-color: transparent;
    bottom: 20px;
    border-style: none;
}
&#13;
&#13;
&#13;

使用Javascript:

var container, stats, plate, plateTwo;

            //loading objects into scene
            var camera, scene, renderer, plate, plateTwo, controls; //loading objects into scene

            canvas_width = 700,
            canvas_height = 700;



            //Pause button toggle-Boolean for start and restart
            var initAnim = true;
            var runAnim = false;
            var isPlay = true;




            //tweening

            init();
            animate();


            //init functions for all the scene
            function init() {

                container = document.getElementById( 'myCanvas' ); //creates div and inside of it canvas
                document.body.appendChild( container );


                // scene
                scene = new THREE.Scene();  

                //camera
                camera = new THREE.PerspectiveCamera( 40,canvas_width / canvas_height, 100, 100000 );
                camera.position.set( 0, 0, 1000 );


                //lights
                var ambient = new THREE.AmbientLight( 0xFFFFf3, 1.1 );
                ambient.position.set( 0, 0, 900 ).normalize();
                scene.add( ambient );
                var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
                directionalLight.position.set( 0, 0, 700 ).normalize();
                scene.add( directionalLight );
                var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
                directionalLight.position.set( 0, 0, -700 ).normalize();
                scene.add( directionalLight );

                //lights end



                //setting renderer
                renderer = new THREE.WebGLRenderer({
                    alpha: true});//background opacity
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( canvas_width, canvas_height );
                document.body.appendChild( renderer.domElement );
                window.addEventListener( 'resize', onWindowResize, false );

                //setting render end

                //orbit controls
                controls = new THREE.OrbitControls(camera, renderer.domElement);
                controls.target = new THREE.Vector3(-300,0,0);
                controls.minPolarAngle = 1; // radians
                controls.maxPolarAngle = Math.PI/2; // radians
                controls.minDistance = 500;
                controls.maxDistance = 800;
                controls.enablePan = false;
                //orbit controls end


                // model blue
                    var onProgress = function ( xhr ) {
                    if ( xhr.lengthComputable ) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log( Math.round(percentComplete, 2) + '% downloaded' );
                    }
                };
                var onError = function ( xhr ) { };
                THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); //helper for texture loading

                //texture loader
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.crossOrigin = ''; //cross origin-allows to run it on github
                mtlLoader.setPath( 'images/new/' );
                mtlLoader.load( 'BluePlate.mtl', function( materials ) {
                materials.preload();

                //model loader
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.setPath( 'images/new/' );
                objLoader.load( 'BluePlate.obj', addPlate);
                });


                //object position setings
                var addPlate = function(object){
                plate = object;
                plate.name = 'blue_plate';
                //Move the plate in the scene
                plate.rotateX(0);
                plate.rotateY(0);
                plate.rotateZ(30);
                plate.position.x = -300;
                plate.position.y = 0;
                plate.position.z = 0;
                plate.scale.y = 1.8;
                plate.scale.x = 1.8;
                plate.scale.z = 1.8;

                //Add the 3D object in the scene

                scene.add(plate);//adds the plate
                animate(plate);
                render();
                };

                //model blue end


                //model Polychrome inside of button function appears only when "#polychrome is pressed"

                    var onProgress = function ( xhr ) {
                    if ( xhr.lengthComputable ) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log( Math.round(percentComplete, 2) + '% downloaded' );
                    }
                };
                var onError = function ( xhr ) { };
                THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); //helper for texture loading

                //texture loader
                var mtlLoaderTwo = new THREE.MTLLoader();
                mtlLoaderTwo.crossOrigin = ''; //cross origin-allows to run it on github
                mtlLoaderTwo.setPath( 'images/new/' );
                mtlLoaderTwo.load( 'PolychromePlate.mtl', function( materials ) {
                materials.preload();


                //model loader
                var objLoaderTwo = new THREE.OBJLoader();
                objLoaderTwo.setMaterials( materials );
                objLoaderTwo.setPath( 'images/new/' );
                objLoaderTwo.load( 'PolychromePlate.obj', addPlateTwo);
                });


                //object position setings
                var addPlateTwo = function(object){
                plateTwo = object;
                plateTwo.name = "color_plate";
                //Move the plate in the scene
                plateTwo.rotateX(0);
                plateTwo.rotateY(0);
                plateTwo.rotateZ(30);
                plateTwo.position.x = -300;
                plateTwo.position.y = 0;
                plateTwo.position.z = 0;
                plateTwo.scale.y = 1.8;
                plateTwo.scale.x = 1.8;
                plateTwo.scale.z = 1.8;
                }    

                //polychrome model end


                //Add the 3D object in the scene 
                var changeTexture = function(){
                if(!(scene.getObjectByName('color_plate')))
                   {       
                    scene.remove(plate);//removes the blue plate from scene
                    scene.add(plateTwo);
                    animate(plateTwo);
                    render();
                   }

                };


                //function for button blue to switch back to blue texture
                function changeTextureBlue(){
                   if(!(scene.getObjectByName('blue_plate')))
                   {       
                   scene.add(plate);
                    scene.remove(plateTwo);//removes the polychrome
                   }
                }



                //mouse click - running the functions of button click need to appear after the model load
                document.getElementById('polychrome').addEventListener('click', changeTexture, false);
                document.getElementById('blue').addEventListener('click', changeTextureBlue, false);
                //mouse click end

                //pause toggle
                var startButton = document.getElementById( 'PausePlay' );

                // Start Button
                startButton.onclick = function StartAnimation() {

                    // Start and Pause 
                    if (runAnim) { 
                        startButton.innerHTML = 'Pause';
                        runAnim = false;
                        isPlay = true;
                        animate();
                    } else {
                        startButton.innerHTML = 'Play';
                        runAnim = true;
                        isPlay = false;

                    }
                }//pause toggle end




            } // init ends



            //settings for window resize

                function onWindowResize() {

                camera.aspect = canvas_width / canvas_height;
                camera.updateProjectionMatrix();
                renderer.setSize( canvas_width, canvas_height );

            }  //window resize settings end





            //animate function
            function animate() {
                if (!isPlay) return;
                requestAnimationFrame(animate);
                if ( plate !== undefined) {
                    plate.rotation.y += -.001; 
                };

                if ( plateTwo !== undefined ) {
                    plateTwo.rotation.y += -.001; 
                };


                render();
                controls.update();


                } //animate function end



            //render
            function render() {

                renderer.render( scene, camera ); 

            } //render end

1 个答案:

答案 0 :(得分:0)

您没有将渲染器添加到div 你有这个:

container = document.getElementById( 'myCanvas' );
document.body.appendChild( container );
// then later..
document.body.appendChild( renderer.domElement );

你的代码是...
得到myCanvas的引用,
将myCanvas div移动到正文中的最后一个元素,
然后将渲染器画布添加为正文中的最后一个元素(将在myCanvas div之后)。

你可能想要这个:

// Get a reference to the container div
container = document.getElementById( 'myCanvas' );
// Add the renderer.domElement, which is a canvas, to the container div.
container.appendChild( renderer.domElement );