Reposition Textur in three.js

Ich habe eine Textur in three.js gezeichnet. Ich möchte jedoch die Textur ein wenig neu positionieren (Winkel ändern). Bitte sehen Sie die Bilder unten. Meine benötigte Leistung ist im Grunde genommen der Stromausgang, der etwas nach unten geneigt ist, so dass die grüne Fläche parallel zum Boden ist und ich mehr vom Himmel sehen kann.Reposition Textur in three.js

Ich habe versucht, mit den Kameraeinstellungen zu spielen, und auch die Position und Rotation der Textur. Ich war jedoch nicht in der Lage, die erforderliche Ausgabe zu erhalten.

Original-Ausgabe

Pflicht

Hier ist mein Code auf jsbin

-Code unten

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Tennis</title> 
    <link rel="stylesheet" type="text/css" href="../css/home.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <!--adding the js libraries--> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script> 
    <script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script><!--to be able to pan and do controls.update--> 
</head> 
<body> 
    <div id="ThreeJS"></div> 
</body> 
<script> 
    var animationTracker,count=0; 
    var floormesh=null,floorTexture,floorMaterial,floorGeometry;//floor 
    var skyBoxGeometry,skyBoxMaterial,skyBox;//sky 
    var SCREEN_WIDTH,SCREEN_HEIGHT,scene,camera,renderer,light,container,animationTracker; 
    var mesh; 
    var textAnimationCount = 0,textMesh; 
    init(); 

    function init() 
    { 
     /* 1.set SCREEN_WIDTH and SCREEN_HEIGHT */ 
     SCREEN_WIDTH = window.innerWidth-110, SCREEN_HEIGHT = window.innerHeight; 
     console.log(window.innerWidth); 
     console.log(window.innerHeight); 

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

     /* 3.camera */ 
     camera = new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,0.1,1000); 
     camera.position.x = 0; 
     camera.position.y = 14; 
     camera.position.z = 45; 
     camera.lookAt(scene.position); 

     /* 4.renderer */ 
     renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT) 

     /* 7.light */ 
     light = new THREE.DirectionalLight('white',1); 
     //light.position.set(0,10,10).normalize(); 
     light.position.set(20,20,0).normalize(); 

     /* adding elements to scene */ 
     drawFloorAndSky(); 

     /* 8.weave together */ 
     container = document.getElementById('ThreeJS') 
     container.appendChild(renderer.domElement); 
     //scene.add(cube); 
     renderer.render(scene,camera); 
    } 

    function drawFloorAndSkyAnimate() 
    { 
     animationTracker = requestAnimationFrame(drawFloorAndSkyAnimate); 
     count++; 
     renderer.render(scene,camera); 
     controls.update(); 
     console.log("position : x=="+floor.position.x+",y=="+floor.position.y+",z=="+floor.position.z); 
     console.log("rotation : x=="+floor.rotation.x+",y=="+floor.rotation.y+",z=="+floor.rotation.z); 
    } 

    function drawFloorAndSky() 
    { 
     ////////////// 
     // CONTROLS // 
     ////////////// 
     // move mouse and: left click to rotate, 
     //     middle click to zoom, 
     //     right click to pan 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 

     /////////// 
     // FLOOR // 
     /////////// 
     // note: 4x4 checkboard pattern scaled so that each square is 25 by 25 pixels. 
     //var floorTexture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg'); 
     floorTexture = new THREE.ImageUtils.loadTexture('../images/grass256.jpg'); 
     floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
     floorTexture.repeat.set(20, 20); 
     // DoubleSide: render texture on both sides of mesh 
     floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide }); 
     floorGeometry = new THREE.PlaneGeometry(100, 100, 1, 1); 
     floor = new THREE.Mesh(floorGeometry, floorMaterial); 
     floor.position.y = -0.5; 
     floor.rotation.x = Math.PI/2; 
     scene.add(floor); 

     ///////// 
     // SKY // 
     ///////// 
     // recommend either a skybox or fog effect (can't use both at the same time) 
     // without one of these, the scene's background color is determined by webpage background 
     // make sure the camera's "far" value is large enough so that it will render the skyBox! 
     skyBoxGeometry = new THREE.CubeGeometry(1000, 1000, 1000); 
     // BackSide: render faces from inside of the cube, instead of from outside (default). 
     skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x9999ff, side: THREE.BackSide }); 
     skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial); 
     scene.add(skyBox); 

     /* keeping it going */ 
     requestAnimationFrame(drawFloorAndSkyAnimate); 
     renderer.render(scene,camera); 
     controls.update(); 
    } 
