一、測試頁面:index.htmlhtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <script src="js/three.min.js"></script> <script src="js/stats.min.js"></script> <script src="js/tweenjs.min.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <canvas></canvas> </body> <script src="js/chapter/chapter6.1.js"></script> </html>
二、js代碼實現:chapter6.1.js前端
var scene, camera, renderer; function init() { //init scene scene = new THREE.Scene(); //init renderer var canvas = document.body.querySelector("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 1); //init camera camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 0, 100); camera.up.set(0, 1, 0); camera.lookAt(0, 0, 0); //init light var light = new THREE.PointLight(0xffffff); light.position.set(0, 0, 100); scene.add(light); var geometry = new THREE.PlaneGeometry(60, 30); var texture = new THREE.TextureLoader().load("images/a.jpg"); var material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } function animate() { //不是很明白爲何設置紋理須要用requestAnimationFrame requestAnimationFrame(animate); renderer.render(scene, camera); } init(); animate();
單個平面的紋理貼圖會覆蓋整個Geometry的平面,若是要作出商標那樣覆蓋局部區域的貼圖,便知足不了需求。對於這種狀況,初步設想是新增一個小的平面做爲商標貼圖的區域,而後使該平面與原平面緊貼。以下圖:紫色區域的正方體的一個面,左上角是另外一個平面貼圖。canvas
代碼實現:ide
var box = new THREE.BoxGeometry(25, 25, 25); var boxMaterial = new THREE.MeshLambertMaterial({color: 0xDDA0DD}); var boxMesh = new THREE.Mesh(box, boxMaterial); scene.add(boxMesh); var plane = new THREE.PlaneGeometry(6, 4); var texture = new THREE.TextureLoader().load("images/a.jpg"); var planeMaterial = new THREE.MeshLambertMaterial({ map: texture }); var planeMesh = new THREE.Mesh(plane, planeMaterial); planeMesh.translateX(-9); planeMesh.translateY(10); planeMesh.translateZ(15.6);//平移紋理貼圖網格模型 scene.add(planeMesh);
實際操做的過程當中發現,要想正好將貼圖貼在幾何體上,貼圖的位置仍是很難調整的,特別是當集合體的角度很差計算的時候,就更難肯定座標了。不知道當物體在運動過程當中是怎麼保證貼圖的位置正確的...前端真的好難啊= =測試