</script> 
</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 

a, a:visited, a:focus, a:hover { 
    color: #0A5C2F !important; 
    text-decoration: none !important; 
} 

svg a, svg a:visited, svg a:focus, svg a:hover { 
    color: #0A5C2F; 
    text-decoration: none; 
} 

.row { 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
} 

.button { 
    font-size: 1.4rem; 
    line-height: 2rem; 
} 

.button:hover, .button.active:hover { 
    opacity: 0.5; 
    cursor: pointer; 
} 

/* top bar */ 
#title, #bottom { 
    /*float:left;*/ 
    height: 5%; 
    text-align: center; 
    display: table; 
    table-layout: fixed; 
    margin: 0; 
    width: 100%; 
} 

#title a:hover { 
    opacity: 0.5; 
} 

#prev, #next { 
    display: table-cell; 
    vertical-align: middle; 
    width: 30%; 
    font-size: 1.5rem; 
    color: #0A5C2F; 
} 

/* main */ 
#main { 
    height: 90%; 
    max-height: 90%; 
    max-width: 100%; 
    overflow: hidden; 
} 

#main text { 
    font-size: 1rem; 
    text-anchor: middle; 
}wwq 

#main circle:hover { 
    cursor: pointer; 
} 



/* options */ 
#options { 
    height: 10%; 
    text-align: center; 
    display: table; 
    table-layout: fixed; 
    margin: 0; 
    width: 100%; 
} 

#options-1-table, #options-2-table { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

#options-1, #options-2 { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    height: 100%; 
    width: 35%; 
} 

/* chart */ 
#chart-row { 
    height: 90%; 
} 

#chart { 
    height: 100%; 
    text-align: center; 
    padding-left: 0; 
    padding-right: 0; 
} 

#chart-title { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    height: 100%; 
    width: 30%; 
    font-size: 1.4rem; 
    background-color: #0A5C2F; 
    color: #ffffff; 
} 

#ThreeJS 
{ 
    z-index: 1; position: absolute; left:0px; top:190px; 
    /*width:100%;*/ 
    width: 1320px; 
    padding: 10px; 
    border: 5px solid navy; 
    margin: 10px; 
} 

/*ThreeJS*/ 
/*#ThreeJS*/ 
/*{*/ 
    /*z-index: 1; position: absolute; left:0px; top:190px;*/ 
    /*!*width:100%;*!*/ 
    /*width: 1300px;*/ 
    /*padding: 25px;*/ 
    /*border: 5px #0A5C2F;*/ 
    /*margin: 10px;*/ 
/*}*/

Bild verwendet Link: https://www.dropbox.com/s/ot28m991wvacfla/grass256.jpg?dl=0

Quelle

2016-04-13 PepperBoy

Was möchten Sie vielleicht tun, um ein Ziel zu Ihrem controls einzustellen, die standardmäßig auf (0, 0, 0) gesetzt ist. Sie erhalten die gewünschte Perspektive durch Erhöhung der y-Wert:

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.target.set(0, 10, 0);

Quelle

2016-04-13 11:17:41

Vielen Dank Falk, das war perfekt. Obwohl ich viel Zeit mit dem Fehler Uncaught TypeError verbracht habe: Kann die Eigenschaft 'set' von undefined nicht lesen, was daran lag, dass ich eine ältere Version von OrbitalControls.js verwendete :) – PepperBoy

Ops, du hast recht, in 'r72' war es noch möglich, 'controls.center' zu setzen, haben sie das entfernt! Entschuldigung, habe die von dir verwendete Version nicht überprüft. –

Reposition Textur in three.js

Antwort

Verwandte Themen